82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
export default function HeroSection() {
|
|
return (
|
|
<section className="min-h-screen flex flex-col items-center justify-center relative px-4 overflow-hidden">
|
|
{/* Background with water ripple SVG filter */}
|
|
<svg className="absolute inset-0 w-full h-full" style={{ zIndex: 0 }}>
|
|
<defs>
|
|
<filter id="hero-ripple">
|
|
<feTurbulence
|
|
type="fractalNoise"
|
|
baseFrequency="0.01 0.02"
|
|
numOctaves={3}
|
|
seed={5}
|
|
result="turbulence"
|
|
>
|
|
<animate
|
|
attributeName="seed"
|
|
from="0"
|
|
to="200"
|
|
dur="20s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</feTurbulence>
|
|
<feDisplacementMap
|
|
in="SourceGraphic"
|
|
in2="turbulence"
|
|
scale={8}
|
|
xChannelSelector="R"
|
|
yChannelSelector="G"
|
|
/>
|
|
</filter>
|
|
</defs>
|
|
<rect
|
|
width="100%"
|
|
height="100%"
|
|
fill="url(#hero-gradient)"
|
|
className="water-distortion"
|
|
filter="url(#hero-ripple)"
|
|
/>
|
|
<defs>
|
|
<linearGradient id="hero-gradient" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stopColor="#0a0a0a" />
|
|
<stop offset="40%" stopColor="#1a1a2e" />
|
|
<stop offset="70%" stopColor="#16213e" />
|
|
<stop offset="100%" stopColor="#0a0a0a" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
|
|
<div className="absolute inset-0 bg-gradient-to-b from-void via-nothing/50 to-void opacity-90" />
|
|
|
|
<div className="relative z-10 text-center max-w-4xl">
|
|
<p className="text-sloth/50 text-sm tracking-[0.3em] uppercase mb-6 animate-slow-pulse">
|
|
everything flows
|
|
</p>
|
|
|
|
<h1 className="font-marker text-6xl md:text-8xl lg:text-9xl mb-6 wobble-1">
|
|
<span className="text-flow-green">Flow</span>
|
|
<span className="text-zen/90">Fi</span>
|
|
<span className="text-zen/20">.</span>
|
|
</h1>
|
|
|
|
<p className="font-caveat text-2xl md:text-3xl text-zen/50 mb-12">
|
|
Everything flows. The question is: <span className="text-flow-green/80">where?</span>
|
|
</p>
|
|
|
|
<a
|
|
href="https://nofi.lol"
|
|
className="inline-block border border-zen/10 px-6 py-3 text-sm text-zen/30 hover:text-flow-green/60 hover:border-flow-green/30 transition-all duration-1000"
|
|
>
|
|
← back to NoFi
|
|
</a>
|
|
|
|
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-drift">
|
|
<span className="text-zen/15 text-sm">scroll to flow ↓</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|