Skip to content

Commit 38b6e24

Browse files
CherukuriPavanKumarCherukuriPavanKumar
committed
Premium website redesign with glassmorphism, gradient effects, and enhanced UI
1 parent c9e399d commit 38b6e24

10 files changed

Lines changed: 650 additions & 423 deletions

File tree

‎app/globals.css‎

Lines changed: 85 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,103 @@
1-
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@700&display=swap");
1+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap");
22
@import "tailwindcss";
33
@tailwind base;
44
@tailwind components;
55
@tailwind utilities;
66

7+
/* Design System Tokens */
78
:root {
8-
--background: #ffffff;
9-
--foreground: #171717;
9+
/* Colors */
10+
--bg-primary: #000000;
11+
--bg-secondary: #0a0a0a;
12+
--bg-tertiary: #111111;
13+
14+
--surface-primary: rgba(20, 20, 22, 0.6);
15+
--surface-elevated: rgba(30, 30, 32, 0.8);
16+
--surface-card: rgba(25, 25, 28, 0.95);
17+
18+
--border-subtle: rgba(255, 255, 255, 0.08);
19+
--border-default: rgba(255, 255, 255, 0.12);
20+
--border-strong: rgba(255, 255, 255, 0.18);
21+
22+
--text-primary: #ffffff;
23+
--text-secondary: rgba(255, 255, 255, 0.7);
24+
--text-tertiary: rgba(255, 255, 255, 0.5);
25+
26+
--accent-primary: #3b82f6;
27+
--accent-hover: #2563eb;
28+
--success: #10b981;
29+
--warning: #f59e0b;
30+
31+
/* Spacing Scale */
32+
--space-unit: 4px;
33+
34+
/* Shadows */
35+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
36+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
37+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
38+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
39+
--shadow-glow: 0 0 40px rgba(59, 130, 246, 0.3);
1040
}
1141

1242
@theme inline {
13-
--color-background: var(--background);
14-
--color-foreground: var(--foreground);
1543
--font-mono: var(--font-geist-mono);
1644
}
1745

18-
@media (prefers-color-scheme: dark) {
19-
:root {
20-
--background: #0a0a0a;
21-
--foreground: #ededed;
22-
}
46+
* {
47+
box-sizing: border-box;
48+
}
49+
50+
html {
51+
scroll-behavior: smooth;
52+
scroll-padding-top: 80px;
2353
}
2454

2555
body {
26-
background: var(--background);
56+
background: var(--bg-primary);
2757
margin: 0;
2858
padding: 0;
29-
color: var(--forseground);
30-
font-family: Arial, Helvetica, sans-serif;
59+
color: var(--text-primary);
60+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
61+
-webkit-font-smoothing: antialiased;
62+
-moz-osx-font-smoothing: grayscale;
63+
overflow-x: hidden;
64+
}
65+
66+
/* Custom Scrollbar */
67+
::-webkit-scrollbar {
68+
width: 8px;
69+
height: 8px;
70+
}
71+
72+
::-webkit-scrollbar-track {
73+
background: var(--bg-secondary);
74+
}
75+
76+
::-webkit-scrollbar-thumb {
77+
background: var(--border-strong);
78+
border-radius: 4px;
79+
}
80+
81+
::-webkit-scrollbar-thumb:hover {
82+
background: rgba(255, 255, 255, 0.25);
83+
}
84+
85+
/* Selection */
86+
::selection {
87+
background-color: var(--accent-primary);
88+
color: white;
89+
}
90+
91+
/* Animations */
92+
@keyframes shimmer {
93+
0% {
94+
transform: translateX(-100%);
95+
}
96+
100% {
97+
transform: translateX(100%);
98+
}
99+
}
100+
101+
.animate-shimmer {
102+
animation: shimmer 2s infinite;
31103
}

‎app/page.js‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,26 @@ import DarkVeil from "@/components/background.jsx";
99

1010
export default function Home() {
1111
return (
12-
<main className="text-white min-h-screen">
12+
<main className="text-white min-h-screen relative">
1313
<Navbar />
14-
{/* <DarkVeil /> */}
15-
14+
1615
<Hero />
1716

18-
<div className="px-4 md:px-20 space-y-28 mt-20 pb-20">
19-
<About />
20-
<ComSpons />
21-
<Register />
22-
{/* <ProbStmts /> */}
17+
{/* Content Container with consistent spacing */}
18+
<div className="relative">
19+
{/* Gradient separators for visual hierarchy */}
20+
<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
21+
22+
<div className="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
23+
<div className="space-y-32 py-24">
24+
<About />
25+
<ComSpons />
26+
<Register />
27+
{/* <ProbStmts /> */}
28+
</div>
29+
</div>
2330
</div>
31+
2432
<Footer />
2533
</main>
2634
);

‎components/About.jsx‎

Lines changed: 117 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,131 @@
11
export default function HackathonAboutSection() {
2+
const highlights = [
3+
{
4+
icon: <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>,
5+
label: "Cash Prizes",
6+
value: "₹5,000 • ₹3,000 • ₹1,000",
7+
color: "text-green-400"
8+
},
9+
{
10+
icon: <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>,
11+
label: "Free Entry",
12+
value: "No registration fee",
13+
color: "text-blue-400"
14+
},
15+
{
16+
icon: <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" /></svg>,
17+
label: "Prizes",
18+
value: "Goodies & swag",
19+
color: "text-purple-400"
20+
},
21+
{
22+
icon: <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>,
23+
label: "Certificates",
24+
value: "For all participants",
25+
color: "text-orange-400"
26+
},
27+
];
28+
29+
const expectations = [
30+
{
31+
icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /></svg>,
32+
label: "Meals & refreshments throughout the event"
33+
},
34+
{
35+
icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>,
36+
label: "24 hours of non-stop coding and innovation"
37+
},
38+
{
39+
icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>,
40+
label: "Mentorship from industry experts"
41+
},
42+
{
43+
icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>,
44+
label: "Network with like-minded developers"
45+
},
46+
];
47+
248
return (
3-
<section className="text-gray-200 py-16">
4-
<div className="mx-auto max-w-6xl px-6">
5-
{/* Heading + intro */}
6-
<div className="mx-auto mb-14 max-w-2xl text-center">
7-
<h2 className="mb-4 text-3xl font-semibold text-white md:text-4xl">
8-
About the Hackathon
9-
</h2>
10-
<p className="text-sm text-gray-300 md:text-base">
11-
EPOCH 4.0 Hackathon challenges teams to analyze real problem
12-
statements and build working application prototypes in just 24
13-
hours. The focus is on creativity, usability, functionality, and a
14-
strong user experience.
15-
</p>
49+
<section id="about" className="relative">
50+
{/* Section Header */}
51+
<div className="text-center mb-16">
52+
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-6">
53+
<div className="w-1.5 h-1.5 bg-blue-400 rounded-full animate-pulse"></div>
54+
<span className="text-sm font-medium text-white/70">Event Details</span>
1655
</div>
56+
57+
<h2 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-6">
58+
<span className="bg-gradient-to-br from-white to-white/60 bg-clip-text text-transparent">
59+
About the Hackathon
60+
</span>
61+
</h2>
62+
63+
<p className="text-lg text-white/60 max-w-2xl mx-auto leading-relaxed">
64+
EPOCH 4.0 Hackathon challenges teams to analyze real problem statements
65+
and build working prototypes in 24 hours with focus on creativity,
66+
usability, and user experience.
67+
</p>
68+
</div>
1769

18-
{/* Cards */}
19-
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
20-
{/* Event Highlights */}
21-
<div className="rounded-xl border border-[#1f2628] bg-[#0d1112] p-6">
22-
<div className="mb-5 flex items-center gap-3">
23-
<img
24-
src="/icons/Lightbulb.svg"
25-
alt=""
26-
className="h-6 w-6 shrink-0"
27-
/>
28-
<h3 className="text-lg font-medium text-white">
29-
Event Highlights
30-
</h3>
70+
{/* Content Grid */}
71+
<div className="grid lg:grid-cols-2 gap-8">
72+
73+
{/* Event Highlights */}
74+
<div className="group relative">
75+
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-3xl blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
76+
77+
<div className="relative h-full bg-gradient-to-br from-white/[0.07] to-white/[0.02] backdrop-blur-xl rounded-3xl p-8 border border-white/10 hover:border-white/20 transition-all duration-300 shadow-2xl">
78+
<div className="flex items-center gap-3 mb-8">
79+
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500/20 to-blue-600/20 flex items-center justify-center border border-blue-500/20">
80+
<svg className="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
81+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
82+
</svg>
83+
</div>
84+
<h3 className="text-xl font-semibold text-white">Event Highlights</h3>
3185
</div>
3286

33-
<ul className="space-y-4">
34-
<li className="flex items-center gap-3">
35-
<img src="/icons/$.svg" className="h-5 w-5 shrink-0" alt="" />
36-
<span className="text-sm">
37-
Cash prizes:{" "}
38-
<span className="font-semibold text-white">
39-
₹5,000 • ₹3,000 • ₹1,000
40-
</span>
41-
</span>
42-
</li>
43-
44-
<li className="flex items-center gap-3">
45-
<img
46-
src="/icons/Group.svg"
47-
className="h-5 w-5 shrink-0"
48-
alt=""
49-
/>
50-
<span className="text-sm">Free Registration</span>
51-
</li>
52-
53-
<li className="flex items-center gap-3">
54-
<img
55-
src="/icons/Gifts.svg"
56-
className="h-5 w-5 shrink-0"
57-
alt=""
58-
/>
59-
<span className="text-sm">Goodies and exciting prizes</span>
60-
</li>
61-
62-
<li className="flex items-center gap-3">
63-
<img
64-
src="/icons/Task%20alt.svg"
65-
className="h-5 w-5 shrink-0"
66-
alt=""
67-
/>
68-
<span className="text-sm">Certificates for participants</span>
69-
</li>
70-
</ul>
87+
<div className="grid gap-6">
88+
{highlights.map((item, i) => (
89+
<div key={i} className="flex items-start gap-4 group/item">
90+
<div className="w-12 h-12 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center shrink-0 group-hover/item:bg-white/10 transition-colors">
91+
<span className={item.color}>{item.icon}</span>
92+
</div>
93+
<div className="flex-1 pt-1">
94+
<div className="font-semibold text-white mb-1">{item.label}</div>
95+
<div className="text-sm text-white/60">{item.value}</div>
96+
</div>
97+
</div>
98+
))}
99+
</div>
71100
</div>
101+
</div>
72102

73-
{/* What to Expect */}
74-
<div className="rounded-xl border border-[#1f2628] bg-[#0d1112] p-6">
75-
<div className="mb-5 flex items-center gap-3">
76-
<img
77-
src="/icons/Award%20star.svg"
78-
alt=""
79-
className="h-6 w-6 shrink-0"
80-
/>
81-
<h3 className="text-lg font-medium text-white">What to Expect</h3>
103+
{/* What to Expect */}
104+
<div className="group relative">
105+
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-3xl blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
106+
107+
<div className="relative h-full bg-gradient-to-br from-white/[0.07] to-white/[0.02] backdrop-blur-xl rounded-3xl p-8 border border-white/10 hover:border-white/20 transition-all duration-300 shadow-2xl">
108+
<div className="flex items-center gap-3 mb-8">
109+
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-600/20 flex items-center justify-center border border-purple-500/20">
110+
<svg className="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
111+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
112+
</svg>
113+
</div>
114+
<h3 className="text-xl font-semibold text-white">What to Expect</h3>
82115
</div>
83116

84-
<ul className="space-y-4">
85-
{[
86-
"Meals and refreshments throughout",
87-
"24 hours of non-stop coding and innovation",
88-
"Mentorship from industry experts",
89-
"Networking with like-minded developers",
90-
].map((text) => (
91-
<li key={text} className="flex items-center gap-3">
92-
<img
93-
src="/icons/Task%20alt.svg"
94-
className="h-5 w-5 shrink-0"
95-
alt=""
96-
/>
97-
<span className="text-sm">{text}</span>
98-
</li>
117+
<div className="space-y-5">
118+
{expectations.map((item, i) => (
119+
<div key={i} className="flex items-start gap-4 group/item">
120+
<div className="w-10 h-10 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center shrink-0 group-hover/item:bg-white/10 group-hover/item:scale-110 transition-all">
121+
<span className="text-white">{item.icon}</span>
122+
</div>
123+
<div className="flex-1 pt-2">
124+
<span className="text-white">{item.label}</span>
125+
</div>
126+
</div>
99127
))}
100-
</ul>
128+
</div>
101129
</div>
102130
</div>
103131
</div>

0 commit comments

Comments
 (0)