Template
87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
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 Features() {
|
|
return (
|
|
<section className="mx-auto max-w-6xl px-6 py-24">
|
|
<div className="max-w-2xl">
|
|
<p className="font-mono text-xs uppercase tracking-[0.2em] text-white/40">
|
|
The workflow
|
|
</p>
|
|
<h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
|
|
From commit to production, without the ceremony.
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="mt-14 grid gap-px overflow-hidden rounded-2xl border border-white/10 bg-white/10 md:grid-cols-3">
|
|
{features.map((feature) => (
|
|
<div
|
|
key={feature.step}
|
|
className="group flex flex-col bg-black p-8 transition-colors hover:bg-white/[0.03]"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<svg
|
|
width="28"
|
|
height="28"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
className="text-white/80"
|
|
aria-hidden="true"
|
|
>
|
|
{feature.icon}
|
|
</svg>
|
|
<span className="font-mono text-xs text-white/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-white/50">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|