Improve mobile navigation, responsive layout, and theme styling

components/sections/features-section.tsx

@@ -15,8 +15,8 @@ export function FeaturesSection() {
         description="Everything you need to move quickly across models without giving up reliability, control, or visibility."
       />
 
-      <div className="grid lg:grid-cols-12">
-        <article className="flex min-h-[520px] flex-col border-b lg:col-span-7 lg:border-r">
+      <div className="grid grid-cols-1 lg:grid-cols-12">
+        <article className="flex min-h-[520px] min-w-0 flex-col border-b lg:col-span-7 lg:border-r">
           <ApiTerminal />
           <FeatureCopy
             title="One compatible endpoint"
@@ -24,7 +24,7 @@ export function FeaturesSection() {
           />
         </article>
 
-        <article className="flex min-h-[520px] flex-col border-b lg:col-span-5">
+        <article className="flex min-h-[520px] min-w-0 flex-col border-b lg:col-span-5">
           <IntegrationOrbit />
           <FeatureCopy
             title="Seamless integrations"
@@ -32,7 +32,7 @@ export function FeaturesSection() {
           />
         </article>
 
-        <article className="flex min-h-[430px] flex-col border-b lg:col-span-4 lg:border-b-0 lg:border-r">
+        <article className="flex min-h-[430px] min-w-0 flex-col border-b lg:col-span-4 lg:border-b-0 lg:border-r">
           <RoutingActivity />
           <FeatureCopy
             title="Automatic failover"
@@ -40,8 +40,8 @@ export function FeaturesSection() {
           />
         </article>
 
-        <article className="flex min-h-[430px] flex-col border-b lg:col-span-4 lg:border-b-0 lg:border-r">
-          <div className="relative h-[360px] shrink-0 overflow-hidden bg-background">
+        <article className="flex min-h-[430px] min-w-0 flex-col border-b lg:col-span-4 lg:border-b-0 lg:border-r">
+          <div className="relative h-[360px] w-full min-w-0 shrink-0 overflow-hidden bg-background">
             <UsageChart />
           </div>
           <FeatureCopy
@@ -50,7 +50,7 @@ export function FeaturesSection() {
           />
         </article>
 
-        <article className="flex min-h-[430px] flex-col lg:col-span-4">
+        <article className="flex min-h-[430px] min-w-0 flex-col lg:col-span-4">
           <GlobalGlobe />
           <FeatureCopy
             title="Global inference gateway"

components/sections/features/global-globe.tsx

@@ -1,8 +1,11 @@
 "use client"
 
+import { type COBEOptions } from "cobe"
+import { useTheme } from "next-themes"
+
 import { Globe } from "@/components/ui/globe"
 
-const globeConfig = {
+const darkGlobeConfig: COBEOptions = {
   width: 800,
   height: 800,
   onRender: () => {},
@@ -28,13 +31,25 @@ const globeConfig = {
   ],
 }
 
+const lightGlobeConfig: COBEOptions = {
+  ...darkGlobeConfig,
+  dark: 0,
+  diffuse: 0.4,
+  mapBrightness: 1.2,
+  baseColor: [0.9, 0.94, 1],
+  markerColor: [0.09, 0.24, 0.65],
+  glowColor: [0.85, 0.9, 1],
+}
+
 export function GlobalGlobe() {
+  const { resolvedTheme } = useTheme()
+
   return (
     <div className="relative h-[360px] shrink-0 overflow-hidden bg-background">
-      <Globe className="top-6 max-w-[360px]" config={globeConfig} />
-      <div className="absolute left-5 top-5 flex items-center gap-2 rounded-full border bg-background/85 px-3 py-1.5 font-mono text-[10px] shadow-sm backdrop-blur">
-        <span className="size-1.5 animate-pulse rounded-full bg-emerald-500" /> 8 regions online
-      </div>
+      <Globe
+        className="top-6 max-w-[360px]"
+        config={resolvedTheme === "light" ? lightGlobeConfig : darkGlobeConfig}
+      />
     </div>
   )
 }

components/sections/features/usage-chart.tsx

@@ -62,7 +62,7 @@ export function UsageChart() {
   const fillId = useId()
 
   return (
-    <ChartContainer config={chartConfig} className="h-full min-h-[270px] w-full aspect-auto">
+    <ChartContainer config={chartConfig} className="h-full min-h-[270px] w-full min-w-0 aspect-auto">
       <AreaChart
         accessibilityLayer
         aria-label="Example model usage: requests increase from 2,350 to 5,680 over the day. Use the arrow keys to explore."

components/sections/hero-section.tsx

@@ -5,7 +5,7 @@ import { FrameCrosses } from "@/components/shared/frame-crosses"
 export function HeroSection() {
   return (
     <section className="hero-gradient relative border-b px-6 pb-14 pt-24 text-center sm:px-10 sm:pb-20 sm:pt-28 lg:pt-32">
-      <FrameCrosses />
+      <FrameCrosses edges="bottom" />
       <div className="relative z-10 mx-auto max-w-4xl">
         <a
           href="#features"