71 lines
3.1 KiB
TypeScript
71 lines
3.1 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import { Usb } from "lucide-react"
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-black text-white">
|
|
{/* Dramatic grid background */}
|
|
<div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff08_1px,transparent_1px),linear-gradient(to_bottom,#ffffff08_1px,transparent_1px)] bg-[size:4rem_4rem]" />
|
|
|
|
<div className="container relative z-10 px-4 py-20">
|
|
<div className="max-w-5xl mx-auto text-center space-y-8">
|
|
{/* Logo/Brand */}
|
|
<div className="inline-flex items-center gap-3 px-4 py-2 bg-white/5 backdrop-blur-sm border border-white/10">
|
|
<Usb className="w-6 h-6" />
|
|
<span className="font-mono text-sm tracking-wider">ALLTOR.NET</span>
|
|
</div>
|
|
|
|
{/* Main headline */}
|
|
<h1 className="text-6xl md:text-8xl font-bold tracking-tight text-balance leading-[0.95]">
|
|
<span className="block text-5xl md:text-7xl mb-2">We need an</span>
|
|
<span className="bg-gradient-to-r from-red-500 via-yellow-500 via-green-500 via-blue-500 to-purple-500 bg-clip-text text-transparent">
|
|
Alternative
|
|
</span>
|
|
<br />
|
|
<span className="text-white">Internet</span>
|
|
</h1>
|
|
|
|
{/* Subheadline */}
|
|
<p className="text-xl md:text-2xl text-white/70 max-w-3xl mx-auto text-balance leading-relaxed">
|
|
A distributed, local-first, collaborative digital ecosystem free from corporate control. Access a new
|
|
internet through physical USB keys and local mesh networks.
|
|
</p>
|
|
|
|
{/* CTA Buttons */}
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
|
|
<Button size="lg" className="text-lg px-8 py-6 bg-white text-black hover:bg-white/90">
|
|
Get Your Key
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="text-lg px-8 py-6 border-white/20 hover:bg-white/10 text-white bg-transparent"
|
|
>
|
|
Learn More
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Key stats */}
|
|
<div className="grid grid-cols-3 gap-8 pt-12 max-w-2xl mx-auto">
|
|
<div className="space-y-1">
|
|
<div className="text-3xl md:text-4xl font-bold">100%</div>
|
|
<div className="text-sm text-muted-foreground">Zero Knowledge</div>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<div className="text-3xl md:text-4xl font-bold">P2P</div>
|
|
<div className="text-sm text-muted-foreground">Distributed</div>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<div className="text-3xl md:text-4xl font-bold">Free</div>
|
|
<div className="text-sm text-muted-foreground">No Subscriptions</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom fade */}
|
|
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-background to-transparent" />
|
|
</section>
|
|
)
|
|
}
|