Skip to content

Commit 065033b

Browse files
codeunia-devcodeunia-dev
authored
Merge pull request #13 from codeunia-dev/add/eventspage
Added EventsPage component with dynamic event details, including a hero section, event cards, and a call-to-action section for upcoming events.
2 parents 5fdc7a1 + 6665a67 commit 065033b

File tree

1 file changed

+358
-0
lines changed

1 file changed

+358
-0
lines changed

‎app/events/page.tsx‎

Lines changed: 358 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,358 @@
1+
"use client"
2+
3+
import Footer from "@/components/footer";
4+
import Header from "@/components/header";
5+
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
6+
import { Button } from "@/components/ui/button"
7+
import { Badge } from "@/components/ui/badge"
8+
import { cn } from "@/lib/utils"
9+
import {
10+
Calendar,
11+
MapPin,
12+
Clock,
13+
Users,
14+
Trophy,
15+
ArrowRight,
16+
Sparkles,
17+
Code,
18+
} from "lucide-react"
19+
import { motion } from "framer-motion"
20+
import { SparklesCore } from "@/components/ui/sparkles"
21+
import Link from "next/link"
22+
23+
export default function EventsPage() {
24+
return (
25+
<div className="flex flex-col overflow-hidden">
26+
<Header />
27+
28+
{/* hero section */}
29+
<section className="py-20 md:py-32 relative overflow-hidden">
30+
<div
31+
className={cn(
32+
"absolute inset-0",
33+
"[background-size:20px_20px]",
34+
"[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)]",
35+
"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)]"
36+
)}
37+
/>
38+
<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>
39+
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-background to-purple-500/5 animate-gradient"></div>
40+
<div className="absolute inset-0">
41+
<div className="absolute top-20 left-10 w-72 h-72 bg-primary/10 rounded-full blur-3xl animate-pulse-slow"></div>
42+
<div
43+
className="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-pulse-slow"
44+
style={{ animationDelay: "2s" }}
45+
></div>
46+
</div>
47+
48+
<motion.div
49+
initial={{ opacity: 0, y: 20 }}
50+
animate={{ opacity: 1, y: 0 }}
51+
transition={{ duration: 0.5 }}
52+
className="container px-4 mx-auto relative z-10"
53+
>
54+
<div className="max-w-4xl mx-auto text-center space-y-8">
55+
<motion.div
56+
initial={{ scale: 0.9 }}
57+
animate={{ scale: 1 }}
58+
transition={{ duration: 0.3 }}
59+
>
60+
<div className="flex flex-col items-center justify-center gap-4">
61+
<button className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-sm font-semibold leading-6 text-white inline-block">
62+
<span className="absolute inset-0 overflow-hidden rounded-full">
63+
<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" />
64+
</span>
65+
<div className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-1 px-4 ring-1 ring-white/10">
66+
<span>Upcoming Events</span>
67+
<span>
68+
<Calendar className="w-3 h-3" />
69+
</span>
70+
</div>
71+
<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" />
72+
</button>
73+
</div>
74+
</motion.div>
75+
<motion.h1
76+
initial={{ opacity: 0, y: 20 }}
77+
animate={{ opacity: 1, y: 0 }}
78+
transition={{ duration: 0.5, delay: 0.2 }}
79+
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight px-4"
80+
>
81+
Join Our{" "}
82+
<motion.span
83+
className="gradient-text inline-block"
84+
animate={{
85+
backgroundPosition: [
86+
"0% 50%",
87+
"100% 50%",
88+
"0% 50%",
89+
],
90+
}}
91+
transition={{
92+
duration: 4,
93+
repeat: Infinity,
94+
ease: "linear",
95+
}}
96+
style={{
97+
background:
98+
"linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4, #6366f1)",
99+
backgroundSize: "300% 100%",
100+
WebkitBackgroundClip: "text",
101+
WebkitTextFillColor: "transparent",
102+
}}
103+
>
104+
Events
105+
</motion.span>
106+
</motion.h1>
107+
<motion.p
108+
initial={{ opacity: 0, y: 20 }}
109+
animate={{ opacity: 1, y: 0 }}
110+
transition={{ duration: 0.5, delay: 0.3 }}
111+
className="text-lg sm:text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed px-4"
112+
>
113+
Discover exciting hackathons, workshops, and tech events hosted by CodeUnia.
114+
</motion.p>
115+
</div>
116+
</motion.div>
117+
</section>
118+
119+
{/* events section */}
120+
<section className="py-20">
121+
<div className="container px-4 mx-auto">
122+
<div className="max-w-4xl mx-auto">
123+
<motion.div
124+
initial={{ opacity: 0, y: 20 }}
125+
whileInView={{ opacity: 1, y: 0 }}
126+
transition={{ duration: 0.5 }}
127+
viewport={{ once: true }}
128+
>
129+
<Card className="border-0 shadow-xl bg-gradient-to-br from-primary/10 via-background to-purple-500/10 dark:from-primary/20 dark:via-background dark:to-purple-500/20 hover:shadow-2xl transition-all duration-300 backdrop-blur-sm overflow-hidden">
130+
<div className="absolute inset-0 bg-gradient-to-r from-primary/5 to-purple-500/5 opacity-0 hover:opacity-100 transition-opacity duration-500" />
131+
<CardHeader className="relative z-10">
132+
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0">
133+
<div className="flex flex-col sm:flex-row sm:items-center space-y-3 sm:space-y-0 sm:space-x-3">
134+
<div className="w-12 h-12 bg-gradient-to-br from-primary to-purple-600 rounded-xl flex items-center justify-center">
135+
<Code className="h-6 w-6 text-white" />
136+
</div>
137+
<div>
138+
<CardTitle className="text-xl sm:text-2xl">RealityCode by CodeUnia</CardTitle>
139+
<div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-2 mt-2">
140+
<Badge className="bg-primary/90 text-white border-0 w-fit">
141+
<Sparkles className="w-3 h-3 mr-1" />
142+
Hackathon
143+
</Badge>
144+
<Badge variant="outline" className="border-primary/30 w-fit">
145+
<Trophy className="w-3 h-3 mr-1" />
146+
₹6,00,000 Prize Pool
147+
</Badge>
148+
</div>
149+
</div>
150+
</div>
151+
</div>
152+
</CardHeader>
153+
<CardContent className="relative z-10 space-y-6">
154+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
155+
<div className="space-y-4">
156+
<div className="flex items-center space-x-3">
157+
<div className="w-10 h-10 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-lg flex items-center justify-center">
158+
<MapPin className="h-5 w-5 text-white" />
159+
</div>
160+
<div>
161+
<p className="font-semibold text-foreground text-sm sm:text-base">Location</p>
162+
<p className="text-muted-foreground text-sm sm:text-base">Chandigarh University, Mohali, Punjab, India</p>
163+
</div>
164+
</div>
165+
<div className="flex items-center space-x-3">
166+
<div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
167+
<Calendar className="h-5 w-5 text-white" />
168+
</div>
169+
<div>
170+
<p className="font-semibold text-foreground text-sm sm:text-base">Date</p>
171+
<p className="text-muted-foreground text-sm sm:text-base">December 15-17, 2024</p>
172+
</div>
173+
</div>
174+
<div className="flex items-center space-x-3">
175+
<div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-600 rounded-lg flex items-center justify-center">
176+
<Clock className="h-5 w-5 text-white" />
177+
</div>
178+
<div>
179+
<p className="font-semibold text-foreground text-sm sm:text-base">Duration</p>
180+
<p className="text-muted-foreground text-sm sm:text-base">24 Hours</p>
181+
</div>
182+
</div>
183+
</div>
184+
<div className="space-y-4">
185+
<div className="flex items-center space-x-3">
186+
<div className="w-10 h-10 bg-gradient-to-br from-orange-500 to-red-600 rounded-lg flex items-center justify-center">
187+
<Users className="h-5 w-5 text-white" />
188+
</div>
189+
<div>
190+
<p className="font-semibold text-foreground text-sm sm:text-base">Expected Participants</p>
191+
<p className="text-muted-foreground text-sm sm:text-base">500+ Developers</p>
192+
</div>
193+
</div>
194+
<div className="flex items-center space-x-3">
195+
<div className="w-10 h-10 bg-gradient-to-br from-green-500 to-emerald-600 rounded-lg flex items-center justify-center">
196+
<Trophy className="h-5 w-5 text-white" />
197+
</div>
198+
<div>
199+
<p className="font-semibold text-foreground text-sm sm:text-base">Prize Pool</p>
200+
<p className="text-muted-foreground text-sm sm:text-base">₹6,00,000</p>
201+
</div>
202+
</div>
203+
<div className="flex items-center space-x-3">
204+
<div className="w-10 h-10 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center">
205+
<Calendar className="h-5 w-5 text-white" />
206+
</div>
207+
<div>
208+
<p className="font-semibold text-foreground text-sm sm:text-base">Updated On</p>
209+
<p className="text-muted-foreground text-sm sm:text-base">June 15, 2025</p>
210+
</div>
211+
</div>
212+
</div>
213+
</div>
214+
215+
<div className="pt-6 border-t border-border/50">
216+
<p className="text-muted-foreground leading-relaxed mb-6 text-sm sm:text-base">
217+
RealityCode is a 24-hour hackathon focused on AI and machine learning projects.
218+
Build innovative solutions and compete for exciting prizes while networking with
219+
fellow developers and industry experts.
220+
</p>
221+
<div className="flex flex-col sm:flex-row gap-4 w-full">
222+
<Button
223+
size="lg"
224+
className="bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 text-white shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-300 w-full sm:w-auto"
225+
asChild
226+
>
227+
<Link
228+
href="https://unstop.com/p/realitycode-by-codeunia-codeunia-1488383"
229+
target="_blank"
230+
rel="noopener noreferrer"
231+
className="flex items-center gap-2"
232+
>
233+
Register Now
234+
<ArrowRight className="h-4 w-4" />
235+
</Link>
236+
</Button>
237+
<Button
238+
size="lg"
239+
variant="outline"
240+
className="border-primary/30 hover:border-primary/50 hover:bg-primary/10 transition-all duration-300 w-full sm:w-auto"
241+
>
242+
Learn More
243+
</Button>
244+
</div>
245+
</div>
246+
</CardContent>
247+
</Card>
248+
</motion.div>
249+
</div>
250+
</div>
251+
</section>
252+
253+
{/* cta Section */}
254+
<section className="py-24 relative overflow-hidden bg-gradient-to-br from-primary/10 via-purple-500/10 to-background dark:from-primary/20 dark:via-purple-500/20 dark:to-background">
255+
<div className="absolute inset-0">
256+
<div className="absolute top-10 left-10 w-32 h-32 bg-primary/20 dark:bg-primary/30 rounded-full blur-xl animate-float"></div>
257+
<div
258+
className="absolute bottom-10 right-10 w-48 h-48 bg-purple-500/20 dark:bg-purple-500/30 rounded-full blur-xl animate-float"
259+
style={{ animationDelay: "3s" }}
260+
></div>
261+
</div>
262+
263+
<div className="absolute inset-0 h-full w-full">
264+
<SparklesCore
265+
id="tsparticlesfullpage"
266+
background="transparent"
267+
minSize={0.6}
268+
maxSize={1.4}
269+
particleDensity={100}
270+
className="w-full h-full"
271+
particleColor="#6366f1"
272+
/>
273+
</div>
274+
275+
<motion.div
276+
initial={{ opacity: 0, y: 20 }}
277+
whileInView={{ opacity: 1, y: 0 }}
278+
transition={{ duration: 0.5 }}
279+
viewport={{ once: true }}
280+
className="container px-4 mx-auto text-center relative z-10"
281+
>
282+
<div className="max-w-3xl mx-auto space-y-8 p-8 rounded-3xl bg-background/50 dark:bg-background/80 backdrop-blur-md border border-primary/10 dark:border-primary/20 shadow-xl">
283+
<div className="flex flex-col items-center justify-center gap-4">
284+
<button className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-sm font-semibold leading-6 text-white inline-block">
285+
<span className="absolute inset-0 overflow-hidden rounded-full">
286+
<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" />
287+
</span>
288+
<div className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-1 px-4 ring-1 ring-white/10">
289+
<span>Stay Updated 🚀</span>
290+
</div>
291+
<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" />
292+
</button>
293+
</div>
294+
<motion.h2
295+
initial={{ opacity: 0, y: 20 }}
296+
animate={{ opacity: 1, y: 0 }}
297+
transition={{ duration: 0.5, delay: 0.2 }}
298+
className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-tight px-4"
299+
>
300+
More{" "}
301+
<motion.span
302+
className="gradient-text inline-block"
303+
animate={{
304+
backgroundPosition: [
305+
"0% 50%",
306+
"100% 50%",
307+
"0% 50%",
308+
],
309+
}}
310+
transition={{
311+
duration: 4,
312+
repeat: Infinity,
313+
ease: "linear",
314+
}}
315+
style={{
316+
background:
317+
"linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4, #6366f1)",
318+
backgroundSize: "300% 100%",
319+
WebkitBackgroundClip: "text",
320+
WebkitTextFillColor: "transparent",
321+
}}
322+
>
323+
Events Coming Soon
324+
</motion.span>
325+
</motion.h2>
326+
<p className="text-xl text-muted-foreground dark:text-muted-foreground/90 leading-relaxed">
327+
Follow us on social media to stay updated with our latest events, workshops, and hackathons.
328+
</p>
329+
<div className="flex flex-col sm:flex-row gap-4 justify-center w-full">
330+
<Button
331+
size="lg"
332+
variant="default"
333+
className="px-6 sm:px-8 py-4 sm:py-6 text-base sm:text-lg font-semibold hover:scale-105 transition-all duration-300 w-full sm:w-auto"
334+
asChild
335+
>
336+
<Link href="/contact">
337+
Contact Us
338+
</Link>
339+
</Button>
340+
<Button
341+
size="lg"
342+
variant="outline"
343+
className="px-6 sm:px-8 py-4 sm:py-6 text-base sm:text-lg font-semibold hover:scale-105 transition-transform duration-300 w-full sm:w-auto"
344+
asChild
345+
>
346+
<Link href="/about">
347+
About CodeUnia
348+
</Link>
349+
</Button>
350+
</div>
351+
</div>
352+
</motion.div>
353+
</section>
354+
355+
<Footer />
356+
</div>
357+
);
358+
}

0 commit comments

Comments
 (0)