Skip to content

Commit bc7e1be

Browse files
AdithaBuwanekaAdithaBuwaneka
authored
Merge pull request #7 from coderush-2025/Prizes-chamo
Prizes chamo
2 parents 5aade30 + 941c231 commit bc7e1be

File tree

5 files changed

+255
-0
lines changed

5 files changed

+255
-0
lines changed

‎public/First Place.png‎

260 KB
Loading

‎public/Second place.png‎

261 KB
Loading

‎public/Third place.png‎

259 KB
Loading

‎src/app/page.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import Hero from "../components/Hero";
22
import Contact from "../components/Contact";
33
import HowItWorks from "../components/HowItWorks";
4+
import Prizes from '@/components/PrizesInteractive';
45

56
export default function Home() {
67
return (
78
<>
89
<Hero />
910
<HowItWorks />
11+
<Prizes />
12+
<Contact />
13+
1014
</>
1115
);
1216
}

‎src/components/PrizesInteractive.tsx‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
'use client';
2+
3+
import React, { useState, useEffect } from 'react';
4+
5+
const PrizesInteractive = () => {
6+
const [selectedCard, setSelectedCard] = useState<number | null>(null);
7+
const [isLoaded, setIsLoaded] = useState(false);
8+
9+
useEffect(() => {
10+
setIsLoaded(true);
11+
}, []);
12+
13+
const prizes = [
14+
{
15+
place: '1st',
16+
title: '1st Place',
17+
subtitle: 'Champion\'s Reward',
18+
description: "The champion's title and a bundle of exciting rewards await the winning team!",
19+
borderColor: 'border-[#37c2cc]/90',
20+
bgGradient: 'from-[#37c2cc]/20 via-[#204168]/30 to-[#0e243f]/35',
21+
textColor: 'text-[#37c2cc]',
22+
glowColor: 'shadow-[#37c2cc]/50',
23+
accentGradient: 'from-[#37c2cc] to-[#204168]',
24+
icon: '🏆',
25+
iconBg: 'bg-gradient-to-br from-[#37c2cc]/35 to-[#2ba8b3]/25',
26+
particles: 'bg-[#37c2cc]/60',
27+
rewards: ['Championship Trophy', 'Cash Prize', 'Premium Swag Pack', 'Certificate of Excellence'],
28+
},
29+
{
30+
place: '2nd',
31+
title: '2nd Place',
32+
subtitle: 'Runner-up Excellence',
33+
description: "The runner-up team won't leave empty-handed, as they'll be showered with the 2nd prize and more fantastic surprises!",
34+
borderColor: 'border-[#37c2cc]/80',
35+
bgGradient: 'from-[#37c2cc]/15 via-[#204168]/25 to-[#0e243f]/30',
36+
textColor: 'text-[#37c2cc]',
37+
glowColor: 'shadow-[#37c2cc]/40',
38+
accentGradient: 'from-[#37c2cc] to-[#204168]',
39+
icon: '🥈',
40+
iconBg: 'bg-gradient-to-br from-[#37c2cc]/30 to-[#204168]/20',
41+
particles: 'bg-[#37c2cc]/50',
42+
rewards: ['Silver Medal', 'Cash Prize', 'Swag Pack', 'Achievement Certificate'],
43+
},
44+
{
45+
place: '3rd',
46+
title: '3rd Place',
47+
subtitle: 'Bronze Achievement',
48+
description: 'Secure the 3rd position and claim the 3rd prize, along with some special awards waiting just for you!',
49+
borderColor: 'border-[#37c2cc]/80',
50+
bgGradient: 'from-[#37c2cc]/15 via-[#204168]/25 to-[#0e243f]/30',
51+
textColor: 'text-[#37c2cc]',
52+
glowColor: 'shadow-[#37c2cc]/40',
53+
accentGradient: 'from-[#37c2cc] to-[#204168]',
54+
icon: '🥉',
55+
iconBg: 'bg-gradient-to-br from-[#37c2cc]/30 to-[#204168]/20',
56+
particles: 'bg-[#37c2cc]/50',
57+
rewards: ['Bronze Medal', 'Special Recognition', 'Swag Items', 'Participation Certificate'],
58+
},
59+
];
60+
61+
return (
62+
<div className="min-h-screen w-full bg-gradient-to-br from-[#0e243f] via-[#204168] to-[#37c2cc] relative overflow-hidden">
63+
{/* Hero-themed Background Effects */}
64+
<div className="absolute inset-0">
65+
<div className="absolute inset-0 bg-gradient-to-br from-[#0e243f]/20 via-[#204168]/15 to-[#37c2cc]/20"></div>
66+
<div className="absolute top-20 right-20 w-48 h-48 bg-[#37c2cc]/8 rounded-full blur-3xl"></div>
67+
<div className="absolute bottom-20 left-20 w-40 h-40 bg-[#204168]/12 rounded-full blur-2xl"></div>
68+
</div>
69+
70+
<div className="relative z-10 container mx-auto px-4 py-4 md:py-6">
71+
{/* Simplified Header */}
72+
<div className={`text-center mb-6 md:mb-8 transition-all duration-1000 ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-10'}`}>
73+
<div className="relative inline-block">
74+
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-white via-[#37c2cc] to-white mb-3 tracking-wider
75+
animate-pulse hover:scale-105 transition-all duration-300 cursor-default
76+
drop-shadow-[0_0_20px_rgba(55,194,204,0.5)] hover:drop-shadow-[0_0_30px_rgba(55,194,204,0.8)]">
77+
PRIZES
78+
</h1>
79+
80+
<div className="w-24 md:w-32 h-0.5 bg-gradient-to-r from-[#37c2cc] to-[#2ba8b3] mx-auto rounded-full
81+
animate-pulse"></div>
82+
</div>
83+
84+
<p className="text-white text-xs md:text-sm lg:text-base mt-3 max-w-xl mx-auto leading-relaxed font-light opacity-90">
85+
Rewards await the most innovative teams in <span className="text-[#37c2cc] font-medium">CodeRush 2025</span>
86+
</p>
87+
</div>
88+
89+
{/* Interactive Prize Cards Grid */}
90+
<div className="grid lg:grid-cols-2 gap-4 lg:gap-6 items-start max-w-6xl mx-auto">
91+
92+
{/* Prizes Section */}
93+
<div className="space-y-3 md:space-y-4">
94+
{prizes.map((prize, index) => (
95+
<div
96+
key={index}
97+
className={`group relative overflow-hidden p-4 md:p-5 rounded-xl border-2 ${prize.borderColor}
98+
bg-gradient-to-br ${prize.bgGradient} backdrop-blur-lg
99+
hover:shadow-lg ${prize.glowColor} transition-all duration-500
100+
hover:scale-[1.02] hover:border-opacity-100 transform-gpu cursor-pointer
101+
${selectedCard === index ? 'ring-2 ring-white/20 scale-[1.02]' : ''}
102+
${isLoaded ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-10'}
103+
${index === 0 ? 'border-[#37c2cc]/95 hover:shadow-[#37c2cc]/60 hover:shadow-2xl ring-2 ring-[#37c2cc]/30' : ''}
104+
${index === 1 ? 'border-[#37c2cc]/90 hover:shadow-[#37c2cc]/50 hover:shadow-2xl ring-1 ring-[#37c2cc]/20' : ''}
105+
${index === 2 ? 'border-[#37c2cc]/85 hover:shadow-[#37c2cc]/45 hover:shadow-2xl ring-1 ring-[#37c2cc]/15' : ''}`}
106+
style={{transitionDelay: `${index * 200}ms`}}
107+
onClick={() => setSelectedCard(selectedCard === index ? null : index)}
108+
onMouseEnter={() => setSelectedCard(index)}
109+
onMouseLeave={() => setSelectedCard(null)}
110+
>
111+
{/* Enhanced background for all cards */}
112+
{index === 0 && (
113+
<div className="absolute inset-0 bg-gradient-to-br from-[#37c2cc]/8 via-transparent to-[#2ba8b3]/12
114+
opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
115+
)}
116+
{index === 1 && (
117+
<div className="absolute inset-0 bg-gradient-to-br from-[#37c2cc]/5 via-transparent to-[#204168]/10
118+
opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
119+
)}
120+
{index === 2 && (
121+
<div className="absolute inset-0 bg-gradient-to-br from-[#37c2cc]/5 via-transparent to-[#204168]/10
122+
opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
123+
)}
124+
125+
{/* Content */}
126+
<div className="relative z-10">
127+
{/* Header with icon and title on same line */}
128+
<div className="flex items-center gap-3 md:gap-4 mb-3">
129+
<div className="relative">
130+
<div className={`text-3xl md:text-4xl group-hover:animate-bounce
131+
${index === 0 ? 'filter drop-shadow-[0_0_12px_rgba(55,194,204,1)]' : ''}
132+
${index === 1 ? 'filter drop-shadow-[0_0_10px_rgba(55,194,204,0.8)]' : ''}
133+
${index === 2 ? 'filter drop-shadow-[0_0_8px_rgba(55,194,204,0.7)]' : ''}`}>
134+
{prize.icon}
135+
</div>
136+
<span className={`absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-gradient-to-r ${prize.accentGradient}
137+
group-hover:w-full transition-all duration-500 rounded-full
138+
${index === 0 ? 'h-1.5 shadow-[0_0_12px_rgba(55,194,204,1)]' : ''}
139+
${index === 1 ? 'h-1 shadow-[0_0_10px_rgba(55,194,204,0.8)]' : ''}
140+
${index === 2 ? 'h-1 shadow-[0_0_8px_rgba(55,194,204,0.7)]' : ''}`}></span>
141+
</div>
142+
<div className="flex flex-col">
143+
<h3 className={`text-lg md:text-xl lg:text-2xl font-bold ${prize.textColor}
144+
group-hover:text-white transition-all duration-300
145+
${index === 0 ? 'text-[#37c2cc] drop-shadow-[0_0_10px_rgba(55,194,204,0.8)]' : ''}
146+
${index === 1 ? 'text-[#37c2cc] drop-shadow-[0_0_8px_rgba(55,194,204,0.6)]' : ''}
147+
${index === 2 ? 'text-[#37c2cc] drop-shadow-[0_0_6px_rgba(55,194,204,0.5)]' : ''}`}>
148+
{prize.title}
149+
</h3>
150+
<div className={`text-xs ${prize.textColor} opacity-75 font-medium
151+
${index === 0 ? 'text-[#37c2cc]/95' : ''}
152+
${index === 1 ? 'text-[#37c2cc]/90' : ''}
153+
${index === 2 ? 'text-[#37c2cc]/85' : ''}`}>
154+
{prize.subtitle}
155+
</div>
156+
</div>
157+
</div>
158+
159+
{/* Description */}
160+
<p className="text-white text-sm md:text-base leading-relaxed
161+
group-hover:text-white transition-colors duration-300">
162+
{prize.description}
163+
</p>
164+
</div>
165+
</div>
166+
))}
167+
</div>
168+
169+
{/* Certificate Images Showcase */}
170+
<div className={`flex justify-center lg:justify-end items-center min-h-[400px] md:min-h-[500px] transition-all duration-1000 ${
171+
isLoaded ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-10'
172+
}`} style={{transitionDelay: '600ms'}}>
173+
<div className="relative flex items-center justify-center h-full">
174+
{/* Certificate images stack - matching uploaded layout */}
175+
<div className="relative w-80 h-64 md:w-96 md:h-80">
176+
{[
177+
{
178+
src: '/Third place.png',
179+
alt: '3rd Place Certificate',
180+
rotation: -15,
181+
translateX: -30,
182+
translateY: 20,
183+
zIndex: 1
184+
},
185+
{
186+
src: '/Second place.png',
187+
alt: '2nd Place Certificate',
188+
rotation: -5,
189+
translateX: 0,
190+
translateY: 10,
191+
zIndex: 2
192+
},
193+
{
194+
src: '/First Place.png',
195+
alt: '1st Place Certificate',
196+
rotation: 8,
197+
translateX: 25,
198+
translateY: 0,
199+
zIndex: 3
200+
}
201+
].map((cert, i) => (
202+
<div
203+
key={i}
204+
className="absolute w-full h-full transition-all duration-500 hover:scale-105 cursor-pointer
205+
hover:z-10 group"
206+
style={{
207+
transform: `rotate(${cert.rotation}deg) translate(${cert.translateX}px, ${cert.translateY}px)`,
208+
zIndex: cert.zIndex,
209+
}}
210+
>
211+
<img
212+
src={cert.src}
213+
alt={cert.alt}
214+
className="w-full h-full object-contain transition-all duration-500
215+
filter drop-shadow-2xl group-hover:drop-shadow-[0_25px_50px_rgba(0,0,0,0.4)]
216+
group-hover:brightness-110"
217+
/>
218+
</div>
219+
))}
220+
</div>
221+
</div>
222+
</div>
223+
</div>
224+
225+
{/* Simplified Footer */}
226+
<div className={`text-center mt-8 md:mt-10 transition-all duration-1000 ${
227+
isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
228+
}`} style={{transitionDelay: '800ms'}}>
229+
<div className="flex justify-center space-x-2 mb-3">
230+
{[...Array(5)].map((_, i) => (
231+
<div
232+
key={i}
233+
className="w-1.5 h-1.5 rounded-full bg-gradient-to-r from-[#37c2cc] via-[#204168] to-[#37c2cc]"
234+
></div>
235+
))}
236+
</div>
237+
<div className="space-y-1">
238+
<p className="text-white/80 text-xs md:text-sm font-light">
239+
Excellence deserves recognition • Innovation deserves rewards
240+
</p>
241+
<p className="text-white/60 text-xs">
242+
🚀 <span className="text-[#37c2cc]">CodeRush 2025</span> - Where champions are made! 🚀
243+
</p>
244+
</div>
245+
</div>
246+
</div>
247+
</div>
248+
);
249+
};
250+
251+
export default PrizesInteractive;

0 commit comments

Comments
 (0)