-
+
@@ -71,8 +66,8 @@ export function MobileNavigation({ items }: { items: NavigationItem[] }) {
-
- Explore Vertex
+
+ Explore {siteConfig.name}
Explore our products, solutions, resources, documentation, and pricing.
@@ -87,13 +82,13 @@ export function MobileNavigation({ items }: { items: NavigationItem[] }) {
onClick={() => {
navigating.current = true;
}}
- className="flex items-center rounded-xl px-3 py-3 transition-colors hover:bg-white/5 focus-visible:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/30"
+ className="flex items-center rounded-xl px-3 py-3 transition-colors hover:bg-foreground/5 focus-visible:bg-foreground/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-foreground/30"
>
{label}
-
+
{description}
@@ -105,25 +100,25 @@ export function MobileNavigation({ items }: { items: NavigationItem[] }) {
-
+
{
navigating.current = true;
}}
- className="flex h-12 items-center justify-center rounded-full bg-white px-4 text-sm font-medium text-black transition-colors hover:bg-white/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
+ className="flex h-12 items-center justify-center rounded-full bg-foreground px-4 text-sm font-medium text-background transition-colors hover:bg-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/30 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
>
Sign Up
{
navigating.current = true;
}}
- className="flex h-12 items-center justify-center rounded-full border border-white/10 px-4 text-sm font-medium text-white/70 transition-colors hover:bg-white/5 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30"
+ className="flex h-12 items-center justify-center rounded-full border border-border px-4 text-sm font-medium text-foreground/70 transition-colors hover:bg-foreground/5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/30"
>
Log In
diff --git a/components/layout/site-footer.tsx b/components/layout/site-footer.tsx
new file mode 100644
index 0000000..4f736ff
--- /dev/null
+++ b/components/layout/site-footer.tsx
@@ -0,0 +1,63 @@
+import { RiGithubFill, RiTwitterXFill } from '@remixicon/react';
+
+import { Brand } from '@/components/shared/brand';
+import { Container } from '@/components/shared/container';
+import { footerColumns, siteConfig } from '@/lib/site';
+
+const socialLinks = [
+ { label: 'GitHub', href: siteConfig.links.github, Icon: RiGithubFill },
+ { label: 'X (Twitter)', href: siteConfig.links.twitter, Icon: RiTwitterXFill },
+];
+
+export function SiteFooter() {
+ return (
+
+ );
+}
diff --git a/components/layout/site-header.tsx b/components/layout/site-header.tsx
new file mode 100644
index 0000000..58d530b
--- /dev/null
+++ b/components/layout/site-header.tsx
@@ -0,0 +1,53 @@
+import { MobileNavigation } from '@/components/layout/mobile-navigation';
+import { ThemeToggle } from '@/components/layout/theme-toggle';
+import { Brand } from '@/components/shared/brand';
+import { Container } from '@/components/shared/container';
+import { Button } from '@/components/ui/button';
+import { navigationItems, siteConfig } from '@/lib/site';
+
+export function SiteHeader() {
+ return (
+
+
+
+
+ );
+}
diff --git a/components/layout/theme-provider.tsx b/components/layout/theme-provider.tsx
new file mode 100644
index 0000000..9bf53d8
--- /dev/null
+++ b/components/layout/theme-provider.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import * as React from 'react';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+
+export function ThemeProvider({
+ children,
+ ...props
+}: React.ComponentProps) {
+ return {children} ;
+}
diff --git a/components/layout/theme-toggle.tsx b/components/layout/theme-toggle.tsx
new file mode 100644
index 0000000..3ddcd6d
--- /dev/null
+++ b/components/layout/theme-toggle.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import { useSyncExternalStore } from 'react';
+import { RiMoonLine, RiSunLine } from '@remixicon/react';
+import { useTheme } from 'next-themes';
+
+import { Button } from '@/components/ui/button';
+
+const emptySubscribe = () => () => {};
+
+export function ThemeToggle() {
+ const mounted = useSyncExternalStore(
+ emptySubscribe,
+ () => true,
+ () => false,
+ );
+ const { resolvedTheme, setTheme } = useTheme();
+
+ const isDark = mounted && resolvedTheme === 'dark';
+
+ return (
+
+ );
+}
diff --git a/components/sections/cta-section.tsx b/components/sections/cta-section.tsx
new file mode 100644
index 0000000..4c00bc1
--- /dev/null
+++ b/components/sections/cta-section.tsx
@@ -0,0 +1,25 @@
+import { ActionButtons } from '@/components/shared/action-buttons';
+import { Container } from '@/components/shared/container';
+import { GradientGlow } from '@/components/shared/gradient-glow';
+import { SectionHeading } from '@/components/shared/section-heading';
+
+export function CtaSection() {
+ return (
+
+
+
+
+ );
+}
diff --git a/components/sections/features-section.tsx b/components/sections/features-section.tsx
new file mode 100644
index 0000000..37fa5f9
--- /dev/null
+++ b/components/sections/features-section.tsx
@@ -0,0 +1,87 @@
+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:
+
+
+
+ );
+}
diff --git a/components/sections/hero-section.tsx b/components/sections/hero-section.tsx
new file mode 100644
index 0000000..dc5d743
--- /dev/null
+++ b/components/sections/hero-section.tsx
@@ -0,0 +1,82 @@
+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 (
+
+ );
+}
+
+export function HeroSection() {
+ return (
+
+
+
+
+ {hero.announcement.label}
+
+ →
+
+
+
+
+
+ $
+
+
+
+
+
+
+ );
+}
diff --git a/components/site/logo-cloud.tsx b/components/sections/logos-section.tsx
similarity index 86%
rename from components/site/logo-cloud.tsx
rename to components/sections/logos-section.tsx
index 9dd3fdc..01f6b4e 100644
--- a/components/site/logo-cloud.tsx
+++ b/components/sections/logos-section.tsx
@@ -1,5 +1,6 @@
import Image from 'next/image';
+import { Container } from '@/components/shared/container';
import { Marquee } from '@/components/ui/marquee';
const customerLogos = [
@@ -53,11 +54,11 @@ const customerLogos = [
},
];
-export function LogoCloud() {
+export function LogosSection() {
return (
-
-
+
);
}
diff --git a/components/site/stats.tsx b/components/sections/stats-section.tsx
similarity index 65%
rename from components/site/stats.tsx
rename to components/sections/stats-section.tsx
index 8439aee..b39325b 100644
--- a/components/site/stats.tsx
+++ b/components/sections/stats-section.tsx
@@ -1,4 +1,5 @@
-import { StatsGlobe } from '@/components/site/stats-globe';
+import { StatsGlobe } from '@/components/sections/stats/stats-globe';
+import { Container } from '@/components/shared/container';
const stats = [
{ value: '45ms', label: 'Median edge response, worldwide' },
@@ -7,25 +8,25 @@ const stats = [
{ value: '1.2T', label: 'Requests served every month' },
];
-export function Stats() {
+export function StatsSection() {
return (
-
+
+
+
+
+
+
+ {features.map((feature) => (
+
+
+
+ ))}
+
+
+
+ {feature.step}
+
+
+ {feature.title}
++ {feature.description} +
++ {hero.title} +
++ {hero.description} +
+ +
-
-
+
Trusted by fast-moving teams shipping to millions
@@ -73,13 +74,13 @@ export function LogoCloud() {
width={logo.width}
height={logo.height}
unoptimized
- className="h-7 w-[120px] max-w-full object-contain opacity-40 brightness-0 invert transition-opacity duration-200 group-hover:opacity-80"
+ className="h-7 w-[120px] max-w-full object-contain opacity-40 brightness-0 transition-opacity duration-200 group-hover:opacity-80 dark:invert"
/>
))}
+
{stats.map((stat) => (
+
);
}
diff --git a/components/sections/stats/stats-globe.tsx b/components/sections/stats/stats-globe.tsx
new file mode 100644
index 0000000..02b92c2
--- /dev/null
+++ b/components/sections/stats/stats-globe.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import { type COBEOptions } from 'cobe';
+import { useTheme } from 'next-themes';
+
+import { Globe } from '@/components/ui/globe';
+
+// Rotation per frame. Default globe is 0.005; lower is slower, 0 stops it.
+const GLOBE_SPEED = 0.003;
+
+const markers: COBEOptions['markers'] = [
+ { location: [37.7749, -122.4194], size: 0.08 },
+ { location: [40.7128, -74.006], size: 0.06 },
+ { location: [51.5072, -0.1276], size: 0.07 },
+ { location: [48.8566, 2.3522], size: 0.05 },
+ { location: [1.3521, 103.8198], size: 0.08 },
+ { location: [35.6762, 139.6503], size: 0.06 },
+ { location: [-33.8688, 151.2093], size: 0.05 },
+ { location: [-23.5505, -46.6333], size: 0.06 },
+];
+
+const darkGlobeConfig: COBEOptions = {
+ width: 800,
+ height: 800,
+ onRender: () => {},
+ devicePixelRatio: 2,
+ phi: 0,
+ theta: 0.22,
+ dark: 1,
+ diffuse: 1.2,
+ mapSamples: 20000,
+ mapBrightness: 5,
+ baseColor: [0.22, 0.22, 0.22],
+ markerColor: [1, 1, 1],
+ glowColor: [0.1, 0.1, 0.1],
+ markers,
+};
+
+const lightGlobeConfig: COBEOptions = {
+ ...darkGlobeConfig,
+ dark: 0,
+ diffuse: 0.4,
+ mapBrightness: 1.2,
+ baseColor: [0.88, 0.88, 0.88],
+ markerColor: [0.1, 0.1, 0.1],
+ glowColor: [0.96, 0.96, 0.96],
+};
+
+export function StatsGlobe() {
+ const { resolvedTheme } = useTheme();
+
+ return (
+
+ );
+}
diff --git a/components/shared/action-buttons.tsx b/components/shared/action-buttons.tsx
new file mode 100644
index 0000000..6b691d8
--- /dev/null
+++ b/components/shared/action-buttons.tsx
@@ -0,0 +1,41 @@
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+type Action = { label: string; href: string };
+
+export function ActionButtons({
+ primary,
+ secondary,
+ className,
+}: {
+ primary: Action;
+ secondary?: Action;
+ className?: string;
+}) {
+ return (
+
-
-
- );
-}
diff --git a/components/site/features.tsx b/components/site/features.tsx
deleted file mode 100644
index e6724b6..0000000
--- a/components/site/features.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-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:
-
- );
-}
diff --git a/components/site/footer.tsx b/components/site/footer.tsx
deleted file mode 100644
index 4b93982..0000000
--- a/components/site/footer.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { RiGithubFill, RiTwitterXFill } from '@remixicon/react';
-
-import { Logo } from '@/components/site/logo';
-
-const columns = [
- {
- heading: 'Products',
- links: ['Previews', 'Edge Network', 'Analytics', 'Storage', 'Firewall'],
- },
- {
- heading: 'Resources',
- links: ['Docs', 'Guides', 'Changelog', 'Templates', 'Status'],
- },
- {
- heading: 'Company',
- links: ['About', 'Careers', 'Blog', 'Customers', 'Contact'],
- },
- {
- heading: 'Legal',
- links: ['Privacy', 'Terms', 'Security', 'DPA', 'Cookies'],
- },
-];
-
-export function Footer() {
- return (
-
- );
-}
diff --git a/components/site/hero.tsx b/components/site/hero.tsx
deleted file mode 100644
index fffdb54..0000000
--- a/components/site/hero.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Button } from '@/components/ui/button';
-
-export function Hero() {
- return (
-
-
-
-
-
- );
-}
diff --git a/components/site/navbar.tsx b/components/site/navbar.tsx
deleted file mode 100644
index 8069618..0000000
--- a/components/site/navbar.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Logo } from '@/components/site/logo';
-import { MobileNavigation } from '@/components/site/mobile-navigation';
-import { Button } from '@/components/ui/button';
-
-const navigationItems = [
- { 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 function Navbar() {
- return (
-
-
-
- );
-}
diff --git a/components/site/stats-globe.tsx b/components/site/stats-globe.tsx
deleted file mode 100644
index 3284f50..0000000
--- a/components/site/stats-globe.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-'use client';
-
-import { type COBEOptions } from 'cobe';
-
-import { Globe } from '@/components/ui/globe';
-
-// Rotation per frame. Default globe is 0.005; lower is slower, 0 stops it.
-const GLOBE_SPEED = 0.003;
-
-const globeConfig: COBEOptions = {
- width: 800,
- height: 800,
- onRender: () => {},
- devicePixelRatio: 2,
- phi: 0,
- theta: 0.22,
- dark: 1,
- diffuse: 1.2,
- mapSamples: 20000,
- mapBrightness: 5,
- baseColor: [0.22, 0.22, 0.22],
- markerColor: [1, 1, 1],
- glowColor: [0.1, 0.1, 0.1],
- markers: [
- { location: [37.7749, -122.4194], size: 0.08 },
- { location: [40.7128, -74.006], size: 0.06 },
- { location: [51.5072, -0.1276], size: 0.07 },
- { location: [48.8566, 2.3522], size: 0.05 },
- { location: [1.3521, 103.8198], size: 0.08 },
- { location: [35.6762, 139.6503], size: 0.06 },
- { location: [-33.8688, 151.2093], size: 0.05 },
- { location: [-23.5505, -46.6333], size: 0.06 },
- ],
-};
-
-export function StatsGlobe() {
- return (
-
- );
-}
diff --git a/lib/site.ts b/lib/site.ts
new file mode 100644
index 0000000..e00759d
--- /dev/null
+++ b/lib/site.ts
@@ -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)),
+ },
+];
{stat.value}
-
+
))}
-
{stat.label}
+
+ {secondary && (
+
+ )}
+
+ );
+}
diff --git a/components/site/logo.tsx b/components/shared/brand.tsx
similarity index 67%
rename from components/site/logo.tsx
rename to components/shared/brand.tsx
index 9a57975..d0de2a8 100644
--- a/components/site/logo.tsx
+++ b/components/shared/brand.tsx
@@ -1,6 +1,7 @@
import { cn } from '@/lib/utils';
+import { siteConfig } from '@/lib/site';
-export function Logo({ className }: { className?: string }) {
+export function Brand({ className }: { className?: string }) {
return (
- Vertex
+ {siteConfig.name}
);
}
diff --git a/components/shared/container.tsx b/components/shared/container.tsx
new file mode 100644
index 0000000..6fd73ce
--- /dev/null
+++ b/components/shared/container.tsx
@@ -0,0 +1,9 @@
+import { type ComponentProps } from 'react';
+
+import { cn } from '@/lib/utils';
+
+export function Container({ className, ...props }: ComponentProps<'div'>) {
+ return (
+
+ );
+}
diff --git a/components/shared/gradient-glow.tsx b/components/shared/gradient-glow.tsx
new file mode 100644
index 0000000..8fd173d
--- /dev/null
+++ b/components/shared/gradient-glow.tsx
@@ -0,0 +1,21 @@
+import { cn } from '@/lib/utils';
+
+/**
+ * Soft conic-gradient bloom used behind hero and CTA copy.
+ * Position and size it with `className`; it never captures pointer events.
+ */
+export function GradientGlow({ className }: { className?: string }) {
+ return (
+
+ );
+}
diff --git a/components/shared/section-heading.tsx b/components/shared/section-heading.tsx
new file mode 100644
index 0000000..aca4dcb
--- /dev/null
+++ b/components/shared/section-heading.tsx
@@ -0,0 +1,44 @@
+import { cn } from '@/lib/utils';
+
+export function SectionHeading({
+ eyebrow,
+ title,
+ description,
+ align = 'left',
+ className,
+}: {
+ eyebrow?: string;
+ title: string;
+ description?: string;
+ align?: 'left' | 'center';
+ className?: string;
+}) {
+ return (
+
+ {eyebrow && (
+
+ );
+}
diff --git a/components/site/cta.tsx b/components/site/cta.tsx
deleted file mode 100644
index f2d235b..0000000
--- a/components/site/cta.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Button } from '@/components/ui/button';
-
-export function Cta() {
- return (
- + {eyebrow} +
+ )} ++ {title} +
+ {description && ( ++ {description} +
+ )} +- Ship your first project in minutes. -
-- Import a repository or start from a template. No credit card required to - deploy your first preview. -
-
-
-
-
-
-
-
- - The workflow -
-- From commit to production, without the ceremony. -
-
- {features.map((feature) => (
-
-
-
- ))}
-
-
-
- {feature.step}
-
-
- {feature.title}
-- {feature.description} -
-
-
-
- Vertex Edge is now generally available
-
- →
-
-
-
-
- - Build. Preview. Ship. -
-- 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. -
- -
-
-
-
-
-
- $
-
- vertex deploy --prod
-
-
-
-