59 lines
2.3 KiB
TypeScript
59 lines
2.3 KiB
TypeScript
import { ArrowRight } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
export function HeroSection() {
|
|
return (
|
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden border-b border-border">
|
|
{/* Animated network background */}
|
|
<div className="absolute inset-0 opacity-20">
|
|
<svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
|
<path
|
|
d="M 40 0 L 0 0 0 40"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="0.5"
|
|
className="text-primary/30"
|
|
/>
|
|
</pattern>
|
|
</defs>
|
|
<rect width="100%" height="100%" fill="url(#grid)" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div className="container relative z-10 px-4 py-20 mx-auto max-w-6xl">
|
|
<div className="text-center space-y-8">
|
|
|
|
|
|
<h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight text-balance">
|
|
Weaving a <span className="text-primary">Post-Appitalist</span> Future
|
|
</h1>
|
|
|
|
<p className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto text-balance leading-relaxed">
|
|
Decomposing the data silos of capitalist business models. Building the exfrastructure for interconnected
|
|
digital ecosystems.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-8">
|
|
<Button size="lg" className="text-lg px-8 group">
|
|
Explore the Vision
|
|
<ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
|
|
</Button>
|
|
<Button size="lg" variant="outline" className="text-lg px-8 bg-transparent">
|
|
Read the Research
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll indicator */}
|
|
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
|
|
<div className="w-6 h-10 border-2 border-primary/50 rounded-full flex items-start justify-center p-2">
|
|
<div className="w-1.5 h-3 bg-primary/50 rounded-full" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|