Skip to content

Commit 05d2bce

Browse files
Sagar4276Sagar4276
authored
About us page designed (#17)
* About us page designed * fixed linting * removed next module * modified node modules
1 parent 84811dd commit 05d2bce

21 files changed

+2261
-237
lines changed

‎package-lock.json‎

Lines changed: 227 additions & 227 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/assets/Images/GSOC.png‎

3.03 KB
Loading

‎public/assets/Images/SOAS.jpeg‎

5.48 KB
Loading

‎src/components/AboutUs/GoalsSection.tsx‎

Lines changed: 254 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,254 @@
1+
import { motion } from 'framer-motion';
2+
import SectionContainer from '@/components/shared/SectionContainer';
3+
import SectionTitle from '@/components/shared/SectionTitle';
4+
import {
5+
goals,
6+
progressItems,
7+
sectionContent,
8+
} from '@/constants/aboutUs/goals';
9+
import {
10+
slideInLeft,
11+
subtleRise,
12+
statCard,
13+
staggerContainer,
14+
container,
15+
statGrid,
16+
} from '@/styles/Animations';
17+
import { useMemo, FC } from 'react';
18+
19+
interface GoalStat {
20+
total: number;
21+
completed: number;
22+
inProgress: number;
23+
percentComplete: number;
24+
}
25+
26+
const GoalsSection: FC = () => {
27+
const renderProgressBars = (items) => {
28+
return items.map((item, index) => (
29+
<motion.div
30+
key={index}
31+
className="mb-6"
32+
custom={index}
33+
viewport={{ once: true }}
34+
>
35+
<div className="flex justify-between mb-1">
36+
<span className="text-sm font-medium text-gray-700">
37+
{item.label}
38+
</span>
39+
<span className="text-sm font-medium text-gray-700">
40+
{item.percent}%
41+
</span>
42+
</div>
43+
<div className="w-full bg-gray-200 rounded-full h-2.5">
44+
<motion.div
45+
className={`h-2.5 rounded-full bg-gradient-to-r ${item.color}`}
46+
initial={{ width: 0 }}
47+
whileInView={{ width: `${item.percent}%` }}
48+
viewport={{ once: true }}
49+
transition={{ duration: 1, delay: index * 0.2 }}
50+
></motion.div>
51+
</div>
52+
</motion.div>
53+
));
54+
};
55+
56+
// Memoize the goal stats for performance
57+
const goalStats: GoalStat = useMemo(() => {
58+
const totalGoals = goals.length;
59+
const completedGoals = progressItems.filter(
60+
(item) => item.percent >= 75,
61+
).length;
62+
const inProgressGoals = progressItems.filter(
63+
(item) => item.percent >= 25 && item.percent < 75,
64+
).length;
65+
66+
return {
67+
total: totalGoals,
68+
completed: completedGoals,
69+
inProgress: inProgressGoals,
70+
percentComplete: Math.round((completedGoals / totalGoals) * 100),
71+
};
72+
}, []);
73+
74+
return (
75+
<>
76+
<SectionTitle>
77+
{sectionContent.title.main}
78+
<span className="text-red-500">{sectionContent.title.highlight}</span>
79+
</SectionTitle>
80+
<SectionContainer id="goals">
81+
<div className="flex flex-col md:flex-row gap-8 w-full">
82+
<div className="md:w-1/2">
83+
<div className="space-y-6">
84+
<motion.p
85+
className="text-base md:text-lg text-gray-700 leading-relaxed"
86+
variants={subtleRise}
87+
initial="hidden"
88+
whileInView="visible"
89+
viewport={{ once: true }}
90+
>
91+
{sectionContent.introduction}
92+
</motion.p>
93+
94+
{/* Dynamic goals rendering from goals array */}
95+
<motion.div
96+
className="space-y-4"
97+
variants={staggerContainer}
98+
initial="hidden"
99+
whileInView="visible"
100+
viewport={{ once: true }}
101+
>
102+
{goals.map((goal, i) => (
103+
<motion.div
104+
key={i}
105+
className="p-6 border-l-4 border-red-500 bg-white rounded-lg shadow-sm
106+
hover:shadow-lg transition-all duration-300"
107+
variants={slideInLeft}
108+
custom={i}
109+
whileHover={{ x: 10, backgroundColor: '#fef2f2' }}
110+
>
111+
<h4 className="font-bold text-gray-800 text-lg mb-2">
112+
{goal.title}
113+
</h4>
114+
<p className="text-gray-600 leading-relaxed">
115+
{goal.description}
116+
</p>
117+
</motion.div>
118+
))}
119+
</motion.div>
120+
</div>
121+
</div>
122+
123+
<div className="md:w-1/2">
124+
<motion.div
125+
className="rounded-xl p-6 bg-white border-2 border-gray-100 shadow-lg"
126+
variants={subtleRise}
127+
initial="hidden"
128+
whileInView="visible"
129+
viewport={{ once: true }}
130+
>
131+
{/* Progress Overview */}
132+
<div className="mb-8">
133+
<h3 className="text-xl font-bold text-gray-800 mb-4">
134+
{sectionContent.progressTitle}
135+
</h3>
136+
137+
{/* Progress summary stats */}
138+
<motion.div
139+
className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"
140+
variants={statGrid}
141+
initial="hidden"
142+
whileInView="visible"
143+
viewport={{ once: true }}
144+
>
145+
<motion.div
146+
className="bg-red-50 p-4 rounded-lg text-center"
147+
variants={statCard}
148+
whileHover="hover"
149+
>
150+
<p className="text-3xl font-bold text-red-500">
151+
{goalStats.total}
152+
</p>
153+
<p className="text-sm text-gray-600">Total Goals</p>
154+
</motion.div>
155+
156+
<motion.div
157+
className="bg-green-50 p-4 rounded-lg text-center"
158+
variants={statCard}
159+
whileHover="hover"
160+
>
161+
<p className="text-3xl font-bold text-green-500">
162+
{goalStats.completed}
163+
</p>
164+
<p className="text-sm text-gray-600">Completed</p>
165+
</motion.div>
166+
167+
<motion.div
168+
className="bg-yellow-50 p-4 rounded-lg text-center"
169+
variants={statCard}
170+
whileHover="hover"
171+
>
172+
<p className="text-3xl font-bold text-yellow-500">
173+
{goalStats.inProgress}
174+
</p>
175+
<p className="text-sm text-gray-600">In Progress</p>
176+
</motion.div>
177+
178+
<motion.div
179+
className="bg-blue-50 p-4 rounded-lg text-center"
180+
variants={statCard}
181+
whileHover="hover"
182+
>
183+
<p className="text-3xl font-bold text-blue-500">
184+
{goalStats.percentComplete}%
185+
</p>
186+
<p className="text-sm text-gray-600">Overall Progress</p>
187+
</motion.div>
188+
</motion.div>
189+
190+
{/* Overall progress bar */}
191+
<div className="mb-8">
192+
<div className="flex justify-between mb-1">
193+
<span className="text-sm font-medium text-gray-700">
194+
Overall Completion
195+
</span>
196+
<span className="text-sm font-medium text-gray-700">
197+
{goalStats.percentComplete}%
198+
</span>
199+
</div>
200+
<div className="w-full bg-gray-200 rounded-full h-4">
201+
<motion.div
202+
className="h-4 rounded-full bg-gradient-to-r from-red-400 to-red-600"
203+
initial={{ width: 0 }}
204+
whileInView={{ width: `${goalStats.percentComplete}%` }}
205+
viewport={{ once: true }}
206+
transition={{ duration: 1.5 }}
207+
></motion.div>
208+
</div>
209+
</div>
210+
</div>
211+
212+
{/* Individual progress bars */}
213+
<motion.div
214+
className="mt-6"
215+
variants={container}
216+
initial="hidden"
217+
whileInView="visible"
218+
viewport={{ once: true }}
219+
>
220+
<h4 className="font-bold text-gray-800 text-lg mb-4">
221+
Individual Progress
222+
</h4>
223+
{renderProgressBars(progressItems)}
224+
</motion.div>
225+
226+
{/* Goal insights */}
227+
<motion.div
228+
className="mt-8 p-5 border border-gray-200 rounded-lg bg-gray-50"
229+
variants={subtleRise}
230+
initial="hidden"
231+
whileInView="visible"
232+
viewport={{ once: true }}
233+
transition={{ delay: 0.6 }}
234+
>
235+
<h5 className="font-bold text-gray-700 mb-2">
236+
{sectionContent.insightsTitle || 'Progress Insights'}
237+
</h5>
238+
<p className="text-sm text-gray-600">
239+
Our goals are on track with {goalStats.percentComplete}%
240+
overall completion. We've fully achieved {goalStats.completed}{' '}
241+
goals, with {goalStats.inProgress} more in progress. We
242+
continue to work towards our mission with steady progress
243+
across all initiatives.
244+
</p>
245+
</motion.div>
246+
</motion.div>
247+
</div>
248+
</div>
249+
</SectionContainer>
250+
</>
251+
);
252+
};
253+
254+
export default GoalsSection;

‎src/components/AboutUs/HeroSection.tsx‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import { motion } from 'framer-motion';
2+
import { heroAnimations } from '@/styles/Animations';
3+
4+
const HeroSection = () => {
5+
const title = 'ABOUT US'.split('');
6+
7+
return (
8+
<motion.div
9+
className="relative min-h-[60vh] flex flex-col items-center justify-center text-center px-4 overflow-hidden"
10+
variants={heroAnimations.container}
11+
initial="hidden"
12+
animate="visible"
13+
>
14+
{/* Decorative background elements */}
15+
<motion.div
16+
className="absolute top-20 left-10 w-20 h-20 rounded-full bg-red-100 blur-xl"
17+
variants={heroAnimations.decoration}
18+
initial="hidden"
19+
animate="visible"
20+
transition={{ delay: 0.2 }}
21+
/>
22+
<motion.div
23+
className="absolute bottom-20 right-10 w-32 h-32 rounded-full bg-orange-100 blur-xl"
24+
variants={heroAnimations.decoration}
25+
initial="hidden"
26+
animate="visible"
27+
transition={{ delay: 0.4 }}
28+
/>
29+
30+
{/* Main title with animated letters */}
31+
<motion.h1 className="text-6xl md:text-8xl font-bold mb-6 tracking-tight relative inline-block font-Caveat">
32+
<div className="flex justify-center items-center relative">
33+
{title.map((letter, index) => (
34+
<motion.span
35+
key={index}
36+
variants={heroAnimations.letterAnimation}
37+
initial="hidden"
38+
animate="visible"
39+
transition={{
40+
delay: index * 0.1,
41+
duration: 0.6,
42+
ease: 'easeOut',
43+
}}
44+
className={index >= title.length - 2 ? 'text-red-500' : ''}
45+
>
46+
{letter === ' ' ? '\u00A0' : letter}
47+
</motion.span>
48+
))}
49+
50+
{/* Animated underline */}
51+
<motion.div
52+
className="absolute -z-10 h-5 bottom-2 left-0 transform -skew-x-6"
53+
variants={heroAnimations.underline}
54+
initial="hidden"
55+
animate="visible"
56+
/>
57+
</div>
58+
</motion.h1>
59+
60+
{/* Subtitle with animated reveal */}
61+
<motion.h2
62+
className="text-3xl md:text-4xl mb-12 max-w-3xl mx-auto leading-relaxed font-Caveat relative"
63+
variants={heroAnimations.subtitle}
64+
initial="hidden"
65+
animate="visible"
66+
>
67+
<motion.span
68+
className="relative inline-block"
69+
variants={heroAnimations.hoverText}
70+
whileHover="hover"
71+
>
72+
A<span className="text-red-500"> Community</span>
73+
</motion.span>{' '}
74+
of{' '}
75+
<motion.span
76+
className="relative inline-block"
77+
variants={heroAnimations.hoverText}
78+
whileHover="hover"
79+
>
80+
<span className="text-red-500">Open Source</span>
81+
</motion.span>{' '}
82+
Enthusiasts
83+
</motion.h2>
84+
85+
{/* Animated decorative circles */}
86+
<div className="absolute w-full h-full pointer-events-none">
87+
{[...Array(6)].map((_, i) => (
88+
<motion.div
89+
key={i}
90+
className="absolute w-4 h-4 rounded-full bg-red-500/10"
91+
style={{
92+
x: Math.random() * window.innerWidth,
93+
y: Math.random() * window.innerHeight,
94+
}}
95+
variants={heroAnimations.floatingCircle}
96+
animate="visible"
97+
custom={i}
98+
/>
99+
))}
100+
</div>
101+
102+
{/* Interactive mouse-follow effect */}
103+
<motion.div
104+
className="absolute w-96 h-96 bg-red-100 rounded-full blur-3xl opacity-20"
105+
variants={heroAnimations.mouseFollow}
106+
initial="hidden"
107+
animate="visible"
108+
whileHover="hover"
109+
style={{
110+
mixBlendMode: 'multiply',
111+
}}
112+
/>
113+
</motion.div>
114+
);
115+
};
116+
117+
export default HeroSection;

0 commit comments

Comments
 (0)