Template
Rami BitarandClaude Fable 5.1
07a99b441c
- Set up next-themes with a light/dark toggle in the header and move all sections onto theme tokens; dark mode stays pure black - Replace the hero terminal line with the AI Elements Snippet component - Restructure components into layout/, sections/, and shared/ with site-wide config in lib/site.ts Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import { StatsGlobe } from '@/components/sections/stats/stats-globe';
|
|
import { Container } from '@/components/shared/container';
|
|
|
|
const stats = [
|
|
{ value: '45ms', label: 'Median edge response, worldwide' },
|
|
{ value: '99.99%', label: 'Platform uptime over the last year' },
|
|
{ value: '35+', label: 'Frameworks supported out of the box' },
|
|
{ value: '1.2T', label: 'Requests served every month' },
|
|
];
|
|
|
|
export function StatsSection() {
|
|
return (
|
|
<section className="relative overflow-hidden border-y border-border bg-background py-16 sm:py-24">
|
|
<StatsGlobe />
|
|
<Container className="relative z-10 grid grid-cols-2 gap-px px-0 lg:grid-cols-4">
|
|
{stats.map((stat) => (
|
|
<div
|
|
key={stat.label}
|
|
className="px-6 py-12 text-center ring-1 ring-border"
|
|
>
|
|
<div className="text-4xl font-semibold tracking-tight sm:text-5xl">
|
|
{stat.value}
|
|
</div>
|
|
<div className="mx-auto mt-3 max-w-[16ch] text-sm text-foreground/45">
|
|
{stat.label}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|