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 d7e987cea3
commit 6376bb3d82
45 changed files with 959 additions and 825 deletions
@@ -0,0 +1,60 @@
+"use client"
+
+import { Activity, CircleCheck, Route, ShieldCheck, Zap } from "lucide-react"
+
+import { AnimatedList } from "@/components/ui/animated-list"
+import { cn } from "@/lib/utils"
+
+const routingEvents = [
+  {
+    icon: <Route className="size-4" />,
+    title: "Routed to Claude Sonnet",
+    meta: "342ms · 8.2k tokens",
+    accent: "bg-blue-600/15 text-blue-600 dark:text-blue-400",
+  },
+  {
+    icon: <Zap className="size-4" />,
+    title: "Prompt cache hit",
+    meta: "Saved $0.018 · 42ms",
+    accent: "bg-amber-500/15 text-amber-500",
+  },
+  {
+    icon: <Activity className="size-4" />,
+    title: "Latency policy applied",
+    meta: "Gemini Flash · 118ms",
+    accent: "bg-blue-500/15 text-blue-500",
+  },
+  {
+    icon: <CircleCheck className="size-4" />,
+    title: "Fallback completed",
+    meta: "OpenAI → Mistral · 621ms",
+    accent: "bg-emerald-500/15 text-emerald-500",
+  },
+  {
+    icon: <ShieldCheck className="size-4" />,
+    title: "Guardrail passed",
+    meta: "No sensitive data detected",
+    accent: "bg-cyan-500/15 text-cyan-500",
+  },
+]
+
+export function RoutingActivity() {
+  return (
+    <div className="relative h-[360px] shrink-0 overflow-hidden bg-background">
+      <AnimatedList delay={1150} className="absolute inset-x-4 top-4 gap-2">
+        {routingEvents.map((event) => (
+          <div key={event.title} className="mx-auto flex w-full max-w-sm items-center gap-3 rounded-xl border bg-background/95 p-3 shadow-sm">
+            <span className={cn("flex size-9 shrink-0 items-center justify-center rounded-lg", event.accent)}>
+              {event.icon}
+            </span>
+            <span className="min-w-0 text-left">
+              <span className="block truncate text-xs font-medium">{event.title}</span>
+              <span className="mt-0.5 block truncate font-mono text-[10px] text-muted-foreground">{event.meta}</span>
+            </span>
+          </div>
+        ))}
+      </AnimatedList>
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-background to-transparent" />
+    </div>
+  )
+}