75 lines
4.1 KiB
TypeScript
75 lines
4.1 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import { Sparkles } from "lucide-react"
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="relative overflow-hidden border-b-4 border-primary">
|
|
<div className="absolute inset-0 bg-[linear-gradient(45deg,transparent_25%,oklch(0.75_0.18_195/0.05)_25%,oklch(0.75_0.18_195/0.05)_50%,transparent_50%,transparent_75%,oklch(0.75_0.18_195/0.05)_75%)] bg-[length:20px_20px]" />
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,oklch(0.72_0.19_45/0.1),transparent_50%)]" />
|
|
|
|
<div className="relative mx-auto max-w-7xl px-4 py-24 sm:px-6 lg:px-8 lg:py-32">
|
|
<div className="text-center">
|
|
<div className="mb-8 flex justify-center">
|
|
<div className="relative">
|
|
<div className="absolute inset-0 animate-pulse blur-2xl bg-primary/30" />
|
|
<div className="absolute -inset-4 animate-pulse blur-3xl bg-accent/20 glitter" />
|
|
<h1 className="relative text-6xl font-bold tracking-tight sm:text-7xl lg:text-9xl retro-shadow">
|
|
<span className="text-primary drop-shadow-[0_0_15px_oklch(0.75_0.18_195)]">r</span>
|
|
<span className="text-foreground">Space</span>
|
|
<span className="text-secondary drop-shadow-[0_0_15px_oklch(0.72_0.19_45)]">.online</span>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mx-auto max-w-3xl space-y-4">
|
|
<p className="text-2xl font-bold leading-relaxed text-primary sm:text-3xl text-balance">
|
|
Remember when the internet was <span className="text-accent">cool</span>?
|
|
</p>
|
|
<p className="text-3xl font-bold leading-relaxed sm:text-4xl text-balance">
|
|
<span className="text-primary">r</span>Space isn't just <em>my</em>space —
|
|
</p>
|
|
<p className="text-3xl font-bold leading-relaxed sm:text-4xl text-balance">
|
|
It's <span className="text-secondary drop-shadow-[0_0_10px_oklch(0.72_0.19_45)]">(ou)r</span>
|
|
<span className="text-foreground">Space</span>
|
|
</p>
|
|
</div>
|
|
|
|
<p className="mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-muted-foreground sm:text-xl">
|
|
Build digital spaces that improve your <span className="font-semibold text-primary">physical world</span>.
|
|
Local-first, zero-knowledge privacy, outside the walls of big tech monopolies.
|
|
</p>
|
|
|
|
<div className="mt-12 flex flex-col items-center justify-center gap-4 sm:flex-row">
|
|
<Button
|
|
size="lg"
|
|
className="group relative overflow-hidden bg-primary text-primary-foreground hover:bg-primary/90 retro-shadow-sm hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none transition-all"
|
|
>
|
|
<span className="relative z-10 flex items-center gap-2">
|
|
<Sparkles className="h-5 w-5" />
|
|
Create Your rSpace
|
|
</span>
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="border-2 border-secondary text-secondary hover:bg-secondary hover:text-secondary-foreground bg-transparent retro-shadow-sm hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none transition-all"
|
|
>
|
|
See Real Examples
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="mt-16 inline-flex flex-wrap items-center justify-center gap-4 rounded-lg border-2 border-primary bg-card/80 px-8 py-4 text-sm backdrop-blur-sm retro-shadow">
|
|
<span className="font-bold text-primary">★</span>
|
|
<span className="text-muted-foreground">Zero-Knowledge Privacy</span>
|
|
<span className="text-primary">•</span>
|
|
<span className="text-muted-foreground">Community Owned</span>
|
|
<span className="text-secondary">•</span>
|
|
<span className="text-muted-foreground">Local-First</span>
|
|
<span className="font-bold text-secondary">★</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|