106 lines
3.7 KiB
TypeScript
106 lines
3.7 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import { ArrowRight } from "lucide-react"
|
|
import Link from "next/link"
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden px-4 py-20 scan-lines">
|
|
<div className="absolute inset-0 cyber-grid opacity-20" />
|
|
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-2xl animate-pulse" />
|
|
<div
|
|
className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-secondary/20 rounded-full blur-2xl animate-pulse"
|
|
style={{ animationDelay: "1s" }}
|
|
/>
|
|
</div>
|
|
|
|
<svg className="absolute inset-0 w-full h-full opacity-30" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="laser-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style={{ stopColor: "rgb(0, 255, 255)", stopOpacity: 0 }} />
|
|
<stop offset="50%" style={{ stopColor: "rgb(0, 255, 255)", stopOpacity: 1 }} />
|
|
<stop offset="100%" style={{ stopColor: "rgb(255, 0, 255)", stopOpacity: 0 }} />
|
|
</linearGradient>
|
|
</defs>
|
|
<line
|
|
x1="0"
|
|
y1="0"
|
|
x2="100%"
|
|
y2="100%"
|
|
stroke="url(#laser-gradient)"
|
|
strokeWidth="2"
|
|
className="animate-pulse"
|
|
/>
|
|
<line
|
|
x1="100%"
|
|
y1="0"
|
|
x2="0"
|
|
y2="100%"
|
|
stroke="url(#laser-gradient)"
|
|
strokeWidth="2"
|
|
className="animate-pulse"
|
|
style={{ animationDelay: "0.5s" }}
|
|
/>
|
|
<circle
|
|
cx="50%"
|
|
cy="50%"
|
|
r="200"
|
|
fill="none"
|
|
stroke="rgb(0, 255, 255)"
|
|
strokeWidth="1"
|
|
opacity="0.3"
|
|
className="animate-pulse"
|
|
/>
|
|
<circle
|
|
cx="50%"
|
|
cy="50%"
|
|
r="300"
|
|
fill="none"
|
|
stroke="rgb(255, 0, 255)"
|
|
strokeWidth="1"
|
|
opacity="0.2"
|
|
className="animate-pulse"
|
|
style={{ animationDelay: "1s" }}
|
|
/>
|
|
</svg>
|
|
|
|
<div className="relative max-w-5xl mx-auto text-center space-y-8 z-10">
|
|
<h1 className="text-5xl md:text-7xl font-bold tracking-tight text-balance glow-text">
|
|
{"Psilo-Cybernetics"}
|
|
<span className="block text-primary mt-2 glow-text">{"& Institutional Neuroplasticity"}</span>
|
|
</h1>
|
|
|
|
<p className="text-xl md:text-2xl text-accent max-w-3xl mx-auto text-pretty leading-relaxed glow-text">
|
|
{
|
|
"Exploring the emergence of adaptive institutions through MycoFi—a framework connecting mycelial intelligence with decentralized systems for real-time collective collaboration"
|
|
}
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
|
|
<Button
|
|
size="lg"
|
|
className="gap-2 text-base glow-border bg-primary hover:bg-primary/80 border-2 border-primary"
|
|
asChild
|
|
>
|
|
<Link href="https://post-appitalism.app/" target="_blank" rel="noopener noreferrer">
|
|
{"Explore the Framework"}
|
|
<ArrowRight className="w-4 h-4" />
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="text-base border-2 border-secondary text-secondary glow-border hover:bg-secondary/10 bg-transparent"
|
|
asChild
|
|
>
|
|
<Link href="https://book.mycofi.earth" target="_blank" rel="noopener noreferrer">
|
|
{"Read the MycoFi Book"}
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|