94 lines
3 KiB
TypeScript
94 lines
3 KiB
TypeScript
import { TieredBandList } from "@/components/home/tiered-band-list"
|
|
import { Button } from "@/components/ui/button"
|
|
import Link from "next/link"
|
|
|
|
interface Vertical {
|
|
id: number
|
|
name: string
|
|
slug: string
|
|
description: string | null
|
|
}
|
|
|
|
async function getVerticals(): Promise<Vertical[]> {
|
|
try {
|
|
const res = await fetch(`${getApiUrl()}/verticals`, { next: { revalidate: 60 } })
|
|
if (!res.ok) return []
|
|
return res.json()
|
|
} catch {
|
|
return []
|
|
}
|
|
}
|
|
|
|
|
|
export default async function HomePage() {
|
|
const verticals = await getVerticals()
|
|
|
|
return (
|
|
<div className="space-y-20 pb-16">
|
|
{/* Hero Section */}
|
|
<section className="text-center pt-20 pb-10 space-y-8 animate-in fade-in zoom-in duration-700">
|
|
<div className="space-y-4">
|
|
<h1 className="text-6xl font-extrabold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/60">
|
|
Fediversion
|
|
</h1>
|
|
<p className="text-2xl text-muted-foreground max-w-2xl mx-auto font-light leading-relaxed">
|
|
The unified platform for the jam scene.
|
|
<br />
|
|
<span className="text-foreground font-medium">One account. All your bands.</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex justify-center gap-4 pt-4">
|
|
<Button asChild size="xl" className="h-14 px-8 text-lg rounded-full">
|
|
<Link href="/register">Join the Community</Link>
|
|
</Button>
|
|
<Button asChild variant="outline" size="xl" className="h-14 px-8 text-lg rounded-full">
|
|
<Link href="/shows">Find a Show</Link>
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Tiered Band List - The "Meat" */}
|
|
<TieredBandList initialVerticals={verticals} />
|
|
|
|
{/* Community / Stats - Reimagined */}
|
|
<section className="max-w-4xl mx-auto px-4">
|
|
<div className="bg-muted/50 rounded-3xl p-12 text-center space-y-8 border backdrop-blur-sm">
|
|
<div className="space-y-2">
|
|
<h2 className="text-3xl font-bold tracking-tight">Community Powered</h2>
|
|
<p className="text-lg text-muted-foreground">
|
|
Built by fans, for fans. Track your history, rate jams, and find your flock.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 pt-4">
|
|
<StatItem
|
|
value={verticals.length > 0 ? verticals.length.toString() : "25+"}
|
|
label="Bands Covered"
|
|
/>
|
|
<StatItem
|
|
value="∞"
|
|
label="Jams Indexed"
|
|
/>
|
|
<StatItem
|
|
value="1"
|
|
label="Universal Account"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function StatItem({ value, label }: { value: string, label: string }) {
|
|
return (
|
|
<div className="space-y-1">
|
|
<div className="text-4xl font-black text-primary tracking-tight">{value}</div>
|
|
<div className="text-sm font-medium text-muted-foreground uppercase tracking-wider">{label}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|
|
|