Skip to content

Commit f14fa7a

Browse files
FirePheonixFirePheonix
authored
Z indexed and percentage widthing (#72)
* Z indexed and percentage widthing * animations added
1 parent d39481f commit f14fa7a

File tree

10 files changed

+221
-61
lines changed

10 files changed

+221
-61
lines changed

‎src/components/DeveloperLinks.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { developerLinks } from '@/constants/VolunteerAndDev/Links';
2-
2+
import { fadeIn } from '@/styles/Animations';
3+
import { motion } from 'framer-motion';
34
const DeveloperLinks = () => {
45
return (
56
<section className="container mx-auto text-center p-6">
@@ -17,14 +18,20 @@ const DeveloperLinks = () => {
1718
<span className="absolute inset-0 bg-black rounded-full scale-0 group-hover:scale-150 transition-transform duration-300 origin-center"></span>
1819

1920
{/* Link Content (Ensuring text/icons stay above the background) */}
20-
<div className="relative flex items-center gap-3 transition-all group-hover:text-white">
21+
<motion.div
22+
className="relative flex items-center gap-3 transition-all group-hover:text-white"
23+
variants={fadeIn}
24+
initial="hidden"
25+
whileInView="visible"
26+
viewport={{ once: true, amount: 0.5 }}
27+
>
2128
<img
2229
src={link.icon}
2330
alt={link.name}
2431
className="w-6 h-6 transition-all group-hover:invert"
2532
/>
2633
<span className="text-lg font-medium">{link.name}</span>
27-
</div>
34+
</motion.div>
2835
<span className="relative text-xl transition-all group-hover:text-white">
2936
→
3037
</span>

‎src/components/DeveloperTestimonials.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { motion } from 'framer-motion';
2-
import { Marquee } from '@/components/magicui/Marquee'; // Marquee for scrolling effect
2+
import { Marquee } from '@/components/magicui/Marquee';
33
import { developertestimonials } from '@/constants/VolunteerAndDev/DeveloperTestimonials';
44
import { stats } from '@/constants/Stats';
55
import {
@@ -117,7 +117,6 @@ export function DeveloperTestimonials() {
117117
about their journey??
118118
</span>
119119
</motion.h2>
120-
<hr className="w-32 border-t-2 border-gray-400 mx-auto mt-2" />
121120

122121
{/* Right Apostrophe (Flipped, Hidden Below 400px) */}
123122
<motion.img

‎src/pages/Donate.tsx‎

Lines changed: 69 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,15 @@ import {
55
donationData,
66
Img,
77
} from '@/constants/Donation';
8+
import {
9+
slideInLeft,
10+
slideInRight,
11+
slideInBottom,
12+
buttonAnimation,
13+
} from '@/styles/Animations';
814
import Footer from '@/sections/Footer';
915
import Header from '@/sections/Header';
16+
import { motion } from 'framer-motion';
1017

1118
const Donate: React.FC = () => {
1219
const [showAllFilings, setShowAllFilings] = useState(false);
@@ -24,7 +31,13 @@ const Donate: React.FC = () => {
2431
{/* Hero Section */}
2532
<div className="flex flex-col md:flex-row gap-6 md:gap-10 mt-10">
2633
{/* Left Column with Heading and Buttons */}
27-
<div className="flex-1 order-2 md:order-1">
34+
<motion.div
35+
className="flex-1 order-2 md:order-1"
36+
variants={slideInLeft}
37+
initial="hidden"
38+
whileInView="visible"
39+
viewport={{ once: true, amount: 0.5 }}
40+
>
2841
<h1 className="text-3xl sm:text-4xl font-bold mb-4 sm:mb-6">
2942
Make a Lasting <span className="text-orange-500">Impact</span> in
3043
Education
@@ -37,34 +50,51 @@ const Donate: React.FC = () => {
3750
from around the world.
3851
</p>
3952

40-
<div className="flex flex-wrap gap-4 mb-6 sm:mb-8">
53+
<motion.div
54+
className="flex flex-wrap gap-4 mb-6 sm:mb-8"
55+
variants={buttonAnimation}
56+
whileHover="hover"
57+
whileTap="tap"
58+
>
4159
<a href={donationData.url} target="_blank" rel="noreferrer">
4260
<button className="bg-green-600 hover:bg-green-700 transition-colors text-white px-6 sm:px-8 py-2 sm:py-3 rounded-full font-medium shadow-md">
4361
Donate Now
4462
</button>
4563
</a>
46-
</div>
64+
</motion.div>
4765

4866
<div className="bg-gray-100 p-4 rounded-lg border-l-4 border-blue-500 shadow-sm text-xs sm:text-sm">
4967
<p className="text-gray-600">
5068
Your donation is tax-deductible in the United States as Sugar
5169
Labs is a registered 501(c)(3) nonprofit organization.
5270
</p>
5371
</div>
54-
</div>
72+
</motion.div>
5573

5674
{/* Right Column with Image */}
57-
<div className="flex-1 order-1 md:order-2 mb-6 md:mb-0">
75+
<motion.div
76+
className="flex-1 order-1 md:order-2 mb-6 md:mb-0"
77+
variants={slideInRight}
78+
initial="hidden"
79+
whileInView="visible"
80+
viewport={{ once: true, amount: 0.5 }}
81+
>
5882
<img
5983
src={Img[0]}
6084
alt="Children asking for donations"
6185
className="w-full rounded-lg shadow-lg object-cover h-64 sm:h-full"
6286
/>
63-
</div>
87+
</motion.div>
6488
</div>
6589

6690
{/* Impact Statement Section */}
67-
<div className="my-10 sm:my-16 bg-gradient-to-r from-blue-50 to-green-50 p-5 sm:p-8 rounded-xl shadow-sm">
91+
<motion.div
92+
className="my-10 sm:my-16 bg-gradient-to-r from-blue-50 to-green-50 p-5 sm:p-8 rounded-xl shadow-sm"
93+
variants={slideInBottom}
94+
initial="hidden"
95+
whileInView="visible"
96+
viewport={{ once: true, amount: 0.5 }}
97+
>
6898
<h2 className="text-2xl sm:text-3xl font-bold mb-4 sm:mb-6 text-center">
6999
Your Donation Directly Assists Our Mission
70100
</h2>
@@ -89,10 +119,16 @@ const Donate: React.FC = () => {
89119
to succeed.
90120
</p>
91121
</div>
92-
</div>
122+
</motion.div>
93123

94124
{/* Why Your Support Matters */}
95-
<div className="my-10 sm:my-16">
125+
<motion.div
126+
className="my-10 sm:my-16"
127+
variants={slideInBottom}
128+
initial="hidden"
129+
whileInView="visible"
130+
viewport={{ once: true, amount: 0.5 }}
131+
>
96132
<h2 className="text-2xl sm:text-3xl font-bold mb-6 sm:mb-8 text-center">
97133
How Your Donation Makes a Difference
98134
</h2>
@@ -115,10 +151,16 @@ const Donate: React.FC = () => {
115151
</div>
116152
))}
117153
</div>
118-
</div>
154+
</motion.div>
119155

120156
{/* Mission Statement */}
121-
<div className="my-10 sm:my-16">
157+
<motion.div
158+
className="my-10 sm:my-16"
159+
variants={slideInBottom}
160+
initial="hidden"
161+
whileInView="visible"
162+
viewport={{ once: true, amount: 0.5 }}
163+
>
122164
<div className="bg-gray-50 p-5 sm:p-6 rounded-lg shadow-sm border border-gray-100">
123165
<h2 className="text-xl sm:text-2xl font-semibold mb-3 sm:mb-4 text-gray-800">
124166
Our Mission
@@ -147,10 +189,17 @@ const Donate: React.FC = () => {
147189
</a>
148190
</div>
149191
</div>
150-
</div>
192+
</motion.div>
151193

152194
{/* Financial Transparency Section */}
153-
<div className="my-10 sm:my-16" id="financial-transparency">
195+
<motion.div
196+
className="my-10 sm:my-16"
197+
id="financial-transparency"
198+
variants={slideInBottom}
199+
initial="hidden"
200+
whileInView="visible"
201+
viewport={{ once: true, amount: 0.5 }}
202+
>
154203
<h2 className="text-2xl sm:text-3xl font-bold mb-6 sm:mb-8 text-center">
155204
Financial Transparency
156205
</h2>
@@ -213,12 +262,16 @@ const Donate: React.FC = () => {
213262
</p>
214263
</div>
215264
</div>
216-
</div>
265+
</motion.div>
217266

218267
{/* Donation Section */}
219-
<div
268+
<motion.div
220269
className="my-10 sm:my-16 bg-green-50 p-5 sm:p-8 rounded-xl shadow-sm"
221270
id="donate-section"
271+
variants={slideInBottom}
272+
initial="hidden"
273+
whileInView="visible"
274+
viewport={{ once: true, amount: 0.5 }}
222275
>
223276
<h2 className="text-2xl sm:text-3xl font-bold mb-4 sm:mb-6 text-center">
224277
Support Our Mission Today
@@ -243,7 +296,7 @@ const Donate: React.FC = () => {
243296
</button>
244297
</a>
245298
</div>
246-
</div>
299+
</motion.div>
247300
</div>
248301
<Footer />
249302
</>

‎src/pages/JoinDevelopment.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import Footer from '@/sections/Footer';
33
import { DeveloperTestimonials } from '@/components/DeveloperTestimonials';
44
import DeveloperLinks from '@/components/DeveloperLinks';
55
import JoinToggle from '@/components/JoinToggle';
6+
import { motion } from 'framer-motion';
7+
import { slideInBottom } from '@/styles/Animations';
68

79
const JoinDevelopment = () => {
810
return (
@@ -12,7 +14,13 @@ const JoinDevelopment = () => {
1214
<JoinToggle />
1315

1416
{/* Getting Involved Section */}
15-
<div className="mt-20 max-w-4xl flex flex-col items-center text-center px-6">
17+
<motion.div
18+
className="mt-20 max-w-4xl flex flex-col items-center text-center px-6"
19+
variants={slideInBottom}
20+
initial="hidden"
21+
whileInView="visible"
22+
viewport={{ once: true, amount: 0.5 }}
23+
>
1624
<h2 className="text-5xl font-bold font-[Caveat]">
1725
Before Beginning to Contribute
1826
</h2>
@@ -26,12 +34,18 @@ const JoinDevelopment = () => {
2634
how to reach us, but it also has information on our philosophy and a
2735
link to our Code of Conduct.
2836
</p>
29-
</div>
37+
</motion.div>
3038

3139
<DeveloperTestimonials />
3240

3341
{/* Important Links */}
34-
<div className="mt-20 max-w-4xl flex flex-col items-center text-center px-6">
42+
<motion.div
43+
className="mt-20 max-w-4xl flex flex-col items-center text-center px-6"
44+
variants={slideInBottom}
45+
initial="hidden"
46+
whileInView="visible"
47+
viewport={{ once: true, amount: 0.5 }}
48+
>
3549
<h2 className="text-5xl font-bold font-[Caveat]">
3650
Important Links for Developers
3751
</h2>
@@ -41,7 +55,7 @@ const JoinDevelopment = () => {
4155
List of important links for people interested in making development
4256
contributions to Sugar Labs:
4357
</p>
44-
</div>
58+
</motion.div>
4559

4660
<DeveloperLinks />
4761
</main>

‎src/pages/Products.tsx‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
import { motion } from 'framer-motion';
2+
import {
3+
fadeInUpAnimation,
4+
zoomInAnimation,
5+
staggerContainer,
6+
} from '@/styles/Animations.ts';
17
import Header from '@/sections/Header';
28
import Footer from '@/sections/Footer';
39
import Product from '@/components/Product';
@@ -7,13 +13,23 @@ const ProductsPage = () => {
713
<div>
814
<Header />
915
<main className="container mx-auto px-4 sm:px-6 md:px-8 py-6">
10-
{/* Responsive Heading */}
11-
<h2 className="text-6xl sm:text-7xl md:text-8xl lg:text-9xl font-extralight text-center mb-6 font-[Oswald] tracking-wide py-8">
12-
<span className="text-black">OUR</span>{' '}
13-
<span className="text-orange-500">PRODUCTS</span>
14-
</h2>
15-
16-
<Product />
16+
{/* Parent container to control animation sequence */}
17+
<motion.div
18+
variants={staggerContainer}
19+
initial="initial"
20+
animate="animate"
21+
>
22+
<motion.h2
23+
className="text-6xl sm:text-7xl md:text-8xl lg:text-9xl font-extralight text-center mb-6 font-[Oswald] tracking-wide py-8"
24+
variants={fadeInUpAnimation}
25+
>
26+
<span className="text-black">OUR</span>{' '}
27+
<span className="text-orange-500">PRODUCTS</span>
28+
</motion.h2>
29+
<motion.div variants={zoomInAnimation}>
30+
<Product />
31+
</motion.div>
32+
</motion.div>
1733
</main>
1834
<Footer />
1935
</div>

‎src/pages/TryNow/MusicBlocks.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,41 +24,41 @@ const MusicBlocksPage = () => {
2424
<div className="relative">
2525
{/* Floating SVGs */}
2626
<motion.div
27-
className="absolute top-25 left-5 sm:left-128"
27+
className="absolute top-[10vh] left-[5vw] sm:left-[30vw] z-[-1] pointer-events-none"
2828
variants={fadeInUpAnimation}
2929
initial="initial"
3030
animate="animate"
3131
>
3232
<img
3333
src="assets/FloatingSVGs/music-block-1.svg"
3434
alt="Music Block 1"
35-
className="w-30 sm:w-40"
35+
className="w-[clamp(100px,10vw,180px)]"
3636
/>
3737
</motion.div>
3838

3939
<motion.div
40-
className="absolute top-95 right-10 sm:right-150"
40+
className="absolute top-[65vh] right-[5vw] sm:right-[50vw] z-[-1] pointer-events-none"
4141
variants={fadeInUpAnimation}
4242
initial="initial"
4343
animate="animate"
4444
>
4545
<img
4646
src="assets/FloatingSVGs/music-block-2.svg"
4747
alt="Music Block 2"
48-
className="w-12 sm:w-35"
48+
className="w-[clamp(80px,9vw,160px)]"
4949
/>
5050
</motion.div>
5151

5252
<motion.div
53-
className="absolute top-16 rigth-16 sm:right-23"
53+
className="absolute top-[10vh] right-[10vw] sm:right-[15vw] z-[-1] pointer-events-none"
5454
variants={fadeInUpAnimation}
5555
initial="initial"
5656
animate="animate"
5757
>
5858
<img
59-
src="/assets/FloatingSVGs/music-block-3.svg"
59+
src="assets/FloatingSVGs/music-block-3.svg"
6060
alt="Music Block 3"
61-
className="w-18 sm:w-28"
61+
className="w-[clamp(90px,10vw,170px)]"
6262
/>
6363
</motion.div>
6464

‎src/pages/TryNow/Sugarizer.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,15 @@ const SugarizerPage = () => {
1919

2020
{/* Floating SVGs */}
2121
<motion.div
22-
className="absolute top-35 left-5 sm:left-110"
22+
className="absolute top-[28vh] left-[5vw] sm:left-[30vw] z-[-1] pointer-events-none"
2323
variants={fadeInUpAnimation}
2424
initial="initial"
2525
animate="animate"
2626
>
2727
<img
2828
src="assets/FloatingSVGs/sugarizer-1.svg"
29-
alt="Turtle Blocks 1"
30-
className="w-30 sm:w-40"
29+
alt="Sugarizer 1"
30+
className="w-[clamp(100px,10vw,180px)]"
3131
/>
3232
</motion.div>
3333

0 commit comments

Comments
 (0)