Refine mobile navigation, header controls, and branding

components/layout/mobile-navigation.tsx

@@ -1,19 +1,17 @@
 "use client"
 
 import { useEffect, useRef, useState } from "react"
-import { RiArrowRightLine, RiCloseLine, RiMenu3Line } from "@remixicon/react"
-import { Dialog as DialogPrimitive } from "radix-ui"
+import { RiCloseLine, RiMenuLine } from "@remixicon/react"
 
 import { Brand } from "@/components/shared/brand"
 import {
-  Dialog,
-  DialogClose,
-  DialogDescription,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog"
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet"
 
 type NavigationItem = {
   label: string
@@ -36,67 +34,65 @@ export function MobileNavigation({ items }: { items: NavigationItem[] }) {
   }, [])
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
         <button
           type="button"
           aria-label="Open navigation menu"
-          className="inline-flex size-11 items-center justify-center rounded-sm border bg-background/80 text-foreground transition-colors hover:border-blue-500/40 hover:bg-blue-600/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:hidden"
+          className="inline-flex size-11 items-center justify-center rounded-sm bg-background/80 text-foreground transition-colors hover:bg-blue-600/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:hidden"
         >
-          <RiMenu3Line className="size-5" aria-hidden="true" />
+          <RiMenuLine className="size-5" aria-hidden="true" />
         </button>
-      </DialogTrigger>
+      </SheetTrigger>
 
-      <DialogPortal>
-        <DialogOverlay className="z-[60] bg-black/45 duration-200 supports-backdrop-filter:backdrop-blur-md md:hidden" />
-        <DialogPrimitive.Content
-          className="fixed inset-x-3 top-3 z-[61] mx-auto flex max-h-[calc(100dvh-1.5rem)] max-w-lg flex-col overflow-hidden rounded-2xl border bg-background text-foreground shadow-[0_24px_100px_rgba(0,0,0,.35)] outline-none duration-200 data-open:animate-in data-open:fade-in-0 data-open:slide-in-from-top-4 data-closed:animate-out data-closed:fade-out-0 data-closed:slide-out-to-top-4 md:hidden"
+      <SheetContent
+        side="top"
+        showCloseButton={false}
+        overlayClassName="z-[60] bg-black/45 duration-300 supports-backdrop-filter:backdrop-blur-md md:hidden"
+        className="z-[61] max-h-dvh w-full gap-0 overflow-hidden rounded-none bg-background text-foreground outline-none duration-300 data-[side=top]:data-open:slide-in-from-top data-[side=top]:data-closed:slide-out-to-top md:hidden"
         onCloseAutoFocus={(event) => {
           // Let the anchor move focus to its section without the trigger
-            // interrupting the page's smooth scroll when the dialog closes.
+          // interrupting the page's smooth scroll when the sheet closes.
           if (navigating.current) event.preventDefault()
           navigating.current = false
         }}
       >
         <div className="flex shrink-0 items-center justify-between border-b bg-linear-to-r from-blue-600/10 via-blue-600/5 to-transparent px-5 py-3">
           <Brand />
-            <DialogClose asChild>
+          <SheetClose asChild>
             <button
               type="button"
               aria-label="Close navigation menu"
-                className="inline-flex size-11 items-center justify-center rounded-full border bg-background/70 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              className="inline-flex size-11 items-center justify-center rounded-sm bg-background/70 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             >
               <RiCloseLine className="size-5" aria-hidden="true" />
             </button>
-            </DialogClose>
+          </SheetClose>
         </div>
 
         <div className="min-h-0 overflow-y-auto overscroll-contain p-3">
-            <DialogTitle className="px-3 pb-2 pt-3 font-mono text-[10px] font-medium tracking-[0.18em] text-muted-foreground uppercase">
+          <SheetTitle className="px-3 pb-2 pt-3 font-mono text-[10px] font-medium tracking-[0.18em] text-muted-foreground uppercase">
             Explore Vertex
-            </DialogTitle>
-            <DialogDescription className="sr-only">
+          </SheetTitle>
+          <SheetDescription className="sr-only">
             Explore our products, models, features, pricing, and developer documentation.
-            </DialogDescription>
+          </SheetDescription>
           <nav aria-label="Mobile navigation">
             <ul className="space-y-1">
               {items.map(({ label, href, description }) => (
                 <li key={label}>
-                    <DialogClose asChild>
+                  <SheetClose asChild>
                     <a
                       href={href}
                       onClick={() => { navigating.current = true }}
-                        className="group flex items-center justify-between gap-4 rounded-xl px-3 py-3 transition-colors hover:bg-blue-600/8 focus-visible:bg-blue-600/8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+                      className="flex items-center rounded-xl px-3 py-3 transition-colors hover:bg-blue-600/8 focus-visible:bg-blue-600/8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
                     >
                       <span className="min-w-0">
                         <span className="block text-xl font-medium tracking-tight">{label}</span>
                         <span className="mt-0.5 block text-xs leading-5 text-muted-foreground">{description}</span>
                       </span>
-                        <span className="flex size-8 shrink-0 items-center justify-center rounded-full border text-muted-foreground transition-colors group-hover:border-blue-500/30 group-hover:bg-blue-600/10 group-hover:text-blue-600 dark:group-hover:text-blue-400">
-                          <RiArrowRightLine className="size-4" aria-hidden="true" />
-                        </span>
                     </a>
-                    </DialogClose>
+                  </SheetClose>
                 </li>
               ))}
             </ul>
@@ -105,19 +101,17 @@ export function MobileNavigation({ items }: { items: NavigationItem[] }) {
 
         <div className="shrink-0 border-t bg-muted/35 p-5">
           <p className="mb-3 text-xs text-muted-foreground">One API. Every AI model.</p>
-            <DialogClose asChild>
+          <SheetClose asChild>
             <a
               href="#pricing"
               onClick={() => { navigating.current = true }}
-                className="flex h-12 items-center justify-between rounded-lg bg-blue-600 px-4 text-sm font-medium text-white shadow-[0_6px_24px_rgba(23,61,166,.2)] transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              className="flex h-12 items-center justify-center rounded-lg bg-blue-600 px-4 text-sm font-medium text-white shadow-[0_6px_24px_rgba(23,61,166,.2)] transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
             >
               Get started
-                <RiArrowRightLine className="size-4" aria-hidden="true" />
             </a>
-            </DialogClose>
+          </SheetClose>
         </div>
-        </DialogPrimitive.Content>
-      </DialogPortal>
-    </Dialog>
+      </SheetContent>
+    </Sheet>
   )
 }

components/layout/theme-toggle.tsx

@@ -4,6 +4,8 @@ import { RiMoonLine, RiSunLine } from "@remixicon/react"
 import { useTheme } from "next-themes"
 import { useSyncExternalStore } from "react"
 
+import { Button } from "@/components/ui/button"
+
 const emptySubscribe = () => () => {}
 
 export function ThemeToggle() {
@@ -13,10 +15,12 @@ export function ThemeToggle() {
   const isDark = mounted && resolvedTheme === "dark"
 
   return (
-    <button
+    <Button
       type="button"
+      variant="ghost"
+      size="icon-lg"
       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"
+      className="text-muted-foreground"
       onClick={() => setTheme(isDark ? "light" : "dark")}
     >
       {mounted ? (
@@ -24,6 +28,6 @@ export function ThemeToggle() {
       ) : (
         <span className="size-4" aria-hidden="true" />
       )}
-    </button>
+    </Button>
   )
 }

components/sections/hero-section.tsx

@@ -9,7 +9,7 @@ export function HeroSection() {
       <div className="relative z-10 mx-auto max-w-4xl">
         <a
           href="#features"
-          className="mb-7 inline-flex items-center justify-center rounded-full border border-blue-600/15 bg-gradient-to-br from-white/80 via-blue-600/10 to-blue-600/20 px-5 py-2 text-xs font-medium text-foreground shadow-[inset_0_1px_0_rgba(255,255,255,.6),0_4px_20px_rgba(23,61,166,.1)] backdrop-blur-xl transition-colors hover:border-blue-600/35 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background dark:border-white/15 dark:from-white/10 dark:via-blue-600/15 dark:to-blue-600/30 dark:shadow-[inset_0_1px_0_rgba(255,255,255,.12),0_4px_20px_rgba(23,61,166,.15)] dark:hover:border-white/30"
+          className="mb-7 inline-flex items-center justify-center rounded-full border border-blue-600/25 bg-clip-padding bg-gradient-to-br from-white/80 via-blue-600/10 to-blue-600/20 px-5 py-2 text-xs font-medium text-foreground shadow-[inset_0_1px_0_rgba(255,255,255,.6),0_4px_20px_rgba(23,61,166,.1)] backdrop-blur-xl transition-colors hover:border-blue-600/35 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background dark:border-white/15 dark:from-white/10 dark:via-blue-600/15 dark:to-blue-600/30 dark:shadow-[inset_0_1px_0_rgba(255,255,255,.12),0_4px_20px_rgba(23,61,166,.15)] dark:hover:border-white/30"
         >
           The unified AI gateway
         </a>

components/ui/sheet.tsx

@@ -5,6 +5,7 @@ import { Dialog as SheetPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
+import { DialogPortal } from "@/components/ui/dialog"
 import { RiCloseLine } from "@remixicon/react"
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
@@ -26,7 +27,7 @@ function SheetClose({
 function SheetPortal({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+  return <DialogPortal data-slot="sheet-portal" {...props} />
 }
 
 function SheetOverlay({
@@ -50,14 +51,16 @@ function SheetContent({
   children,
   side = "right",
   showCloseButton = true,
+  overlayClassName,
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left"
   showCloseButton?: boolean
+  overlayClassName?: string
 }) {
   return (
     <SheetPortal>
-      <SheetOverlay />
+      <SheetOverlay className={overlayClassName} />
       <SheetPrimitive.Content
         data-slot="sheet-content"
         data-side={side}

public/logo.svg

@@ -2,7 +2,7 @@
   <g transform="rotate(45 12 12)">
     <path d="M13.236 2.377 2.751 20.493H0L11.863 0l1.373 2.377Z"/>
     <path d="M16.790 8.533 7.184 20.493H4.130L15.511 6.320l1.279 2.212Z"/>
-    <path d="M20.278 14.571 12.435 20.491H8.482L19.079 12.494l1.2 2.077Z"/>
   </g>
+  <path d="M4.070494 16.081410 L16.928016 16.338560 L16.341956 18.526839 L6.315392 18.326308 Z"/>
   <path d="M7.444111 19.455027 L15.518911 21.600000 L14.266277 26.277193 Z"/>
 </svg>