39 lines
1.7 KiB
TypeScript
39 lines
1.7 KiB
TypeScript
import { ArrowDown } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
|
|
{/* Background Image */}
|
|
<div className="absolute inset-0 z-0">
|
|
<img src="/moon-phases-over-natural-landscape-with-stars.jpg" alt="Moon phases" className="w-full h-full object-cover opacity-20" />
|
|
<div className="absolute inset-0 bg-gradient-to-b from-background/50 via-background/80 to-background" />
|
|
</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 className="font-serif text-5xl md:text-6xl lg:text-7xl font-bold text-foreground leading-tight">
|
|
Decolonize Time
|
|
</h1>
|
|
<p className="text-xl md:text-2xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
|
|
Reclaiming natural rhythms beyond the imposed 12-60 frequency. Reconnect with the 13-20 lunar cycles that
|
|
align body and mind with Earth's flow.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
|
|
<Button asChild size="lg" className="bg-primary text-primary-foreground hover:bg-primary/90">
|
|
<a href="#systems">Explore Time Systems</a>
|
|
</Button>
|
|
<Button asChild variant="outline" size="lg">
|
|
<a href="#translator">Try Calendar Translator</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
|
|
<ArrowDown className="h-6 w-6 text-muted-foreground" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|