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,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>
+  )
+}