Skip to content

Commit 48198a5

Browse files
Ani1702Ani1702
authored
Merge pull request #6 from hrshx3o5o6/main
fix: updated timeline
2 parents dda9677 + 6d03e1f commit 48198a5

File tree

1 file changed

+144
-50
lines changed

1 file changed

+144
-50
lines changed

‎components/TimelineSection.tsx‎

Lines changed: 144 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { useEffect, useRef } from "react";
44
import { robotoMono } from "@/lib/fonts";
5-
import { RiFlag2Fill, RiRocket2Fill, RiCalendarEventFill, RiTrophyFill } from "react-icons/ri";
5+
import { RiUserAddFill, RiCodeSSlashFill, RiMicFill, RiSearchEyeFill, RiPlayFill, RiTrophyFill } from "react-icons/ri";
66
import gsap from "gsap";
77
import { ScrollTrigger } from "gsap/ScrollTrigger";
88

@@ -11,32 +11,56 @@ gsap.registerPlugin(ScrollTrigger);
1111
const events = [
1212
{
1313
title: "Registrations Open",
14-
date: "Jan 25, 2026",
14+
date: "Feb 07, 2026 8:00 AM",
1515
description: "Team registrations begin. Gather your squad and sign up!",
16-
icon: RiFlag2Fill,
16+
icon: RiUserAddFill,
1717
step: "01",
1818
active: true,
1919
},
2020
{
21-
title: "Round 1 Begins",
22-
date: "Feb 08, 2026",
23-
description: "The first challenge is released. Start building your models.",
24-
icon: RiRocket2Fill,
21+
title: "Hack Begins",
22+
date: "Feb 07, 2026",
23+
description: "Where the participants start their journey.",
24+
icon: RiCodeSSlashFill,
2525
step: "02",
2626
active: false,
2727
},
2828
{
29-
title: "Final Submission",
30-
date: "Feb 10, 2026",
31-
description: "Deadline for all submissions. Make sure everything is polished.",
32-
icon: RiCalendarEventFill,
29+
title: "Guest speaker session",
30+
date: "Feb 07, 2026 11:00 AM",
31+
description: "An insightful discussion with an industry professional.",
32+
icon: RiMicFill,
3333
step: "03",
3434
active: false,
3535
},
3636
{
37-
title: "Results Announced",
38-
date: "Feb 12, 2026",
39-
description: "Winners are revealed and prizes distributed.",
37+
title: "Review 1",
38+
date: "Feb 07, 2026 3:00 PM",
39+
description: "The first review is conducted to evaluate the models.",
40+
icon: RiSearchEyeFill,
41+
step: "04",
42+
active: false,
43+
},
44+
{
45+
title: "The hack resumes",
46+
date: "Feb 07, 2026 9:00 PM",
47+
description: "The hackathon resumes after a dinner break.",
48+
icon: RiPlayFill,
49+
step: "03",
50+
active: false,
51+
},
52+
{
53+
title: "Review 2",
54+
date: "Feb 8, 2026 3:00 AM",
55+
description: "The second review is conducted to evaluate the models.",
56+
icon: RiSearchEyeFill,
57+
step: "04",
58+
active: false,
59+
},
60+
{
61+
title: "The hacking ends",
62+
date: "Feb 08, 2026 6:00 AM",
63+
description: "The hacking ends.",
4064
icon: RiTrophyFill,
4165
step: "04",
4266
active: false,
@@ -189,8 +213,15 @@ export default function TimelineSection() {
189213

190214
{/* Desktop Zigzag Timeline */}
191215
<div ref={cardsRef} className="hidden lg:block w-full max-w-6xl relative" style={{ perspective: "1200px" }}>
192-
{/* Horizontal connecting line */}
193-
<div ref={lineRef} className="absolute top-1/2 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[#CCFF00]/50 to-transparent -translate-y-1/2" />
216+
{/* Horizontal connecting line with glow */}
217+
<div
218+
ref={lineRef}
219+
className="absolute top-1/2 left-0 right-0 h-[3px] -translate-y-1/2"
220+
style={{
221+
background: 'linear-gradient(90deg, transparent, rgba(204,255,0,0.8) 20%, rgba(204,255,0,0.8) 80%, transparent)',
222+
boxShadow: '0 0 20px rgba(204,255,0,0.4)'
223+
}}
224+
/>
194225

195226
<div className="flex justify-between items-center relative">
196227
{events.map((event, idx) => {
@@ -199,65 +230,96 @@ export default function TimelineSection() {
199230
<div
200231
key={idx}
201232
className="relative flex flex-col items-center timeline-card"
202-
style={{ width: "22%", transformStyle: "preserve-3d" }}
233+
style={{ width: "28%", transformStyle: "preserve-3d" }}
203234
>
204235
{/* Card */}
205236
<div
206-
className={`absolute ${isUp ? "bottom-full mb-8" : "top-full mt-8"} w-full`}
237+
className={`absolute ${isUp ? "bottom-full mb-10" : "top-full mt-10"} w-full`}
207238
>
208239
<div
209-
className={`p-5 h-[180px] border transition-all duration-500 backdrop-blur-sm ${event.active
210-
? "bg-[#CCFF00]/10 border-[#CCFF00] shadow-[0_0_40px_rgba(204,255,0,0.25)]"
211-
: "bg-white/[0.02] border-white/10 hover:border-[#CCFF00]/50 hover:bg-white/[0.05] hover:shadow-[0_0_30px_rgba(204,255,0,0.1)]"
212-
}`}
240+
className={`
241+
group relative p-6 pb-10 min-h-[280px] flex flex-col
242+
backdrop-blur-md transition-all duration-500
243+
${event.active
244+
? "bg-gradient-to-br from-[#CCFF00]/15 via-[#CCFF00]/10 to-transparent border-2 border-[#CCFF00] shadow-[0_0_50px_rgba(204,255,0,0.3),inset_0_0_30px_rgba(204,255,0,0.1)]"
245+
: "bg-gradient-to-br from-white/[0.03] to-white/[0.01] border border-white/10 hover:border-[#CCFF00]/60 hover:shadow-[0_0_40px_rgba(204,255,0,0.15),inset_0_0_20px_rgba(204,255,0,0.05)]"
246+
}
247+
hover:scale-[1.02] hover:-translate-y-1
248+
`}
213249
>
214-
{/* Step Number */}
250+
{/* Corner accents */}
251+
<div className={`absolute top-0 left-0 w-8 h-8 border-l-2 border-t-2 transition-colors duration-300 ${event.active ? 'border-[#CCFF00]' : 'border-white/20 group-hover:border-[#CCFF00]/60'
252+
}`} />
253+
<div className={`absolute bottom-0 right-0 w-8 h-8 border-r-2 border-b-2 transition-colors duration-300 ${event.active ? 'border-[#CCFF00]' : 'border-white/20 group-hover:border-[#CCFF00]/60'
254+
}`} />
255+
256+
{/* Step Number Badge */}
215257
<div
216-
className={`absolute ${isUp ? "-bottom-3" : "-top-3"} right-4 w-8 h-8 flex items-center justify-center ${event.active ? "bg-[#CCFF00]" : "bg-white/20"
258+
className={`absolute ${isUp ? "-bottom-4" : "-top-4"} right-4 w-10 h-10 flex items-center justify-center transition-all duration-300 ${event.active
259+
? "bg-gradient-to-br from-[#CCFF00] to-[#99CC00] shadow-[0_0_20px_rgba(204,255,0,0.6)]"
260+
: "bg-gradient-to-br from-white/20 to-white/10 group-hover:from-[#CCFF00]/50 group-hover:to-[#99CC00]/50"
217261
}`}
262+
style={{ clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)' }}
218263
>
219264
<span
220-
className={`text-xs font-bold ${event.active ? "text-black" : "text-white"} ${robotoMono.className}`}
265+
className={`text-sm font-bold ${robotoMono.className} ${event.active ? "text-black" : "text-white group-hover:text-black"
266+
}`}
221267
>
222268
{event.step}
223269
</span>
224270
</div>
225271

272+
{/* Date */}
226273
<p
227-
className={`text-xs tracking-widest mb-2 ${robotoMono.className} ${event.active ? "text-[#CCFF00]" : "text-white/40"
274+
className={`text-xs tracking-[0.15em] mb-3 uppercase ${robotoMono.className} ${event.active ? "text-[#CCFF00]" : "text-white/40 group-hover:text-[#CCFF00]/70"
228275
}`}
229276
>
230277
{event.date}
231278
</p>
232279

280+
{/* Title with gradient on active */}
233281
<h3
234-
className={`text-lg font-bold mb-2 transition-colors ${event.active ? "text-[#CCFF00]" : "text-white"
282+
className={`text-base font-bold mb-3 leading-snug break-words transition-all duration-300 ${event.active
283+
? "bg-gradient-to-r from-[#CCFF00] to-[#99FF00] bg-clip-text text-transparent"
284+
: "text-white group-hover:text-[#CCFF00]"
235285
}`}
236286
>
237287
{event.title}
238288
</h3>
239289

240-
<p className="text-white/50 text-sm leading-relaxed line-clamp-3">
290+
{/* Description */}
291+
<p className="text-white/60 group-hover:text-white/80 text-sm leading-relaxed transition-colors duration-300 flex-1">
241292
{event.description}
242293
</p>
294+
295+
{/* Subtle grid pattern overlay */}
296+
<div
297+
className="absolute inset-0 opacity-[0.02] pointer-events-none"
298+
style={{
299+
backgroundImage: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.1) 2px, rgba(255,255,255,0.1) 4px), repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.1) 2px, rgba(255,255,255,0.1) 4px)'
300+
}}
301+
/>
243302
</div>
244303

245-
{/* Connector line */}
304+
{/* Connector line with glow */}
246305
<div
247-
className={`absolute left-1/2 -translate-x-1/2 w-[2px] h-8 ${event.active ? "bg-gradient-to-b from-[#CCFF00] to-transparent" : "bg-white/20"
306+
className={`absolute left-1/2 -translate-x-1/2 w-[3px] h-10 transition-all duration-300 ${event.active
307+
? "bg-gradient-to-b from-[#CCFF00] to-transparent shadow-[0_0_15px_rgba(204,255,0,0.6)]"
308+
: "bg-gradient-to-b from-white/30 to-transparent"
248309
} ${isUp ? "top-full" : "bottom-full"}`}
249310
/>
250311
</div>
251312

252-
{/* Center Node */}
313+
{/* Center Node with enhanced glow */}
253314
<div
254-
className={`timeline-node w-12 h-12 rounded-full flex items-center justify-center z-10 transition-all duration-300 ${event.active
255-
? "bg-[#CCFF00] shadow-[0_0_30px_rgba(204,255,0,0.6)]"
256-
: "bg-black border-2 border-white/30 hover:border-[#CCFF00]/50"
315+
className={`timeline-node w-14 h-14 rounded-full flex items-center justify-center z-10 transition-all duration-300 ${event.active
316+
? "bg-gradient-to-br from-[#CCFF00] to-[#99CC00] shadow-[0_0_40px_rgba(204,255,0,0.8),0_0_60px_rgba(204,255,0,0.4)]"
317+
: "bg-gradient-to-br from-black to-gray-900 border-2 border-white/40 hover:border-[#CCFF00]/70 hover:shadow-[0_0_30px_rgba(204,255,0,0.4)]"
257318
}`}
258319
>
259320
<event.icon
260-
className={`w-5 h-5 ${event.active ? "text-black" : "text-white/60"}`}
321+
className={`w-6 h-6 transition-all duration-300 ${event.active ? "text-black" : "text-white/70 group-hover:text-[#CCFF00]"
322+
}`}
261323
/>
262324
</div>
263325
</div>
@@ -269,49 +331,81 @@ export default function TimelineSection() {
269331
{/* Mobile/Tablet Timeline */}
270332
<div className="lg:hidden w-full max-w-md">
271333
<div className="relative">
272-
{/* Vertical line */}
273-
<div className="vertical-line absolute left-6 top-0 bottom-0 w-[2px] bg-gradient-to-b from-[#CCFF00]/50 via-white/20 to-transparent" />
334+
{/* Vertical line with glow */}
335+
<div
336+
className="vertical-line absolute left-6 top-0 bottom-0 w-[3px]"
337+
style={{
338+
background: 'linear-gradient(180deg, rgba(204,255,0,0.8), rgba(204,255,0,0.3) 60%, transparent)',
339+
boxShadow: '0 0 20px rgba(204,255,0,0.3)'
340+
}}
341+
/>
274342

275343
<div className="flex flex-col gap-8">
276344
{events.map((event, idx) => (
277345
<div key={idx} className="relative flex items-start gap-6 timeline-card">
346+
{/* Node */}
278347
<div
279-
className={`timeline-node relative z-10 w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0 transition-all duration-300 ${event.active
280-
? "bg-[#CCFF00] shadow-[0_0_25px_rgba(204,255,0,0.5)]"
281-
: "bg-black border-2 border-white/30"
348+
className={`timeline-node relative z-10 w-14 h-14 rounded-full flex items-center justify-center flex-shrink-0 transition-all duration-300 ${event.active
349+
? "bg-gradient-to-br from-[#CCFF00] to-[#99CC00] shadow-[0_0_35px_rgba(204,255,0,0.7)]"
350+
: "bg-gradient-to-br from-black to-gray-900 border-2 border-white/40"
282351
}`}
283352
>
284353
<event.icon
285-
className={`w-5 h-5 ${event.active ? "text-black" : "text-white/60"}`}
354+
className={`w-6 h-6 ${event.active ? "text-black" : "text-white/70"}`}
286355
/>
287356
</div>
288357

358+
{/* Card */}
289359
<div
290-
className={`flex-1 p-5 border backdrop-blur-sm transition-all duration-300 ${event.active
291-
? "bg-[#CCFF00]/10 border-[#CCFF00]"
292-
: "bg-white/[0.02] border-white/10"
293-
}`}
360+
className={`
361+
group flex-1 p-5 min-h-[140px] backdrop-blur-md transition-all duration-300 relative overflow-hidden
362+
${event.active
363+
? "bg-gradient-to-br from-[#CCFF00]/15 via-[#CCFF00]/10 to-transparent border-2 border-[#CCFF00] shadow-[0_0_40px_rgba(204,255,0,0.25)]"
364+
: "bg-gradient-to-br from-white/[0.03] to-white/[0.01] border border-white/10"
365+
}
366+
`}
294367
>
295-
<div className="flex items-center justify-between mb-2">
368+
{/* Corner accents */}
369+
<div className={`absolute top-0 left-0 w-6 h-6 border-l-2 border-t-2 ${event.active ? 'border-[#CCFF00]' : 'border-white/20'
370+
}`} />
371+
<div className={`absolute bottom-0 right-0 w-6 h-6 border-r-2 border-b-2 ${event.active ? 'border-[#CCFF00]' : 'border-white/20'
372+
}`} />
373+
374+
<div className="flex items-center justify-between mb-3">
296375
<p
297-
className={`text-xs tracking-widest ${robotoMono.className} ${event.active ? "text-[#CCFF00]" : "text-white/40"
376+
className={`text-xs tracking-[0.12em] uppercase ${robotoMono.className} ${event.active ? "text-[#CCFF00]" : "text-white/40"
298377
}`}
299378
>
300379
{event.date}
301380
</p>
302381
<span
303-
className={`text-xs font-bold px-2 py-1 ${robotoMono.className} ${event.active ? "bg-[#CCFF00] text-black" : "bg-white/10 text-white/50"
382+
className={`text-xs font-bold px-3 py-1.5 ${robotoMono.className} transition-all duration-300 ${event.active
383+
? "bg-gradient-to-br from-[#CCFF00] to-[#99CC00] text-black shadow-[0_0_15px_rgba(204,255,0,0.4)]"
384+
: "bg-white/10 text-white/60"
304385
}`}
305386
>
306387
{event.step}
307388
</span>
308389
</div>
390+
309391
<h3
310-
className={`text-lg font-bold mb-1 ${event.active ? "text-[#CCFF00]" : "text-white"}`}
392+
className={`text-lg font-bold mb-2 leading-tight ${event.active
393+
? "bg-gradient-to-r from-[#CCFF00] to-[#99FF00] bg-clip-text text-transparent"
394+
: "text-white"
395+
}`}
311396
>
312397
{event.title}
313398
</h3>
314-
<p className="text-white/50 text-sm">{event.description}</p>
399+
400+
<p className="text-white/60 text-sm leading-relaxed">{event.description}</p>
401+
402+
{/* Grid pattern */}
403+
<div
404+
className="absolute inset-0 opacity-[0.02] pointer-events-none"
405+
style={{
406+
backgroundImage: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.1) 2px, rgba(255,255,255,0.1) 4px), repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.1) 2px, rgba(255,255,255,0.1) 4px)'
407+
}}
408+
/>
315409
</div>
316410
</div>
317411
))}

0 commit comments

Comments
 (0)