bondingcurve-website/components/hero-section.tsx

54 lines
2.2 KiB
TypeScript

import { Button } from "@/components/ui/button"
import Link from "next/link"
import { ArrowRight } from "lucide-react"
export function HeroSection() {
return (
<section className="relative pt-32 pb-20 px-4 sm:px-6 lg:px-8 overflow-hidden">
<div className="absolute top-20 right-10 w-96 h-96 bg-[var(--neon-cyan)] rounded-full blur-[120px] opacity-20 animate-pulse" />
<div
className="absolute bottom-10 left-20 w-72 h-72 bg-[var(--neon-purple)] rounded-full blur-[100px] opacity-15 animate-pulse"
style={{ animationDelay: "1s" }}
/>
<div className="max-w-7xl mx-auto relative z-10">
<div className="max-w-3xl mx-auto text-center">
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-6 text-balance neon-glow-cyan text-[var(--neon-cyan-bright)]">
Bonding Curve Research Group
</h1>
<p className="text-xl md:text-2xl text-foreground/80 mb-8 leading-relaxed text-pretty">
We are a squad of engineers, researchers, and data analysts dedicated to the study, development, and practical implementation of bonding curves as programmable financial primitives.
</p>
<div className="flex flex-wrap gap-4 justify-center">
<Button
asChild
size="lg"
className="bg-[var(--neon-cyan)] hover:bg-[var(--neon-cyan-bright)] text-black font-semibold shadow-[0_0_20px_rgba(0,255,255,0.5)]"
>
<Link href="#research">
Explore Research
<ArrowRight className="ml-2 h-4 w-4" />
</Link>
</Button>
<Button
asChild
variant="outline"
size="lg"
className="border-2 border-[var(--neon-cyan)] text-[var(--neon-cyan-bright)] hover:bg-[var(--neon-cyan)]/10 shadow-[0_0_15px_rgba(0,255,255,0.3)] bg-transparent"
>
<Link
href="https://bonding-curve-research-group.gitbook.io/bonding-curve-research-group-library"
target="_blank"
>
View Library
</Link>
</Button>
</div>
</div>
</div>
</section>
)
}