87 lines
3.3 KiB
TypeScript
87 lines
3.3 KiB
TypeScript
"use client"
|
|
|
|
import { ArrowDown } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { useEffect, useRef } from "react"
|
|
|
|
export function Hero() {
|
|
const titleRef = useRef<HTMLHeadingElement>(null)
|
|
|
|
useEffect(() => {
|
|
const handleMouseMove = (e: MouseEvent) => {
|
|
if (!titleRef.current) return
|
|
|
|
const rect = titleRef.current.getBoundingClientRect()
|
|
const x = (e.clientX - rect.left - rect.width / 2) / rect.width
|
|
const y = (e.clientY - rect.top - rect.height / 2) / rect.height
|
|
|
|
titleRef.current.style.transform = `
|
|
perspective(1000px)
|
|
rotateY(${x * 10}deg)
|
|
rotateX(${-y * 10}deg)
|
|
`
|
|
}
|
|
|
|
window.addEventListener("mousemove", handleMouseMove)
|
|
return () => window.removeEventListener("mousemove", handleMouseMove)
|
|
}, [])
|
|
|
|
return (
|
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
|
|
<div className="absolute inset-0 z-0">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-background to-accent/20" />
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(120,119,198,0.1),transparent_50%)]" />
|
|
|
|
{/* Floating infinity symbols */}
|
|
<div className="absolute top-1/4 left-1/4 text-9xl text-primary/10 animate-[float-drift_8s_ease-in-out_infinite]">
|
|
∞
|
|
</div>
|
|
<div className="absolute bottom-1/4 right-1/4 text-9xl text-accent/10 animate-[float-drift_10s_ease-in-out_infinite] animation-delay-2000">
|
|
∞
|
|
</div>
|
|
</div>
|
|
|
|
<div className="container relative z-10 px-4 lg:px-8 text-center">
|
|
<div className="max-w-4xl mx-auto space-y-8">
|
|
<h1
|
|
ref={titleRef}
|
|
className="font-serif text-5xl md:text-6xl lg:text-7xl font-bold text-foreground leading-tight transition-transform duration-200 ease-out"
|
|
style={{ transformStyle: "preserve-3d" }}
|
|
>
|
|
<span className="inline-block bg-gradient-to-r from-primary via-accent to-secondary bg-clip-text text-transparent">
|
|
Decolonize Time
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-xl md:text-2xl text-muted-foreground max-w-2xl mx-auto leading-relaxed warp-element">
|
|
Breaking free from the imposed 12-60 frequency. Reconnecting with the 13-20 lunar cycles through the
|
|
spiraling dance of space-time.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="warp-element bg-gradient-to-r from-primary to-accent hover:shadow-lg hover:shadow-primary/50 transition-all"
|
|
>
|
|
<a href="#systems">Enter the Vortex</a>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
size="lg"
|
|
className="warp-element border-primary/50 hover:border-accent hover:shadow-lg hover:shadow-accent/50 bg-transparent"
|
|
>
|
|
<a href="#translator">Translate Time</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce warp-element">
|
|
<ArrowDown className="h-6 w-6 text-primary" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|