Skip to content

Commit 136c582

Browse files
codeunia-devcodeunia-dev
authored
Merge pull request #33 from codeunia-dev/form/mentor
add mentor page
2 parents 0b877c5 + 2e4b281 commit 136c582

File tree

2 files changed

+685
-0
lines changed

2 files changed

+685
-0
lines changed

‎app/join/mentor/page.tsx‎

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
"use client";
2+
3+
import Footer from "@/components/footer";
4+
import Header from "@/components/header";
5+
import { MentorForm } from "@/components/forms/mentor-form";
6+
import { cn } from "@/lib/utils";
7+
import { motion } from "framer-motion";
8+
import { Sparkles, Users, Star, Heart, GraduationCap } from "lucide-react";
9+
10+
export default function MentorPage() {
11+
const benefits = [
12+
{
13+
icon: Heart,
14+
title: "Make a Difference",
15+
description: "Guide and inspire the next generation of developers by sharing your knowledge and experience.",
16+
color: "text-blue-500",
17+
},
18+
{
19+
icon: Star,
20+
title: "Build Your Legacy",
21+
description: "Create a lasting impact on the developer community and establish yourself as a thought leader.",
22+
color: "text-green-500",
23+
},
24+
{
25+
icon: Users,
26+
title: "Expand Your Network",
27+
description: "Connect with passionate learners and other mentors from diverse backgrounds and expertise.",
28+
color: "text-purple-500",
29+
},
30+
{
31+
icon: GraduationCap,
32+
title: "Continuous Learning",
33+
description: "Stay updated with the latest technologies while teaching and learning from your mentees.",
34+
color: "text-orange-500",
35+
},
36+
];
37+
38+
const containerVariants = {
39+
hidden: { opacity: 0 },
40+
visible: {
41+
opacity: 1,
42+
transition: {
43+
staggerChildren: 0.1,
44+
delayChildren: 0.3,
45+
},
46+
},
47+
};
48+
49+
const itemVariants = {
50+
hidden: { opacity: 0, y: 20 },
51+
visible: {
52+
opacity: 1,
53+
y: 0,
54+
transition: { duration: 0.5 },
55+
},
56+
};
57+
58+
return (
59+
<div className="flex flex-col overflow-hidden">
60+
<Header />
61+
62+
{/* hero section */}
63+
<section className="py-20 md:py-32 relative overflow-hidden">
64+
<div
65+
className={cn(
66+
"absolute inset-0",
67+
"[background-size:20px_20px]",
68+
"[background-image:linear-gradient(to_right,rgba(99,102,241,0.8)_1px,transparent_1px),linear-gradient(to_bottom,rgba(99,102,241,0.8)_1px,transparent_1px)]",
69+
"dark:[background-image:linear-gradient(to_right,rgba(139,92,246,0.8)_1px,transparent_1px),linear-gradient(to_bottom,rgba(139,92,246,0.8)_1px,transparent_1px)]"
70+
)}
71+
/>
72+
<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-background [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
73+
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-background to-purple-500/5 animate-gradient"></div>
74+
<div className="absolute inset-0">
75+
<div className="absolute top-20 left-10 w-72 h-72 bg-primary/10 rounded-full blur-3xl animate-pulse-slow"></div>
76+
<div
77+
className="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-pulse-slow"
78+
style={{ animationDelay: "2s" }}
79+
></div>
80+
</div>
81+
82+
<motion.div
83+
initial={{ opacity: 0, y: 20 }}
84+
animate={{ opacity: 1, y: 0 }}
85+
transition={{ duration: 0.5 }}
86+
className="container px-4 mx-auto relative z-10"
87+
>
88+
<div className="max-w-4xl mx-auto text-center space-y-8">
89+
<motion.div
90+
initial={{ scale: 0.9 }}
91+
animate={{ scale: 1 }}
92+
transition={{ duration: 0.3 }}
93+
>
94+
<div className="flex flex-col items-center justify-center gap-4">
95+
<button className="bg-slate-800 no-underline group relative shadow-2xl shadow-zinc-900 rounded-full p-px text-sm font-semibold leading-6 text-white inline-block cursor-default">
96+
<span className="absolute inset-0 overflow-hidden rounded-full">
97+
<span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
98+
</span>
99+
<div className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10">
100+
<span>Mentor Registration</span>
101+
<span>
102+
<Sparkles className="w-3 h-3" />
103+
</span>
104+
</div>
105+
<span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40" />
106+
</button>
107+
</div>
108+
</motion.div>
109+
<motion.h1
110+
initial={{ opacity: 0, y: 20 }}
111+
animate={{ opacity: 1, y: 0 }}
112+
transition={{ duration: 0.5, delay: 0.2 }}
113+
className="text-5xl md:text-6xl font-bold tracking-tight leading-tight"
114+
>
115+
Become a{" "}
116+
<motion.span
117+
className="gradient-text inline-block"
118+
animate={{
119+
backgroundPosition: [
120+
"0% 50%",
121+
"100% 50%",
122+
"0% 50%",
123+
],
124+
}}
125+
transition={{
126+
duration: 4,
127+
repeat: Infinity,
128+
ease: "linear",
129+
}}
130+
>
131+
Codeunia Mentor
132+
</motion.span>
133+
</motion.h1>
134+
<motion.p
135+
initial={{ opacity: 0, y: 20 }}
136+
animate={{ opacity: 1, y: 0 }}
137+
transition={{ duration: 0.5, delay: 0.4 }}
138+
className="text-xl text-muted-foreground max-w-2xl mx-auto"
139+
>
140+
Share your expertise and guide the next generation of developers. Your knowledge can transform careers and shape the future of tech.
141+
</motion.p>
142+
</div>
143+
</motion.div>
144+
</section>
145+
146+
{/* benefits section */}
147+
<section className="py-16 bg-muted/30">
148+
<div className="container px-4 mx-auto">
149+
<motion.div
150+
initial={{ opacity: 0, y: 20 }}
151+
whileInView={{ opacity: 1, y: 0 }}
152+
viewport={{ once: true }}
153+
transition={{ duration: 0.5 }}
154+
className="text-center mb-12"
155+
>
156+
<h2 className="text-3xl md:text-4xl font-bold mb-4">
157+
Why Become a Mentor?
158+
</h2>
159+
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
160+
Discover the rewards of mentoring and the positive impact you can make on aspiring developers.
161+
</p>
162+
</motion.div>
163+
164+
<motion.div
165+
variants={containerVariants}
166+
initial="hidden"
167+
whileInView="visible"
168+
viewport={{ once: true }}
169+
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
170+
>
171+
{benefits.map((benefit, index) => (
172+
<motion.div
173+
key={index}
174+
variants={itemVariants}
175+
className="text-center group"
176+
>
177+
<div className="flex flex-col items-center space-y-4 p-6 rounded-xl bg-background/60 backdrop-blur-xl hover:bg-background/80 transition-all duration-300 group-hover:shadow-lg">
178+
<div className={`p-3 rounded-full bg-muted group-hover:scale-110 transition-transform duration-300 ${benefit.color}`}>
179+
<benefit.icon className="h-6 w-6" />
180+
</div>
181+
<div>
182+
<h3 className="text-lg font-semibold mb-2">{benefit.title}</h3>
183+
<p className="text-sm text-muted-foreground leading-relaxed">{benefit.description}</p>
184+
</div>
185+
</div>
186+
</motion.div>
187+
))}
188+
</motion.div>
189+
</div>
190+
</section>
191+
192+
{/* form section */}
193+
<section className="py-20">
194+
<div className="container px-4 mx-auto">
195+
<div className="max-w-4xl mx-auto">
196+
<motion.div
197+
initial={{ opacity: 0, y: 20 }}
198+
whileInView={{ opacity: 1, y: 0 }}
199+
viewport={{ once: true }}
200+
transition={{ duration: 0.5 }}
201+
className="text-center mb-12"
202+
>
203+
<h2 className="text-3xl md:text-4xl font-bold mb-4">
204+
Ready to Inspire the Next Generation?
205+
</h2>
206+
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
207+
Fill out the form below to join our mentor community. We&apos;ll review your application and get back to you within 48 hours.
208+
</p>
209+
</motion.div>
210+
211+
<MentorForm />
212+
</div>
213+
</div>
214+
</section>
215+
216+
<Footer />
217+
</div>
218+
);
219+
}
220+

0 commit comments

Comments
 (0)