Organize Vertex starter into reusable sections

Use remote logos and avatars, refine landing copy, and document the template structure.
2026-09-15 10:49:07 -04:00
parent d7e987cea3
commit 6376bb3d82
45 changed files with 959 additions and 825 deletions
@@ -0,0 +1,26 @@
+import { Brand } from "@/components/shared/brand"
+
+export function SiteFooter() {
+  return (
+    <footer className="px-6 py-10 sm:px-10">
+      <div className="flex flex-col gap-8 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <Brand />
+          <p className="mt-3 max-w-sm text-xs leading-5 text-muted-foreground">
+            The unified gateway for production AI applications.
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-x-6 gap-y-3 text-xs text-muted-foreground">
+          <a className="hover:text-foreground" href="#models">Models</a>
+          <a className="hover:text-foreground" href="#developers">Docs</a>
+          <a className="hover:text-foreground" href="#pricing">Pricing</a>
+          <a className="hover:text-foreground" href="#top">Status</a>
+          <a className="hover:text-foreground" href="#top">Privacy</a>
+        </div>
+      </div>
+      <div className="mt-10 text-[11px] text-muted-foreground">
+        <span>© 2026 Vertex, Inc. All rights reserved.</span>
+      </div>
+    </footer>
+  )
+}
@@ -0,0 +1,43 @@
+import { ChevronDown, ChevronRight } from "lucide-react"
+
+import { ThemeToggle } from "@/components/layout/theme-toggle"
+import { Brand } from "@/components/shared/brand"
+
+export function SiteHeader() {
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/86 backdrop-blur-xl supports-[backdrop-filter]:bg-background/74">
+      <div className="mx-auto flex h-16 max-w-[1280px] items-center justify-between px-5 sm:px-8">
+        <a href="#top" aria-label="Vertex home">
+          <Brand />
+        </a>
+        <nav aria-label="Main navigation" className="hidden items-center gap-8 md:flex lg:gap-10">
+          {[
+            ["Products", "#features"],
+            ["Models", "#models"],
+            ["Features", "#features"],
+            ["Pricing", "#pricing"],
+            ["Docs", "#developers"],
+          ].map(([label, href]) => (
+            <a
+              key={label}
+              href={href}
+              className="inline-flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+            >
+              {label}
+              {label === "Products" && <ChevronDown className="size-3" />}
+            </a>
+          ))}
+        </nav>
+        <div className="flex items-center gap-2">
+          <ThemeToggle />
+          <a
+            href="#pricing"
+            className="hidden h-9 items-center gap-1.5 rounded-sm bg-blue-600 px-4 text-xs font-medium text-white shadow-[0_6px_24px_rgba(23,61,166,.28)] transition hover:bg-blue-500 sm:inline-flex"
+          >
+            Get started <ChevronRight className="size-3.5" />
+          </a>
+        </div>
+      </div>
+    </header>
+  )
+}
@@ -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<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
@@ -0,0 +1,29 @@
+"use client"
+
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import { useSyncExternalStore } from "react"
+
+const emptySubscribe = () => () => {}
+
+export function ThemeToggle() {
+  const mounted = useSyncExternalStore(emptySubscribe, () => true, () => false)
+  const { resolvedTheme, setTheme } = useTheme()
+
+  const isDark = mounted && resolvedTheme === "dark"
+
+  return (
+    <button
+      type="button"
+      aria-label={mounted ? `Switch to ${isDark ? "light" : "dark"} theme` : "Toggle theme"}
+      className="inline-flex size-9 items-center justify-center rounded-sm border bg-background/80 text-muted-foreground transition-colors hover:border-foreground/20 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60"
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+    >
+      {mounted ? (
+        isDark ? <Sun className="size-4" /> : <Moon className="size-4" />
+      ) : (
+        <span className="size-4" aria-hidden="true" />
+      )}
+    </button>
+  )
+}