96 lines
4.9 KiB
TypeScript
96 lines
4.9 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="relative text-center">
|
|
<div className="text-xl font-semibold text-muted-foreground mb-2 sm:text-2xl">Welcome to</div>
|
|
<h1 className="text-5xl font-bold tracking-tight sm:text-6xl lg:text-8xl 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>
|
|
|
|
<div className="mx-auto mb-8 max-w-3xl">
|
|
|
|
</div>
|
|
|
|
<div className="mx-auto mt-16 mb-1 max-w-3xl">
|
|
<p className="text-2xl font-bold leading-relaxed text-foreground sm:text-3xl text-balance">
|
|
Remember back when the internet was <span className="text-accent">cool</span>?
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mx-auto max-w-3xl space-y-2">
|
|
<p className="text-3xl font-bold leading-relaxed text-balance sm:text-3xl">
|
|
We may not have <em className="">{"My"}</em>space anymore, but we have
|
|
</p>
|
|
<div className="flex items-end justify-center gap-2">
|
|
<p className="text-4xl font-bold leading-relaxed text-balance sm:text-4xl">
|
|
<span className="drop-shadow-[0_0_10px_oklch(0.72_0.19_45)] text-primary">(ou)r</span>
|
|
<span className="text-foreground">Space</span>
|
|
</p>
|
|
<p className="text-sm font-bold leading-relaxed text-balance">
|
|
<span className="text-muted-foreground">(and it's </span>
|
|
<span className="text-secondary drop-shadow-[0_0_10px_oklch(0.72_0.19_45)]">online</span>
|
|
<span className="text-muted-foreground">)</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-muted-foreground sm:text-xl">
|
|
Build digital spaces to collaborate on improving your{" "}
|
|
<span className="font-semibold text-primary">physical world</span>. Local-first, zero knowledge data
|
|
privacy, outside the walls of big tech.
|
|
</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"
|
|
asChild
|
|
>
|
|
<a href="https://demo.rspace.online">
|
|
<span className="relative z-10 flex items-center gap-2">
|
|
<Sparkles className="h-5 w-5" />
|
|
Click here to start yourSpace
|
|
</span>
|
|
</a>
|
|
</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 Data Privacy</span>
|
|
<span className="text-primary">•</span>
|
|
<span className="text-muted-foreground">Self-Infrastructured</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>
|
|
)
|
|
}
|