Organize Vertex starter into reusable sections

Use remote logos and avatars, refine landing copy, and document the template structure.

components/sections/features/api-terminal.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import {
+  AnimatedSpan,
+  Terminal,
+  TypingAnimation,
+} from "@/components/ui/terminal"
+
+export function ApiTerminal() {
+  return (
+    <div className="flex flex-1 items-center justify-center overflow-hidden bg-background p-5 sm:p-10">
+      <Terminal className="max-w-xl bg-background shadow-[0_24px_70px_rgba(0,0,0,.12)]" sequence>
+        <TypingAnimation duration={22}>
+          {"> curl https://api.vertex.ai/v1/chat/completions \\"}
+        </TypingAnimation>
+        <AnimatedSpan className="text-muted-foreground">
+          {`  -d '{ "model": "vertex/auto", "messages": [...] }'`}
+        </AnimatedSpan>
+        <AnimatedSpan className="text-blue-500">
+          → evaluating 14 available models
+        </AnimatedSpan>
+        <AnimatedSpan className="text-blue-600 dark:text-blue-400">
+          → route selected: anthropic/claude-sonnet
+        </AnimatedSpan>
+        <AnimatedSpan className="text-emerald-500">
+          ✓ response streamed in 342ms
+        </AnimatedSpan>
+        <TypingAnimation duration={18} className="text-muted-foreground">
+          One endpoint. Any model. No rewrites.
+        </TypingAnimation>
+      </Terminal>
+    </div>
+  )
+}