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,41 @@
+import { Code2, Gauge, Workflow } from "lucide-react"
+
+import { SectionHeading } from "@/components/shared/section-heading"
+import { cn } from "@/lib/utils"
+
+export function DevelopersSection() {
+  return (
+    <section id="developers" className="border-b">
+      <SectionHeading
+        eyebrow="Start in minutes"
+        title="A simpler path to production AI"
+        description="Your application stays focused on the product. Vertex handles the shifting model landscape underneath."
+      />
+      <div className="grid md:grid-cols-3">
+        {[
+          {
+            icon: Code2,
+            title: "Change one base URL",
+            text: "Keep your existing OpenAI-compatible SDK, payloads, and streaming logic.",
+          },
+          {
+            icon: Workflow,
+            title: "Set a routing policy",
+            text: "Choose a model directly or let Vertex optimize for cost, quality, or latency.",
+          },
+          {
+            icon: Gauge,
+            title: "Observe every request",
+            text: "Trace performance and spend across models, applications, and environments.",
+          },
+        ].map((step, index) => (
+          <article key={step.title} className={cn("relative p-8 sm:p-10", index < 2 && "border-b md:border-b-0 md:border-r")}>
+            <step.icon className="size-6" />
+            <h3 className="mt-5 text-lg font-medium tracking-tight">{step.title}</h3>
+            <p className="mt-2 text-sm leading-6 text-muted-foreground">{step.text}</p>
+          </article>
+        ))}
+      </div>
+    </section>
+  )
+}