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,63 @@
+import { ApiTerminal } from "@/components/sections/features/api-terminal"
+import { GlobalGlobe } from "@/components/sections/features/global-globe"
+import { IntegrationOrbit } from "@/components/sections/features/integration-orbit"
+import { RoutingActivity } from "@/components/sections/features/routing-activity"
+import { UsageChart } from "@/components/sections/features/usage-chart"
+import { FeatureCopy } from "@/components/shared/feature-copy"
+import { SectionHeading } from "@/components/shared/section-heading"
+
+export function FeaturesSection() {
+  return (
+    <section id="features" className="border-b">
+      <SectionHeading
+        eyebrow="The gateway layer"
+        title="Infrastructure for model choice"
+        description="Everything you need to move quickly across models without giving up reliability, control, or visibility."
+      />
+
+      <div className="grid lg:grid-cols-12">
+        <article className="flex min-h-[520px] flex-col border-b lg:col-span-7 lg:border-r">
+          <ApiTerminal />
+          <FeatureCopy
+            title="One compatible endpoint"
+            description="Use the OpenAI SDK you already know. Change one base URL and reach every supported model."
+          />
+        </article>
+
+        <article className="flex min-h-[520px] flex-col border-b lg:col-span-5">
+          <IntegrationOrbit />
+          <FeatureCopy
+            title="Seamless integrations"
+            description="Connect your favorite tools and bring AI into the workflows your team already uses."
+          />
+        </article>
+
+        <article className="flex min-h-[430px] flex-col border-b lg:col-span-4 lg:border-b-0 lg:border-r">
+          <RoutingActivity />
+          <FeatureCopy
+            title="Automatic failover"
+            description="Keep requests moving through rate limits, outages, and changing provider availability."
+          />
+        </article>
+
+        <article className="flex min-h-[430px] flex-col border-b lg:col-span-4 lg:border-b-0 lg:border-r">
+          <div className="relative h-[360px] shrink-0 overflow-hidden bg-background">
+            <UsageChart />
+          </div>
+          <FeatureCopy
+            title="Unified cost and latency"
+            description="Compare providers, trace every request, and control spend from one clear operating view."
+          />
+        </article>
+
+        <article className="flex min-h-[430px] flex-col lg:col-span-4">
+          <GlobalGlobe />
+          <FeatureCopy
+            title="Global inference gateway"
+            description="Route requests through the nearest healthy region for consistently fast model access."
+          />
+        </article>
+      </div>
+    </section>
+  )
+}