Template
Rami Bitar
c84dc9dbe7
Use remote logos and avatars, refine landing copy, and document the template structure.
72 lines
3.1 KiB
TypeScript
72 lines
3.1 KiB
TypeScript
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>
|
|
)
|
|
}
|