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,71 @@
+import { ReviewCard, type Testimonial } from "@/components/shared/review-card"
+import { Marquee } from "@/components/ui/marquee"
+
+const reviews: Testimonial[] = [
+  {
+    avatar: "https://sb.frontend.co/storage/v1/object/public/assets/avatars/unsplash/female-1.jpeg",
+    name: "Maya Kim",
+    role: "AI Platform Lead",
+    quote:
+      "Vertex gave us one reliable interface for every model experiment. We stopped rebuilding provider integrations and started shipping.",
+  },
+  {
+    avatar: "https://sb.frontend.co/storage/v1/object/public/assets/avatars/unsplash/male-1.jpeg",
+    name: "Jon Bell",
+    role: "Founding Engineer",
+    quote:
+      "Fallback routing turned model outages into a non-event. Our application stays fast even when a provider is under pressure.",
+  },
+  {
+    avatar: "https://sb.frontend.co/storage/v1/object/public/assets/avatars/unsplash/male-2.jpeg",
+    name: "Ari Rao",
+    role: "VP of Engineering",
+    quote:
+      "The unified cost view finally made inference spend understandable across teams, providers, and environments.",
+  },
+  {
+    avatar: "https://sb.frontend.co/storage/v1/object/public/assets/avatars/unsplash/female-2.jpeg",
+    name: "Sofia Chen",
+    role: "Product Engineer",
+    quote:
+      "We changed one base URL and had access to the models we needed. The developer experience is exactly that simple.",
+  },
+  {
+    avatar: "https://sb.frontend.co/storage/v1/object/public/assets/avatars/unsplash/male-3.jpeg",
+    name: "Owen Taylor",
+    role: "Infrastructure Director",
+    quote:
+      "Vertex lets our developers move quickly while the platform team keeps control of budgets, policies, and reliability.",
+  },
+  {
+    avatar: "https://sb.frontend.co/storage/v1/object/public/assets/avatars/unsplash/female-3.jpeg",
+    name: "Nina Brooks",
+    role: "Applied AI Engineer",
+    quote:
+      "Model comparisons that used to take days now take minutes. The same payload works everywhere we want to test.",
+  },
+]
+
+export function TestimonialsSection() {
+  const firstReviews = reviews.slice(0, 3)
+  const secondReviews = reviews.slice(3)
+
+  return (
+    <section className="border-b py-16 sm:py-20">
+      <div className="px-6 text-center">
+        <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-blue-600 dark:text-blue-400">Early access feedback</p>
+        <h2 className="mt-4 text-3xl font-medium tracking-[-0.045em] sm:text-4xl">Built for teams shipping AI</h2>
+      </div>
+      <div className="relative mt-12 overflow-hidden">
+        <Marquee pauseOnHover className="[--duration:34s] [--gap:1rem]">
+          {firstReviews.map((review) => <ReviewCard key={review.name} review={review} />)}
+        </Marquee>
+        <Marquee reverse pauseOnHover className="mt-2 [--duration:38s] [--gap:1rem]">
+          {secondReviews.map((review) => <ReviewCard key={review.name} review={review} />)}
+        </Marquee>
+        <div className="pointer-events-none absolute inset-y-0 left-0 w-20 bg-gradient-to-r from-background to-transparent sm:w-40" />
+        <div className="pointer-events-none absolute inset-y-0 right-0 w-20 bg-gradient-to-l from-background to-transparent sm:w-40" />
+      </div>
+    </section>
+  )
+}