54 lines
2.2 KiB
TypeScript
54 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
|
|
export function HeroSection() {
|
|
const [isVisible, setIsVisible] = useState(false)
|
|
|
|
useEffect(() => {
|
|
setIsVisible(true)
|
|
}, [])
|
|
|
|
return (
|
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden px-4">
|
|
{/* Background network lines */}
|
|
<div className="absolute inset-0 opacity-20">
|
|
<svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<pattern id="network" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
|
|
<path d="M 0 50 Q 25 25 50 50 T 100 50" stroke="oklch(0.45 0.12 110)" fill="none" strokeWidth="0.5" />
|
|
<circle cx="50" cy="50" r="2" fill="oklch(0.45 0.12 110)" />
|
|
</pattern>
|
|
</defs>
|
|
<rect width="100%" height="100%" fill="url(#network)" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div className={`relative z-10 text-center max-w-4xl transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
|
|
<div className="mb-6 text-sm tracking-[0.3em] text-muted-foreground font-mono uppercase">
|
|
{'>>>_ You made it'}
|
|
</div>
|
|
|
|
<h1 className="text-5xl md:text-7xl lg:text-8xl font-bold mb-8 font-mono mycelium-glow">
|
|
<span className="block text-balance">
|
|
myc0pun<span className="inline-block scale-x-[-1]">k</span><span className="inline-block scale-x-[-1]">z</span>
|
|
</span>
|
|
</h1>
|
|
|
|
<div className="text-lg md:text-xl text-muted-foreground mb-12 max-w-2xl mx-auto font-mono leading-relaxed">
|
|
<p className="text-balance">
|
|
{'Congratulations. You found the underground of the underground.'}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center gap-2 text-primary animate-bounce">
|
|
<div className="text-sm font-mono tracking-wider">DESCEND</div>
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|