Skip to content

Commit 00a2ef7

Browse files
nitinmohan18nitinmohan18
authored
refactor: improve footer UI and creator section
1 parent 3360e03 commit 00a2ef7

2 files changed

Lines changed: 175 additions & 210 deletions

File tree

‎app/(public)/creators/page.tsx‎

Lines changed: 55 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -30,38 +30,38 @@ const teamMembers = [
3030
email: "mailto:singhshivraj89969@gmail.com",
3131
},
3232
icon: Code2,
33-
isFounder: true,
33+
badge: "Founder",
3434
},
3535
{
3636
id: "nitin",
37-
name: "Nitin Pandey",
38-
role: "UI/UX Designer & Frontend Developer",
37+
name: "Nitin Mohan",
38+
role: "Co-Founder, UI/UX Designer & Full Stack Developer",
3939
bio: "Designs intuitive user interfaces and improves the overall user experience of Hyper Learning.",
4040
image: "https://avatars.githubusercontent.com/u/272735419?v=4",
4141
socials: {
4242
github: "https://github.com/nitinmohan18",
4343
linkedin: "https://linkedin.com/in/nitin-mohan-9251ab328",
4444
instagram: "https://www.instagram.com/nitin__.pandey/",
45+
twitter: "https://x.com/nitinmohan18",
4546
portfolio: "https://nitinpandey-portfolio.vercel.app/",
4647
email: "mailto:mohannitin494@gmail.com",
4748
},
4849
icon: Palette,
49-
isFounder: false,
50+
badge: "Co-Founder",
5051
},
5152
{
5253
id: "ramoo",
5354
name: "Ramoo Kachhee",
54-
role: "Frontend Developer",
55-
bio: "Builds responsive user interfaces and implements frontend components for Hyper Learning.",
55+
role: "Content Contributor",
56+
bio: "Actively contributes to Hyper Learning by curating and uploading essential study materials, including PYQs, syllabuses, and question papers.",
5657
image: "https://avatars.githubusercontent.com/u/231412959?v=4",
5758
socials: {
5859
github: "https://github.com/RamuuXfree",
5960
linkedin: "https://www.linkedin.com/in/ramoo-kachhee-9b1616405/",
6061
instagram: "https://www.instagram.com/frrr_ace/",
6162
email: "mailto:ramoo@hyperlearning.tech",
6263
},
63-
icon: Code2,
64-
isFounder: false,
64+
icon: GraduationCap,
6565
},
6666
];
6767

@@ -94,31 +94,31 @@ export default function TeamPage() {
9494
{/* Hero */}
9595
<section className="relative overflow-hidden border-b border-border">
9696
<div className="absolute inset-0 -z-10">
97-
<div className="absolute left-[-10%] top-[-10%] h-[500px] w-[500px] rounded-full bg-blue-500/10 blur-[120px]" />
98-
<div className="absolute right-[-10%] bottom-[-10%] h-[500px] w-[500px] rounded-full bg-indigo-500/10 blur-[120px]" />
97+
<div className="absolute left-[-10%] top-[-10%] h-[400px] w-[400px] rounded-full bg-blue-500/10 blur-[120px]" />
98+
<div className="absolute right-[-10%] bottom-[-10%] h-[400px] w-[400px] rounded-full bg-indigo-500/10 blur-[120px]" />
9999
</div>
100100

101-
<div className="mx-auto max-w-7xl px-6 py-20 lg:px-8">
101+
<div className="mx-auto max-w-7xl px-6 py-12 lg:px-8 lg:py-16">
102102
<motion.div
103103
initial={{ opacity: 0, y: 24 }}
104104
animate={{ opacity: 1, y: 0 }}
105105
transition={{ duration: 0.5 }}
106106
className="max-w-4xl"
107107
>
108-
<span className="inline-flex items-center gap-2 rounded-full border border-blue-500/20 bg-blue-500/10 px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400">
108+
<span className="inline-flex items-center gap-2 rounded-full border border-blue-500/20 bg-blue-500/10 px-3 py-1.5 text-xs font-medium text-blue-600 dark:text-blue-400">
109109
<Users className="h-4 w-4" />
110110
Meet the Team
111111
</span>
112112

113-
<h1 className="mt-6 text-4xl font-extrabold tracking-tight text-foreground md:text-6xl">
113+
<h1 className="mt-4 text-4xl font-extrabold tracking-tight text-foreground md:text-5xl lg:text-6xl">
114114
The People Behind
115115
<br />
116116
<span className="bg-gradient-to-r from-[#1D4ED8] to-indigo-600 bg-clip-text text-transparent">
117117
Hyper Learning
118118
</span>
119119
</h1>
120120

121-
<p className="mt-6 max-w-2xl text-lg leading-relaxed text-muted-foreground">
121+
<p className="mt-4 max-w-2xl text-base leading-relaxed text-muted-foreground lg:text-lg">
122122
A small team of dedicated individuals working together to make
123123
engineering education more accessible and effective through
124124
AI-powered learning.
@@ -128,14 +128,14 @@ export default function TeamPage() {
128128
</section>
129129

130130
{/* Team Grid */}
131-
<section className="py-20">
131+
<section className="py-8 lg:py-12">
132132
<div className="mx-auto max-w-7xl px-6 lg:px-8">
133133
<motion.div
134134
variants={containerVariants}
135135
initial="hidden"
136136
whileInView="visible"
137137
viewport={{ once: true }}
138-
className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
138+
className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"
139139
>
140140
{teamMembers.map((member) => {
141141
const Icon = member.icon;
@@ -144,42 +144,48 @@ export default function TeamPage() {
144144
<motion.div
145145
key={member.id}
146146
variants={itemVariants}
147-
className={`group relative overflow-hidden rounded-3xl border border-border bg-card/50 p-8 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-blue-500/30 hover:shadow-xl ${
148-
member.isFounder ? "ring-1 ring-blue-500/20" : ""
149-
}`}
147+
className="group relative flex flex-col overflow-hidden rounded-3xl border border-white/10 bg-[#060b19]/80 p-5 backdrop-blur-xl transition-all duration-500 hover:-translate-y-1.5 hover:border-blue-500/40 hover:shadow-[0_0_30px_-5px_rgba(37,99,235,0.15)] lg:p-6"
150148
>
151-
{/* Founder Badge */}
152-
{member.isFounder && (
153-
<div className="absolute right-4 top-4 z-10 rounded-full bg-blue-500/10 px-3 py-1 text-xs font-semibold text-blue-600 dark:text-blue-400">
154-
Founder
149+
{/* Subtle top edge highlight */}
150+
<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
151+
152+
{/* Top-Right Surface Glow Orb */}
153+
<div className="absolute -right-12 -top-12 z-0 h-48 w-48 rounded-full bg-blue-500/10 blur-3xl opacity-0 transition-opacity duration-700 group-hover:opacity-100" />
154+
155+
{/* Top-Right animated gradient background glow */}
156+
<div className="absolute inset-0 z-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-blue-600/10 via-transparent to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100" />
157+
158+
{/* Premium Badge */}
159+
{member.badge && (
160+
<div className="absolute right-4 top-4 z-20 flex items-center gap-1.5 rounded-full border border-blue-500/30 bg-blue-500/10 px-2.5 py-1 text-[11px] font-semibold text-blue-300 shadow-[0_0_15px_rgba(59,130,246,0.15)] backdrop-blur-md">
161+
<span className="relative flex h-1 w-1">
162+
<span className="relative inline-flex h-1 w-1 rounded-full bg-blue-400 shadow-[0_0_5px_rgba(96,165,250,0.8)]"></span>
163+
</span>
164+
{member.badge}
155165
</div>
156166
)}
157167

158-
{/* Glow */}
159-
<div className="absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
160-
<div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-blue-100/30 blur-3xl dark:bg-blue-500/10" />
161-
</div>
162-
163168
{/* Avatar */}
164-
<div className="relative z-10 mb-6 h-20 w-20 overflow-hidden rounded-2xl">
169+
<div className="relative z-10 mb-5 flex h-14 w-14 items-center justify-center rounded-2xl lg:h-16 lg:w-16">
170+
<div className="absolute inset-0 rounded-2xl border-2 border-white/10" />
165171
<Image
166172
src={member.image}
167173
alt={member.name}
168174
width={80}
169175
height={80}
170-
className="h-full w-full object-cover"
176+
className="relative z-10 h-full w-full rounded-2xl object-cover transition-transform duration-500 group-hover:scale-105"
171177
/>
172178
</div>
173179

174180
{/* Content */}
175181
<div className="relative z-10">
176-
<h3 className="text-xl font-bold text-foreground">
182+
<h3 className="text-[22px] font-bold tracking-tight text-white transition-colors">
177183
{member.name}
178184
</h3>
179-
<p className="mt-1 text-sm font-medium text-blue-600 dark:text-blue-400">
185+
<p className="mt-1.5 text-[13px] font-medium text-blue-400">
180186
{member.role}
181187
</p>
182-
<p className="mt-3 text-sm leading-relaxed text-muted-foreground">
188+
<p className="mt-3 text-[13px] leading-relaxed text-gray-400 transition-colors group-hover:text-gray-300">
183189
{member.bio}
184190
</p>
185191

@@ -190,7 +196,7 @@ export default function TeamPage() {
190196
href={member.socials.github}
191197
target="_blank"
192198
rel="noopener noreferrer"
193-
className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-2 hover:bg-blue-700 hover:text-white hover:shadow-lg"
199+
className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-2 hover:bg-white/10 hover:text-white hover:shadow-lg"
194200
aria-label="GitHub"
195201
>
196202
<FaGithub size={20} />
@@ -202,7 +208,7 @@ export default function TeamPage() {
202208
href={member.socials.linkedin}
203209
target="_blank"
204210
rel="noopener noreferrer"
205-
className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-2 hover:bg-blue-700 hover:text-white hover:shadow-lg"
211+
className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-2 hover:bg-[#0A66C2] hover:text-white hover:shadow-lg hover:shadow-[#0A66C2]/30"
206212
aria-label="LinkedIn"
207213
>
208214
<FaLinkedin size={20} />
@@ -214,7 +220,7 @@ export default function TeamPage() {
214220
href={member.socials.twitter}
215221
target="_blank"
216222
rel="noopener noreferrer"
217-
className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-2 hover:bg-blue-700 hover:text-white hover:shadow-lg"
223+
className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-2 hover:bg-black hover:text-white hover:shadow-lg hover:shadow-white/10"
218224
aria-label="X (Twitter)"
219225
>
220226
<FaTwitter size={20} />
@@ -226,7 +232,7 @@ export default function TeamPage() {
226232
href={member.socials.instagram}
227233
target="_blank"
228234
rel="noopener noreferrer"
229-
className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-2 hover:bg-blue-700 hover:text-white hover:shadow-lg"
235+
className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-2 hover:bg-gradient-to-tr hover:from-[#f09433] hover:via-[#dc2743] hover:to-[#bc1888] hover:text-white hover:shadow-lg hover:shadow-[#E1306C]/30"
230236
aria-label="Instagram"
231237
>
232238
<FaInstagram size={20} />
@@ -238,7 +244,7 @@ export default function TeamPage() {
238244
href={member.socials.portfolio}
239245
target="_blank"
240246
rel="noopener noreferrer"
241-
className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-2 hover:bg-blue-700 hover:text-white hover:shadow-lg"
247+
className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-2 hover:bg-[#10B981] hover:text-white hover:shadow-lg hover:shadow-[#10B981]/30"
242248
aria-label="Portfolio"
243249
>
244250
<Globe className="h-4 w-4" />
@@ -248,7 +254,7 @@ export default function TeamPage() {
248254
{member.socials.email && (
249255
<a
250256
href={member.socials.email}
251-
className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-2 hover:bg-blue-700 hover:text-white hover:shadow-lg"
257+
className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-2 hover:bg-[#EA4335] hover:text-white hover:shadow-lg hover:shadow-[#EA4335]/30"
252258
aria-label="Email"
253259
>
254260
<Mail className="h-4 w-4" />
@@ -267,30 +273,31 @@ export default function TeamPage() {
267273
whileInView={{ opacity: 1, y: 0 }}
268274
transition={{ duration: 0.5, delay: 0.1 }}
269275
viewport={{ once: true }}
270-
className="mt-16 rounded-3xl border border-border bg-card/40 p-8 text-center backdrop-blur-sm md:p-12"
276+
className="mx-auto mt-16 max-w-3xl rounded-[24px] border border-border bg-card/40 p-8 text-center backdrop-blur-sm md:p-12"
271277
>
272-
<h2 className="text-2xl font-bold text-foreground">
278+
<h2 className="text-2xl font-bold tracking-tight text-foreground md:text-3xl">
273279
Want to Join the Team?
274280
</h2>
275-
<p className="mt-3 text-muted-foreground">
281+
<p className="mx-auto mt-3 max-w-xl text-sm leading-relaxed text-muted-foreground">
276282
Hyper Learning is open-source and community-driven. Contributions
277283
are always welcome!
278284
</p>
279-
<div className="mt-6 flex flex-wrap items-center justify-center gap-4">
285+
<div className="mt-8 flex flex-wrap items-center justify-center gap-4 sm:gap-6">
280286
<a
281287
href="https://github.com/imuniqueshiv/HyperLearningTech"
282288
target="_blank"
283289
rel="noopener noreferrer"
284-
className="inline-flex items-center gap-2 rounded-xl bg-[#1D4ED8] px-6 py-3 font-medium text-white transition hover:bg-[#1E40AF]"
290+
className="group/btn relative inline-flex items-center gap-2.5 overflow-hidden rounded-xl bg-blue-600 px-7 py-3 text-sm font-semibold text-white shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:bg-blue-500 hover:shadow-[0_0_15px_rgba(37,99,235,0.3)]"
285291
>
286-
<FaGithub size={20} />
287-
View on GitHub
292+
<div className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-700 group-hover/btn:translate-x-full" />
293+
<FaGithub size={18} className="relative z-10" />
294+
<span className="relative z-10">View on GitHub</span>
288295
</a>
289296
<Link
290297
href="/contact"
291-
className="inline-flex items-center gap-2 rounded-xl border border-border bg-background/50 px-6 py-3 font-medium text-foreground transition hover:border-blue-500/30 hover:bg-blue-500/5"
298+
className="group/link inline-flex items-center gap-2.5 rounded-xl border border-white/10 bg-white/5 px-7 py-3 text-sm font-semibold text-foreground backdrop-blur-md transition-all duration-300 hover:-translate-y-0.5 hover:border-blue-400/50 hover:bg-white/10 hover:shadow-[0_0_20px_rgba(59,130,246,0.15)]"
292299
>
293-
<Mail className="h-4 w-4" />
300+
<Mail className="h-4 w-4 text-blue-400 transition-colors group-hover/link:text-blue-300" />
294301
Contact Us
295302
</Link>
296303
</div>

0 commit comments

Comments
 (0)