Organize Vertex starter into reusable sections

Use remote logos and avatars, refine landing copy, and document the template structure.
2026-09-15 10:49:07 -04:00
parent ad7d003ed4
commit c84dc9dbe7
45 changed files with 959 additions and 825 deletions
@@ -0,0 +1,40 @@
+"use client"
+
+import { Globe } from "@/components/ui/globe"
+
+const globeConfig = {
+  width: 800,
+  height: 800,
+  onRender: () => {},
+  devicePixelRatio: 2,
+  phi: 0,
+  theta: 0.28,
+  dark: 1,
+  diffuse: 1.1,
+  mapSamples: 12000,
+  mapBrightness: 4.5,
+  baseColor: [0.05, 0.12, 0.32] as [number, number, number],
+  markerColor: [0.15, 0.46, 1] as [number, number, number],
+  glowColor: [0.08, 0.18, 0.48] as [number, number, number],
+  markers: [
+    { location: [37.7749, -122.4194] as [number, number], size: 0.08 },
+    { location: [40.7128, -74.006] as [number, number], size: 0.06 },
+    { location: [51.5072, -0.1276] as [number, number], size: 0.07 },
+    { location: [48.8566, 2.3522] as [number, number], size: 0.05 },
+    { location: [1.3521, 103.8198] as [number, number], size: 0.08 },
+    { location: [35.6762, 139.6503] as [number, number], size: 0.06 },
+    { location: [-33.8688, 151.2093] as [number, number], size: 0.05 },
+    { location: [-23.5505, -46.6333] as [number, number], size: 0.06 },
+  ],
+}
+
+export function GlobalGlobe() {
+  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>
+    </div>
+  )
+}