Skip to content

Commit debd4f8

Browse files
codeunia-devcodeunia-dev
authored
Merge pull request #30 from codeunia-dev/joincodeunia
Add JoinPage and update header navigation
2 parents 3efc2b7 + fc68134 commit debd4f8

File tree

2 files changed

+328
-0
lines changed

2 files changed

+328
-0
lines changed

‎app/join/page.tsx‎

Lines changed: 327 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,327 @@
1+
"use client";
2+
3+
import Footer from "@/components/footer";
4+
import Header from "@/components/header";
5+
import { Button } from "@/components/ui/button";
6+
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
7+
import { CardSpotlight } from "@/components/ui/card-spotlight";
8+
import { cn } from "@/lib/utils";
9+
import { motion } from "framer-motion";
10+
import {
11+
ArrowRight,
12+
Handshake,
13+
Lightbulb,
14+
Mail,
15+
Sparkles,
16+
Trophy,
17+
Users,
18+
Award,
19+
HandHeart,
20+
} from "lucide-react";
21+
import Link from "next/link";
22+
23+
export default function JoinPage() {
24+
const joinOptions = [
25+
{
26+
icon: Handshake,
27+
title: "Codeunia Partnership Form",
28+
description: "Partner with us to create innovative learning experiences and expand your reach in the developer community.",
29+
gradient: "from-blue-500 to-cyan-500",
30+
href: "/join/partnership",
31+
color: "text-blue-500",
32+
},
33+
{
34+
icon: Trophy,
35+
title: "Codeunia Sponsorship Form",
36+
description: "Support our mission by becoming a sponsor and help us create more opportunities for developers.",
37+
gradient: "from-green-500 to-emerald-500",
38+
href: "/join/sponsorship",
39+
color: "text-green-500",
40+
},
41+
{
42+
icon: Lightbulb,
43+
title: "Codeunia Mentor Registration",
44+
description: "Share your expertise and guide the next generation of developers through their learning journey.",
45+
gradient: "from-purple-500 to-indigo-500",
46+
href: "/join/mentor",
47+
color: "text-purple-500",
48+
},
49+
{
50+
icon: Award,
51+
title: "Codeunia Judges Registration",
52+
description: "Join our panel of judges to evaluate projects and provide valuable feedback to participants.",
53+
gradient: "from-orange-500 to-red-500",
54+
href: "/join/judges",
55+
color: "text-orange-500",
56+
},
57+
{
58+
icon: HandHeart,
59+
title: "Codeunia Volunteer Application",
60+
description: "Contribute your time and skills to help organize events and support our community initiatives.",
61+
gradient: "from-pink-500 to-rose-500",
62+
href: "/join/volunteer",
63+
color: "text-pink-500",
64+
},
65+
];
66+
67+
const stats = [
68+
{
69+
number: "500+",
70+
label: "Partners",
71+
icon: Handshake,
72+
color: "text-blue-500",
73+
},
74+
{
75+
number: "100+",
76+
label: "Mentors",
77+
icon: Lightbulb,
78+
color: "text-green-500",
79+
},
80+
{
81+
number: "50+",
82+
label: "Judges",
83+
icon: Award,
84+
color: "text-purple-500",
85+
},
86+
{
87+
number: "200+",
88+
label: "Volunteers",
89+
icon: HandHeart,
90+
color: "text-orange-500",
91+
},
92+
];
93+
94+
const containerVariants = {
95+
hidden: { opacity: 0 },
96+
visible: {
97+
opacity: 1,
98+
transition: {
99+
staggerChildren: 0.1,
100+
delayChildren: 0.3,
101+
},
102+
},
103+
};
104+
105+
const itemVariants = {
106+
hidden: { opacity: 0, y: 20 },
107+
visible: {
108+
opacity: 1,
109+
y: 0,
110+
transition: { duration: 0.5 },
111+
},
112+
};
113+
114+
return (
115+
<div className="flex flex-col overflow-hidden">
116+
<Header />
117+
{/* hero section */}
118+
<section className="py-20 md:py-32 relative overflow-hidden">
119+
<div
120+
className={cn(
121+
"absolute inset-0",
122+
"[background-size:20px_20px]",
123+
"[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)]",
124+
"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)]"
125+
)}
126+
/>
127+
<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>
128+
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-background to-purple-500/5 animate-gradient"></div>
129+
<div className="absolute inset-0">
130+
<div className="absolute top-20 left-10 w-72 h-72 bg-primary/10 rounded-full blur-3xl animate-pulse-slow"></div>
131+
<div
132+
className="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-pulse-slow"
133+
style={{ animationDelay: "2s" }}
134+
></div>
135+
</div>
136+
137+
<motion.div
138+
initial={{ opacity: 0, y: 20 }}
139+
animate={{ opacity: 1, y: 0 }}
140+
transition={{ duration: 0.5 }}
141+
className="container px-4 mx-auto relative z-10"
142+
>
143+
<div className="max-w-4xl mx-auto text-center space-y-8">
144+
<motion.div
145+
initial={{ scale: 0.9 }}
146+
animate={{ scale: 1 }}
147+
transition={{ duration: 0.3 }}
148+
>
149+
<div className="flex flex-col items-center justify-center gap-4">
150+
<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">
151+
<span className="absolute inset-0 overflow-hidden rounded-full">
152+
<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" />
153+
</span>
154+
<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">
155+
<span>Join Our Community</span>
156+
<span>
157+
<Sparkles className="w-3 h-3" />
158+
</span>
159+
</div>
160+
<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" />
161+
</button>
162+
</div>
163+
</motion.div>
164+
<motion.h1
165+
initial={{ opacity: 0, y: 20 }}
166+
animate={{ opacity: 1, y: 0 }}
167+
transition={{ duration: 0.5, delay: 0.2 }}
168+
className="text-5xl md:text-6xl font-bold tracking-tight leading-tight"
169+
>
170+
Join{" "}
171+
<motion.span
172+
className="gradient-text inline-block"
173+
animate={{
174+
backgroundPosition: [
175+
"0% 50%",
176+
"100% 50%",
177+
"0% 50%",
178+
],
179+
}}
180+
transition={{
181+
duration: 4,
182+
repeat: Infinity,
183+
ease: "linear",
184+
}}
185+
>
186+
Codeunia
187+
</motion.span>
188+
</motion.h1>
189+
<motion.p
190+
initial={{ opacity: 0, y: 20 }}
191+
animate={{ opacity: 1, y: 0 }}
192+
transition={{ duration: 0.5, delay: 0.4 }}
193+
className="text-xl text-muted-foreground max-w-2xl mx-auto"
194+
>
195+
Be part of something bigger. Choose how you want to contribute to our mission of empowering developers worldwide.
196+
</motion.p>
197+
</div>
198+
</motion.div>
199+
</section>
200+
201+
{/* stats section */}
202+
<section className="py-16 bg-muted/30">
203+
<div className="container px-4 mx-auto">
204+
<motion.div
205+
variants={containerVariants}
206+
initial="hidden"
207+
whileInView="visible"
208+
viewport={{ once: true }}
209+
className="grid grid-cols-2 md:grid-cols-4 gap-8"
210+
>
211+
{stats.map((stat, index) => (
212+
<motion.div
213+
key={index}
214+
variants={itemVariants}
215+
className="text-center"
216+
>
217+
<div className="flex flex-col items-center space-y-2">
218+
<div className={`p-3 rounded-full bg-muted ${stat.color}`}>
219+
<stat.icon className="h-6 w-6" />
220+
</div>
221+
<div className="text-3xl font-bold">{stat.number}</div>
222+
<div className="text-sm text-muted-foreground">{stat.label}</div>
223+
</div>
224+
</motion.div>
225+
))}
226+
</motion.div>
227+
</div>
228+
</section>
229+
230+
{/* join options section */}
231+
<section className="py-20">
232+
<div className="container px-4 mx-auto">
233+
<motion.div
234+
initial={{ opacity: 0, y: 20 }}
235+
whileInView={{ opacity: 1, y: 0 }}
236+
viewport={{ once: true }}
237+
transition={{ duration: 0.5 }}
238+
className="text-center mb-16"
239+
>
240+
<h2 className="text-3xl md:text-4xl font-bold mb-4">
241+
Choose Your Path
242+
</h2>
243+
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
244+
There are many ways to get involved with Codeunia. Find the perfect opportunity that matches your skills and interests.
245+
</p>
246+
</motion.div>
247+
248+
<motion.div
249+
variants={containerVariants}
250+
initial="hidden"
251+
whileInView="visible"
252+
viewport={{ once: true }}
253+
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
254+
>
255+
{joinOptions.map((option, index) => (
256+
<motion.div
257+
key={index}
258+
variants={itemVariants}
259+
className="group"
260+
>
261+
<CardSpotlight className="h-full">
262+
<Card className="h-full border-0 bg-background/60 backdrop-blur-xl hover:bg-background/80 transition-all duration-300 group-hover:shadow-2xl">
263+
<CardHeader className="text-center pb-4">
264+
<div className={`mx-auto p-3 rounded-full bg-gradient-to-r ${option.gradient} mb-4 group-hover:scale-110 transition-transform duration-300`}>
265+
<option.icon className="h-8 w-8 text-white" />
266+
</div>
267+
<CardTitle className="text-xl font-semibold group-hover:text-primary transition-colors duration-300">
268+
{option.title}
269+
</CardTitle>
270+
</CardHeader>
271+
<CardContent className="text-center space-y-4">
272+
<p className="text-muted-foreground leading-relaxed">
273+
{option.description}
274+
</p>
275+
<Button
276+
className="w-full group-hover:scale-105 transition-transform duration-300"
277+
variant="outline"
278+
asChild
279+
>
280+
<Link href={option.href}>
281+
Apply Now
282+
<ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform duration-300" />
283+
</Link>
284+
</Button>
285+
</CardContent>
286+
</Card>
287+
</CardSpotlight>
288+
</motion.div>
289+
))}
290+
</motion.div>
291+
</div>
292+
</section>
293+
294+
{/* cta section */}
295+
<section className="py-20 bg-gradient-to-br from-primary/5 via-background to-purple-500/5">
296+
<div className="container px-4 mx-auto text-center">
297+
<motion.div
298+
initial={{ opacity: 0, y: 20 }}
299+
whileInView={{ opacity: 1, y: 0 }}
300+
viewport={{ once: true }}
301+
transition={{ duration: 0.5 }}
302+
className="max-w-3xl mx-auto space-y-8"
303+
>
304+
<h2 className="text-3xl md:text-4xl font-bold">
305+
Ready to Make a Difference?
306+
</h2>
307+
<p className="text-xl text-muted-foreground">
308+
Join our community of passionate individuals who are shaping the future of developer education and community building.
309+
</p>
310+
<div className="flex flex-col sm:flex-row gap-4 justify-center">
311+
<Button size="lg" className="glow-effect">
312+
<Mail className="mr-2 h-5 w-5" />
313+
Contact Us
314+
</Button>
315+
<Button size="lg" variant="outline">
316+
<Users className="mr-2 h-5 w-5" />
317+
Learn More
318+
</Button>
319+
</div>
320+
</motion.div>
321+
</div>
322+
</section>
323+
324+
<Footer />
325+
</div>
326+
);
327+
}

‎components/header.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export default function Header() {
2828
{ href: "/about", label: "About" },
2929
{ href: "/events", label: "Events" },
3030
{ href: "/blog", label: "Blog" },
31+
{ href: "/join", label: "Join Codeunia" },
3132
{ href: "/contact", label: "Contact Us" },
3233
]
3334

0 commit comments

Comments
 (0)