Improve mobile navigation, responsive layout, and theme styling

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."