From 9e6dbfd721978184a58b6ae489009721c0c24e58 Mon Sep 17 00:00:00 2001 From: Rami Bitar Date: Wed, 16 Sep 2026 14:56:27 -0400 Subject: [PATCH] Refine mobile navigation, header controls, and branding --- components/layout/mobile-navigation.tsx | 164 ++++++++++++------------ components/layout/theme-toggle.tsx | 10 +- components/sections/hero-section.tsx | 2 +- components/ui/sheet.tsx | 7 +- public/logo.svg | 2 +- 5 files changed, 93 insertions(+), 92 deletions(-) diff --git a/components/layout/mobile-navigation.tsx b/components/layout/mobile-navigation.tsx index 89ac27c..ff04e98 100644 --- a/components/layout/mobile-navigation.tsx +++ b/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,88 +34,84 @@ export function MobileNavigation({ items }: { items: NavigationItem[] }) { }, []) return ( - - + + - + - - - { - // Let the anchor move focus to its section without the trigger - // interrupting the page's smooth scroll when the dialog closes. - if (navigating.current) event.preventDefault() - navigating.current = false - }} - > -
- - - - -
+ { + // Let the anchor move focus to its section without the trigger + // interrupting the page's smooth scroll when the sheet closes. + if (navigating.current) event.preventDefault() + navigating.current = false + }} + > +
+ + + + +
- + - - - - +
+

One API. Every AI model.

+ + { navigating.current = true }} + 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 + + +
+ + ) } diff --git a/components/layout/theme-toggle.tsx b/components/layout/theme-toggle.tsx index 21587ea..bb6d1c1 100644 --- a/components/layout/theme-toggle.tsx +++ b/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 ( - + ) } diff --git a/components/sections/hero-section.tsx b/components/sections/hero-section.tsx index 165baf3..d1e433b 100644 --- a/components/sections/hero-section.tsx +++ b/components/sections/hero-section.tsx @@ -9,7 +9,7 @@ export function HeroSection() {
The unified AI gateway diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx index d348172..55943b7 100644 --- a/components/ui/sheet.tsx +++ b/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) { @@ -26,7 +27,7 @@ function SheetClose({ function SheetPortal({ ...props }: React.ComponentProps) { - return + return } function SheetOverlay({ @@ -50,14 +51,16 @@ function SheetContent({ children, side = "right", showCloseButton = true, + overlayClassName, ...props }: React.ComponentProps & { side?: "top" | "right" | "bottom" | "left" showCloseButton?: boolean + overlayClassName?: string }) { return ( - + - +