89 lines
3.2 KiB
TypeScript
89 lines
3.2 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">
|
|
{/* Animated gradient ocean background */}
|
|
<div
|
|
className="absolute inset-0 animate-flow-gradient"
|
|
style={{
|
|
backgroundSize: '400% 400%',
|
|
backgroundImage: 'radial-gradient(ellipse at 20% 50%, #0f2847 0%, #0c1e3a 30%, #050d1a 70%), radial-gradient(ellipse at 80% 20%, #143561 0%, transparent 50%)',
|
|
}}
|
|
/>
|
|
|
|
{/* Subtle water ripple SVG */}
|
|
<svg className="absolute inset-0 w-full h-full opacity-30" style={{ zIndex: 1 }}>
|
|
<defs>
|
|
<filter id="hero-ripple">
|
|
<feTurbulence
|
|
type="fractalNoise"
|
|
baseFrequency="0.008 0.015"
|
|
numOctaves={4}
|
|
seed={5}
|
|
result="turbulence"
|
|
>
|
|
<animate
|
|
attributeName="seed"
|
|
from="0"
|
|
to="100"
|
|
dur="30s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</feTurbulence>
|
|
<feDisplacementMap
|
|
in="SourceGraphic"
|
|
in2="turbulence"
|
|
scale={12}
|
|
xChannelSelector="R"
|
|
yChannelSelector="G"
|
|
/>
|
|
</filter>
|
|
<linearGradient id="hero-water" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stopColor="#2dd4bf" stopOpacity="0.08" />
|
|
<stop offset="50%" stopColor="#5eead4" stopOpacity="0.04" />
|
|
<stop offset="100%" stopColor="#2dd4bf" stopOpacity="0.06" />
|
|
</linearGradient>
|
|
</defs>
|
|
<rect
|
|
width="100%"
|
|
height="100%"
|
|
fill="url(#hero-water)"
|
|
className="water-distortion"
|
|
filter="url(#hero-ripple)"
|
|
/>
|
|
</svg>
|
|
|
|
{/* Soft radial glow */}
|
|
<div
|
|
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full animate-breathe"
|
|
style={{
|
|
background: 'radial-gradient(circle, rgba(45, 212, 191, 0.08) 0%, transparent 70%)',
|
|
}}
|
|
/>
|
|
|
|
<div className="relative z-10 text-center max-w-4xl">
|
|
<p className="text-mist/60 text-sm tracking-[0.4em] uppercase mb-8 animate-glow-pulse font-light">
|
|
everything flows
|
|
</p>
|
|
|
|
<h1 className="font-sans font-extralight text-7xl md:text-9xl lg:text-[10rem] mb-8 tracking-tighter leading-none">
|
|
<span className="text-flow bg-gradient-to-r from-flow-light via-flow to-glow bg-clip-text text-transparent animate-flow-gradient" style={{ backgroundSize: '200% 200%' }}>
|
|
Flow
|
|
</span>
|
|
<span className="text-foam/80">Fi</span>
|
|
<span className="text-flow/20">.</span>
|
|
</h1>
|
|
|
|
<p className="font-caveat text-2xl md:text-3xl text-foam/45 mb-14">
|
|
Everything flows. The question is: <span className="text-flow/70">where?</span>
|
|
</p>
|
|
|
|
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-current">
|
|
<span className="text-foam/15 text-sm font-light tracking-wide">scroll to flow ↓</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|