Skip to content

Commit cf04f45

Browse files
ramtejvignaramtejvigna
committed
Responsive UI
1 parent f78ee07 commit cf04f45

File tree

7 files changed

+230
-184
lines changed

7 files changed

+230
-184
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<!-- Bootstrap-->
77

88

9-
9+
<link rel="icon" href="./public/favicon.ico" />
1010

1111
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1212
<title>HackOverflow 2K25</title>

‎public/favicon.ico‎

15 KB
Binary file not shown.

‎src/components/HeroSection.tsx‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const HeroSection = () => {
3737
return (
3838
<div
3939
id="home"
40-
className="min-h-screen flex items-center justify-between px-4 md:px-40 gap-8 md:gap-16 relative overflow-hidden pt-5 pb-5"
40+
className="min-h-screen flex flex-col lg:flex-row items-center justify-center lg:justify-between px-4 sm:px-6 md:px-8 lg:px-16 xl:px-40 gap-8 md:gap-12 lg:gap-16 relative overflow-hidden py-8 lg:py-5"
4141
>
4242
<div className="absolute inset-0">
4343
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-background to-accent/5" />
@@ -51,54 +51,54 @@ const HeroSection = () => {
5151
</svg>
5252
</div>
5353

54-
<div className="absolute top-32 left-12 w-24 h-24 bg-gradient-to-br from-primary to-primary/40 rounded-full blur-3xl animate-pulse opacity-30" />
55-
<div className="absolute bottom-40 right-20 w-32 h-32 bg-gradient-to-br from-accent to-accent/40 rounded-2xl blur-2xl opacity-20 animate-float" />
54+
<div className="absolute top-20 sm:top-32 left-4 sm:left-8 lg:left-12 w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 bg-gradient-to-br from-primary to-primary/40 rounded-full blur-2xl sm:blur-3xl animate-pulse opacity-30" />
55+
<div className="absolute bottom-20 sm:bottom-32 lg:bottom-40 right-4 sm:right-12 lg:right-20 w-20 h-20 sm:w-28 sm:h-28 lg:w-32 lg:h-32 bg-gradient-to-br from-accent to-accent/40 rounded-2xl blur-xl sm:blur-2xl opacity-20 animate-float" />
5656

57-
<div className="flex-1 z-10 flex flex-col justify-center">
58-
<div className="animate-slide-up space-y-6">
59-
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/30 bg-primary/5 backdrop-blur-sm w-fit">
60-
<Code2 className="w-4 h-4 text-primary animate-bounce" style={{ animationDelay: "0s" }} />
57+
<div className="flex-1 z-10 flex flex-col justify-center text-center lg:text-left">
58+
<div className="animate-slide-up space-y-4 sm:space-y-6">
59+
<div className="inline-flex items-center gap-2 px-3 sm:px-4 py-2 rounded-full border border-primary/30 bg-primary/5 backdrop-blur-sm w-fit mx-auto lg:mx-0">
60+
<Code2 className="w-3 h-3 sm:w-4 sm:h-4 text-primary animate-bounce" style={{ animationDelay: "0s" }} />
6161
<span className="text-xs font-mono text-primary font-semibold tracking-widest">HACKATHON 2K25</span>
6262
<Zap className="w-3 h-3 text-accent" />
6363
</div>
6464

6565
<div>
66-
<h1 className="text-6xl md:text-8xl lg:text-9xl leading-tight font-black tracking-tighter">
66+
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl leading-tight font-black tracking-tighter">
6767
<span className="bg-clip-text text-transparent bg-gradient-to-r from-foreground via-primary to-foreground animate-gradient">
6868
HackOverflow
6969
</span>
7070
</h1>
71-
<div className="text-3xl md:text-5xl lg:text-7xl font-black text-primary mt-3 tracking-tight">2K25</div>
71+
<div className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl 2xl:text-7xl font-black text-primary mt-2 sm:mt-3 tracking-tight">2K25</div>
7272
</div>
7373
</div>
7474

75-
<div className="animate-slide-up mt-10" style={{ animationDelay: "0.2s" }}>
76-
<p className="text-lg md:text-xl text-muted-foreground max-w-2xl leading-relaxed font-light">
75+
<div className="animate-slide-up mt-6 sm:mt-8 lg:mt-10" style={{ animationDelay: "0.2s" }}>
76+
<p className="text-base sm:text-lg md:text-xl text-muted-foreground max-w-2xl leading-relaxed font-light mx-auto lg:mx-0">
7777
The ultimate hackathon for developers who innovate. Build groundbreaking solutions, collaborate with
7878
brilliant minds, and compete for premium prizes.
7979
</p>
8080
</div>
8181

82-
<div className="animate-slide-up mt-12" style={{ animationDelay: "0.4s" }}>
83-
<div className="grid grid-cols-3 gap-4 md:gap-6">
82+
<div className="animate-slide-up mt-8 sm:mt-10 lg:mt-12" style={{ animationDelay: "0.4s" }}>
83+
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4 md:gap-6 max-w-lg sm:max-w-none mx-auto lg:mx-0">
8484
{[
8585
{ icon: Calendar, label: "Duration", value: "24H" },
8686
{ icon: Users, label: "Hackers", value: "500+" },
8787
{ icon: Trophy, label: "Prizes", value: "35K" },
8888
].map((stat, idx) => (
8989
<div
9090
key={stat.label}
91-
className="group relative overflow-hidden rounded-xl border border-border/40 bg-card/30 backdrop-blur-md p-5 hover:border-primary/60 transition-all duration-300 hover:bg-card/50"
91+
className="group relative overflow-hidden rounded-xl border border-border/40 bg-card/30 backdrop-blur-md p-4 sm:p-5 hover:border-primary/60 transition-all duration-300 hover:bg-card/50"
9292
style={{
9393
animation: `slide-up 0.6s ease-out ${0.5 + idx * 0.1}s forwards`,
9494
opacity: 0,
9595
}}
9696
>
9797
<div className="absolute inset-0 bg-gradient-to-br from-primary/10 to-primary/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
98-
<div className="relative flex flex-col gap-2">
98+
<div className="relative flex flex-col sm:flex-col gap-2 items-center sm:items-start text-center sm:text-left">
9999
<stat.icon className="w-5 h-5 text-primary" />
100100
<div className="flex flex-col gap-1">
101-
<span className="text-sm font-mono text-primary font-bold">{stat.value}</span>
101+
<span className="text-sm sm:text-sm font-mono text-primary font-bold">{stat.value}</span>
102102
<span className="text-xs text-muted-foreground font-medium uppercase tracking-wide">
103103
{stat.label}
104104
</span>
@@ -109,31 +109,31 @@ const HeroSection = () => {
109109
</div>
110110
</div>
111111

112-
<div className="animate-slide-up mt-16" style={{ animationDelay: "0.6s" }}>
113-
<div className="flex items-center gap-3 mb-8">
114-
<Clock className="w-5 h-5 text-primary animate-spin" style={{ animationDuration: "3s" }} />
112+
<div className="animate-slide-up mt-10 sm:mt-12 lg:mt-16" style={{ animationDelay: "0.6s" }}>
113+
<div className="flex items-center justify-center lg:justify-start gap-3 mb-6 sm:mb-8">
114+
<Clock className="w-4 h-4 sm:w-5 sm:h-5 text-primary animate-spin" style={{ animationDuration: "3s" }} />
115115
<span className="text-xs font-mono text-muted-foreground font-bold uppercase tracking-widest">
116116
Event Countdown
117117
</span>
118118
</div>
119-
<div className="flex gap-3 md:gap-4">
119+
<div className="flex gap-2 sm:gap-3 md:gap-4 justify-center lg:justify-start">
120120
{Object.entries(timeLeft).map(([unit, value], idx) => (
121121
<div
122122
key={unit}
123-
className="relative flex-1 md:flex-none group"
123+
className="relative flex-1 max-w-[70px] sm:max-w-[80px] md:flex-none group"
124124
style={{
125125
animation: `scale-in 0.6s ease-out ${0.7 + idx * 0.1}s forwards`,
126126
opacity: 0,
127127
}}
128128
>
129129
<div className="absolute inset-0 bg-gradient-to-br from-primary/40 to-primary/10 rounded-xl blur-xl opacity-0 group-hover:opacity-100 transition-all duration-500" />
130-
<div className="relative bg-gradient-to-br from-card/60 to-card/30 border border-primary/30 backdrop-blur-xl rounded-xl p-3 md:p-6 min-w-[55px] md:min-w-[85px] text-center hover:border-primary/70 transition-all duration-300 hover:shadow-2xl hover:shadow-primary/30 hover:from-card/80 hover:to-card/50 group-hover:scale-110">
131-
<div className="flex flex-col items-center gap-3">
132-
<div className="text-2xl md:text-4xl font-black text-primary font-mono tracking-tighter">
130+
<div className="relative bg-gradient-to-br from-card/60 to-card/30 border border-primary/30 backdrop-blur-xl rounded-xl p-2 sm:p-3 md:p-6 min-w-[55px] sm:min-w-[65px] md:min-w-[85px] text-center hover:border-primary/70 transition-all duration-300 hover:shadow-2xl hover:shadow-primary/30 hover:from-card/80 hover:to-card/50 group-hover:scale-110">
131+
<div className="flex flex-col items-center gap-2 sm:gap-3">
132+
<div className="text-xl sm:text-2xl md:text-4xl font-black text-primary font-mono tracking-tighter">
133133
{String(value).padStart(2, "0")}
134134
</div>
135135
<div className="h-px w-full bg-gradient-to-r from-transparent via-primary/40 to-transparent" />
136-
<div className="text-[10px] md:text-xs font-mono text-muted-foreground font-bold uppercase tracking-widest">
136+
<div className="text-[9px] sm:text-[10px] md:text-xs font-mono text-muted-foreground font-bold uppercase tracking-widest">
137137
{unit}
138138
</div>
139139
</div>
@@ -144,28 +144,28 @@ const HeroSection = () => {
144144
</div>
145145

146146
{/* Enhanced button section with improved interactions */}
147-
<div className="animate-slide-up flex flex-col sm:flex-row gap-4 mt-12" style={{ animationDelay: "0.8s" }}>
147+
<div className="animate-slide-up flex flex-col sm:flex-row gap-3 sm:gap-4 mt-8 sm:mt-10 lg:mt-12 justify-center lg:justify-start" style={{ animationDelay: "0.8s" }}>
148148
<button
149149
onMouseEnter={() => setIsHovering("register")}
150150
onMouseLeave={() => setIsHovering(null)}
151151
onClick={() => navigate('/register')}
152-
className="group relative overflow-hidden rounded-lg px-8 py-2 bg-primary hover:bg-primary/85 text-primary-foreground font-bold text-lg transition-all duration-300 hover:shadow-2xl hover:shadow-primary/50 active:scale-95"
152+
className="group relative overflow-hidden rounded-lg px-6 sm:px-8 py-3 sm:py-4 bg-primary hover:bg-primary/85 text-primary-foreground font-bold text-base sm:text-lg transition-all duration-300 hover:shadow-2xl hover:shadow-primary/50 active:scale-95"
153153
>
154154
{/* Animated background gradient overlay */}
155155
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700" />
156156

157157
<span className="relative z-10 flex items-center justify-center gap-2">
158158
Register Now
159159
<ArrowRight
160-
className={`w-5 h-5 transition-all duration-300 ${isHovering === "register" ? "translate-x-2" : ""}`}
160+
className={`w-4 h-4 sm:w-5 sm:h-5 transition-all duration-300 ${isHovering === "register" ? "translate-x-2" : ""}`}
161161
/>
162162
</span>
163163
</button>
164164

165165
<button
166166
onMouseEnter={() => setIsHovering("learn")}
167167
onMouseLeave={() => setIsHovering(null)}
168-
className="group relative overflow-hidden rounded-lg px-8 py-2 border-2 border-primary/50 text-primary hover:border-primary/100 font-semibold text-lg bg-transparent backdrop-blur-sm transition-all duration-300 hover:bg-primary/10 hover:shadow-xl hover:shadow-primary/20 active:scale-95"
168+
className="group relative overflow-hidden rounded-lg px-6 sm:px-8 py-3 sm:py-4 border-2 border-primary/50 text-primary hover:border-primary/100 font-semibold text-base sm:text-lg bg-transparent backdrop-blur-sm transition-all duration-300 hover:bg-primary/10 hover:shadow-xl hover:shadow-primary/20 active:scale-95"
169169
>
170170
{/* Animated border glow */}
171171
<div className="absolute inset-0 bg-gradient-to-r from-primary/0 via-primary/10 to-primary/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg" />
@@ -175,22 +175,22 @@ const HeroSection = () => {
175175
</div>
176176
</div>
177177

178-
<div className="flex-1 z-10 hidden lg:flex animate-scale-in" style={{ animationDelay: "1s" }}>
178+
<div className="flex-1 z-10 hidden md:flex lg:flex animate-scale-in max-w-lg lg:max-w-none mx-auto lg:mx-0" style={{ animationDelay: "1s" }}>
179179
<div className="relative w-full">
180180
<div className="animate-float">
181181
<div className="relative group">
182-
<div className="absolute inset-0 bg-gradient-to-br from-primary/30 to-accent/10 rounded-3xl blur-3xl group-hover:blur-4xl transition-all duration-500 opacity-60" />
182+
<div className="absolute inset-0 bg-gradient-to-br from-primary/30 to-accent/10 rounded-2xl sm:rounded-3xl blur-2xl sm:blur-3xl group-hover:blur-3xl sm:group-hover:blur-4xl transition-all duration-500 opacity-60" />
183183
<img
184184
src="/HS1.webp"
185185
alt="HackOverflow 2k25 - Innovation and Collaboration"
186-
className="relative rounded-3xl shadow-2xl border border-primary/30 backdrop-blur-sm w-full hover:scale-110 hover:border-primary/60 transition-all duration-500"
186+
className="relative rounded-2xl sm:rounded-3xl shadow-2xl border border-primary/30 backdrop-blur-sm w-full hover:scale-105 lg:hover:scale-110 hover:border-primary/60 transition-all duration-500"
187187
/>
188188
</div>
189189
</div>
190190

191-
<div className="absolute -top-3 -right-3 w-6 h-6 bg-primary rounded-full animate-pulse shadow-lg shadow-primary/60" />
191+
<div className="absolute -top-2 sm:-top-3 -right-2 sm:-right-3 w-4 h-4 sm:w-6 sm:h-6 bg-primary rounded-full animate-pulse shadow-lg shadow-primary/60" />
192192
<div
193-
className="absolute -bottom-3 -left-3 w-5 h-5 bg-accent rounded-full animate-pulse shadow-lg shadow-accent/60"
193+
className="absolute -bottom-2 sm:-bottom-3 -left-2 sm:-left-3 w-3 h-3 sm:w-5 sm:h-5 bg-accent rounded-full animate-pulse shadow-lg shadow-accent/60"
194194
style={{ animationDelay: "0.5s" }}
195195
/>
196196
</div>

‎src/components/Navbar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,11 +96,11 @@ const Navbar = ({ className = "" }) => {
9696
</Button>
9797
) : (
9898
<div className="flex items-center space-x-3">
99-
<Link to="/login">
99+
{/* <Link to="/login">
100100
<Button variant="outline" className="text-white bg-primary hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl cursor-pointer">
101101
Login
102102
</Button>
103-
</Link>
103+
</Link> */}
104104
<Link to="/register">
105105
<Button className="bg-gradient-to-r from-primary to-secondary hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl cursor-pointer">
106106
Register
@@ -156,11 +156,11 @@ const Navbar = ({ className = "" }) => {
156156
</Button>
157157
) : (
158158
<>
159-
<Link to="/login">
159+
{/* <Link to="/login">
160160
<Button variant="outline" className="w-full bg-transparent">
161161
Login
162162
</Button>
163-
</Link>
163+
</Link> */}
164164
<Link to="/register">
165165
<Button className="w-full bg-gradient-to-r from-primary to-secondary">Register Now</Button>
166166
</Link>

0 commit comments

Comments
 (0)