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>
83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
import {
|
|
Snippet,
|
|
SnippetAddon,
|
|
SnippetCopyButton,
|
|
SnippetInput,
|
|
SnippetText,
|
|
} from '@/components/ai-elements/snippet';
|
|
import { ActionButtons } from '@/components/shared/action-buttons';
|
|
import { Container } from '@/components/shared/container';
|
|
import { GradientGlow } from '@/components/shared/gradient-glow';
|
|
|
|
const hero = {
|
|
announcement: { label: 'Vertex Edge is now generally available', href: '#' },
|
|
title: 'Build. Preview. Ship.',
|
|
description:
|
|
'Vertex is the frontend cloud. Give your team the tooling and global infrastructure to build, preview, and ship a faster web — from your first commit to production traffic.',
|
|
primary: { label: 'Start Deploying', href: '#' },
|
|
secondary: { label: 'Get a Demo', href: '#' },
|
|
command: 'vertex deploy --prod',
|
|
};
|
|
|
|
function GridBackdrop() {
|
|
return (
|
|
<div
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute inset-0 [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,black,transparent)]"
|
|
style={{
|
|
backgroundImage:
|
|
'linear-gradient(to right, color-mix(in oklab, var(--foreground) 6%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--foreground) 6%, transparent) 1px, transparent 1px)',
|
|
backgroundSize: '56px 56px',
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function HeroSection() {
|
|
return (
|
|
<section className="relative overflow-hidden">
|
|
<GridBackdrop />
|
|
<GradientGlow className="left-1/2 top-[-120px] h-[420px] w-[820px] -translate-x-1/2 opacity-40" />
|
|
|
|
<Container className="relative pt-24 pb-20 text-center sm:pt-32">
|
|
<a
|
|
href={hero.announcement.href}
|
|
className="group inline-flex items-center gap-2 rounded-full border border-foreground/15 bg-foreground/5 px-3.5 py-1.5 text-xs text-foreground/70 transition-colors hover:border-foreground/25 hover:text-foreground"
|
|
>
|
|
<span className="inline-block h-1.5 w-1.5 rounded-full bg-emerald-400" />
|
|
{hero.announcement.label}
|
|
<span className="transition-transform group-hover:translate-x-0.5">
|
|
→
|
|
</span>
|
|
</a>
|
|
|
|
<h1 className="mx-auto mt-8 max-w-4xl bg-gradient-to-b from-foreground to-foreground/60 bg-clip-text text-5xl font-semibold leading-[1.05] tracking-tight text-transparent sm:text-7xl">
|
|
{hero.title}
|
|
</h1>
|
|
<p className="mx-auto mt-6 max-w-2xl text-lg leading-8 text-foreground/55">
|
|
{hero.description}
|
|
</p>
|
|
|
|
<ActionButtons
|
|
className="mt-10"
|
|
primary={hero.primary}
|
|
secondary={hero.secondary}
|
|
/>
|
|
|
|
<Snippet
|
|
className="mx-auto mt-14 h-12 max-w-md rounded-xl border-border bg-foreground/[0.03] text-sm"
|
|
code={hero.command}
|
|
>
|
|
<SnippetAddon className="pl-1">
|
|
<SnippetText>$</SnippetText>
|
|
</SnippetAddon>
|
|
<SnippetInput />
|
|
<SnippetAddon align="inline-end" className="pr-2">
|
|
<SnippetCopyButton />
|
|
</SnippetAddon>
|
|
</Snippet>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|