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>
88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
import { Container } from '@/components/shared/container';
|
|
import { SectionHeading } from '@/components/shared/section-heading';
|
|
|
|
const features = [
|
|
{
|
|
step: '01',
|
|
title: 'Build',
|
|
description:
|
|
'Native support for 35+ frameworks. Push your code and Vertex handles the build pipeline, caching, and dependencies automatically.',
|
|
icon: <path d="M8 6L2 12l6 6M16 6l6 6-6 6" strokeWidth="1.5" fill="none" />,
|
|
},
|
|
{
|
|
step: '02',
|
|
title: 'Preview',
|
|
description:
|
|
'Every push gets a live preview URL. Share it, comment on it, and ship with confidence — no environment drift, no surprises.',
|
|
icon: (
|
|
<>
|
|
<rect
|
|
x="3"
|
|
y="4"
|
|
width="18"
|
|
height="14"
|
|
rx="2"
|
|
strokeWidth="1.5"
|
|
fill="none"
|
|
/>
|
|
<path d="M9 21h6M12 18v3" strokeWidth="1.5" fill="none" />
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
step: '03',
|
|
title: 'Ship',
|
|
description:
|
|
'Deploy to a global edge network in seconds. Instant rollbacks, zero-downtime releases, and traffic that lands close to every user.',
|
|
icon: (
|
|
<path
|
|
d="M4 13l1.5-5.5A2 2 0 0 1 7.4 6h9.2a2 2 0 0 1 1.9 1.5L20 13M4 13v5h16v-5M4 13h16M8 17h.01M16 17h.01"
|
|
strokeWidth="1.5"
|
|
fill="none"
|
|
/>
|
|
),
|
|
},
|
|
];
|
|
|
|
export function FeaturesSection() {
|
|
return (
|
|
<section>
|
|
<Container className="py-24">
|
|
<SectionHeading
|
|
eyebrow="The workflow"
|
|
title="From commit to production, without the ceremony."
|
|
/>
|
|
|
|
<div className="mt-14 grid gap-px overflow-hidden rounded-2xl border border-border bg-border md:grid-cols-3">
|
|
{features.map((feature) => (
|
|
<div
|
|
key={feature.step}
|
|
className="group flex flex-col bg-background p-8 transition-colors hover:bg-foreground/[0.03]"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<svg
|
|
width="28"
|
|
height="28"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
className="text-foreground/80"
|
|
aria-hidden="true"
|
|
>
|
|
{feature.icon}
|
|
</svg>
|
|
<span className="font-mono text-xs text-foreground/30">
|
|
{feature.step}
|
|
</span>
|
|
</div>
|
|
<h3 className="mt-6 text-xl font-medium">{feature.title}</h3>
|
|
<p className="mt-3 text-sm leading-6 text-foreground/50">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|