Improve mobile navigation, responsive layout, and theme styling

components/layout/site-header.tsx

@@ -1,23 +1,28 @@
 import { RiArrowDownSLine, RiArrowRightSLine } from "@remixicon/react"
 
+import { MobileNavigation } from "@/components/layout/mobile-navigation"
 import { ThemeToggle } from "@/components/layout/theme-toggle"
 import { Brand } from "@/components/shared/brand"
+import { FrameCrosses } from "@/components/shared/frame-crosses"
+
+const navigationItems = [
+  { label: "Products", href: "#features", description: "One gateway for your AI stack" },
+  { label: "Models", href: "#models", description: "Explore the models you can build with" },
+  { label: "Features", href: "#features", description: "Routing, insights, and reliability" },
+  { label: "Pricing", href: "#pricing", description: "Start free. Scale at your pace." },
+  { label: "Docs", href: "#developers", description: "Your first request starts here" },
+]
 
 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">
+      <div className="relative mx-auto flex h-16 max-w-[1280px] items-center justify-between border-x px-5 sm:px-8">
+        <FrameCrosses edges="bottom" />
         <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]) => (
+          {navigationItems.map(({ label, href }) => (
             <a
               key={label}
               href={href}
@@ -36,6 +41,7 @@ export function SiteHeader() {
           >
             Get started <RiArrowRightSLine className="size-3.5" />
           </a>
+          <MobileNavigation items={navigationItems} />
         </div>
       </div>
     </header>