Add theme toggle, hero snippet, and reorganize homepage components

- 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>
This commit is contained in:
Rami Bitar
2026-09-18 09:29:12 -04:00
co-authored by Claude Fable 5.1
parent a40edbffa9
commit 07a99b441c
28 changed files with 812 additions and 437 deletions
+53
View File
@@ -0,0 +1,53 @@
export const siteConfig = {
name: 'Vertex',
title: 'Vertex — Build. Preview. Ship.',
description:
'Vertex gives frontend teams the tooling and cloud infrastructure to build, preview, and ship a faster web.',
tagline: 'The frontend cloud for teams that ship.',
links: {
github: 'https://github.com',
twitter: 'https://x.com',
login: '#',
signup: '#',
},
};
export type NavigationItem = {
label: string;
href: string;
description: string;
};
export const navigationItems: NavigationItem[] = [
{ label: 'Products', href: '#', description: 'Everything you need to ship' },
{ label: 'Solutions', href: '#', description: 'Built for teams of every size' },
{ label: 'Resources', href: '#', description: 'Guides, templates, and changelog' },
{ label: 'Docs', href: '#', description: 'Your first deploy starts here' },
{ label: 'Pricing', href: '#', description: 'Start free. Scale at your pace.' },
];
export type FooterColumn = {
heading: string;
links: { label: string; href: string }[];
};
const link = (label: string, href = '#') => ({ label, href });
export const footerColumns: FooterColumn[] = [
{
heading: 'Products',
links: ['Previews', 'Edge Network', 'Analytics', 'Storage', 'Firewall'].map((l) => link(l)),
},
{
heading: 'Resources',
links: ['Docs', 'Guides', 'Changelog', 'Templates', 'Status'].map((l) => link(l)),
},
{
heading: 'Company',
links: ['About', 'Careers', 'Blog', 'Customers', 'Contact'].map((l) => link(l)),
},
{
heading: 'Legal',
links: ['Privacy', 'Terms', 'Security', 'DPA', 'Cookies'].map((l) => link(l)),
},
];