Improved hero

This commit is contained in:
2026-02-02 13:41:46 +01:00
parent 4ec69c5127
commit f3fd59c831
2 changed files with 36 additions and 13 deletions
+2 -2
View File
@@ -42,7 +42,7 @@ const Landing = () => {
return (
<div className="min-h-screen">
{/* Hero Section */}
<section className="relative overflow-hidden h-svh flex flex-col items-center justify-center">
<section className="pt-16 relative overflow-hidden h-svh flex flex-col items-center justify-center">
{/* Background gradient */}
<div
className="absolute inset-0 pointer-events-none"
@@ -52,7 +52,7 @@ const Landing = () => {
}}
/>
<div className="container mx-auto px-6 relative pt-20">
<div className="container mx-auto px-6 relative">
<div className="max-w-4xl mx-auto text-center">
{/* Headline */}
<h1
+34 -11
View File
@@ -7,12 +7,13 @@ const Navbar = () => {
<div className="container mx-auto px-6">
<div className="flex h-16 items-center justify-between">
{/* Logo */}
<Link
href="/"
className="flex items-center gap-2 group"
>
<Link href="/" className="flex items-center gap-2 group">
<div className="relative">
<img alt="Logo" src="/dev-run.svg" className="h-8 w-8 text-primary transition-transform duration-300 group-hover:scale-110" />
<img
alt="Logo"
src="/dev-run.svg"
className="h-8 w-8 text-primary transition-transform duration-300 group-hover:scale-110"
/>
<div className="absolute inset-0 bg-primary/30 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
</div>
<span className="text-xl font-bold text-foreground">
@@ -22,19 +23,31 @@ const Navbar = () => {
{/* Navigation Links */}
<div className="hidden md:flex items-center gap-1">
<Link href="/problems" className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 text-muted-foreground hover:text-foreground hover:bg-secondary">
<Link
href="/problems"
className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 text-muted-foreground hover:text-foreground hover:bg-secondary"
>
<Zap className="h-4 w-4" />
Problems
</Link>
<Link href="/run" className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 text-muted-foreground hover:text-foreground hover:bg-secondary">
<Link
href="/run"
className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 text-muted-foreground hover:text-foreground hover:bg-secondary"
>
<Timer className="h-4 w-4" />
Run
</Link>
<Link href="/leaderboards" className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 text-muted-foreground hover:text-foreground hover:bg-secondary">
<Link
href="/leaderboards"
className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 text-muted-foreground hover:text-foreground hover:bg-secondary"
>
<Trophy className="h-4 w-4" />
Leaderboards
</Link>
<Link href="/profile" className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 text-muted-foreground hover:text-foreground hover:bg-secondary">
<Link
href="/profile"
className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 text-muted-foreground hover:text-foreground hover:bg-secondary"
>
<User className="h-4 w-4" />
Profile
</Link>
@@ -48,8 +61,18 @@ const Navbar = () => {
{/* Mobile menu button */}
<button className="md:hidden p-2 text-muted-foreground hover:text-foreground">
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
<svg
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
</div>