55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Star } from "lucide-react";
|
|
|
|
const reviews = [
|
|
{
|
|
name: "Michael R.",
|
|
role: "Tesla Model S Owner",
|
|
content: "The AI surface scan they did before the ceramic coating was mind-blowing. My car looks better than the day I picked it up from the showroom.",
|
|
stars: 5
|
|
},
|
|
{
|
|
name: "Sarah J.",
|
|
role: "BMW X5 Owner",
|
|
content: "Best detailer in Cedar Rapids. The attention to detail is unmatched. They found and fixed scratches I didn't even know were there.",
|
|
stars: 5
|
|
},
|
|
{
|
|
name: "David L.",
|
|
role: "Classic Mustang Owner",
|
|
content: "I'm very picky about who touches my vintage cars. Apex is the only shop I trust. Their paint correction is pure wizardry.",
|
|
stars: 5
|
|
}
|
|
];
|
|
|
|
export function Testimonials() {
|
|
return (
|
|
<section className="py-24 bg-neutral-950">
|
|
<Container>
|
|
<div className="text-center mb-16">
|
|
<Heading className="text-white">Trusted by Cedar Rapids' Elite</Heading>
|
|
<Subheading className="text-neutral-400">Don't just take our word for it. See what our clients are saying.</Subheading>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{reviews.map((review, i) => (
|
|
<div key={i} className="p-8 rounded-2xl bg-neutral-900 border border-neutral-800 hover:border-blue-500/50 transition-colors">
|
|
<div className="flex gap-1 mb-4">
|
|
{[...Array(review.stars)].map((_, i) => (
|
|
<Star key={i} className="w-4 h-4 fill-yellow-500 text-yellow-500" />
|
|
))}
|
|
</div>
|
|
<p className="text-neutral-300 italic mb-6">"{review.content}"</p>
|
|
<div>
|
|
<p className="font-bold text-white">{review.name}</p>
|
|
<p className="text-sm text-blue-400">{review.role}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|