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: "Mr. Henderson",
|
|
role: "Neighbor",
|
|
content: "These boys are incredible. They spent 3 hours on my truck and it looks better than when I take it to the professional shop in town. Great work ethic!",
|
|
stars: 5
|
|
},
|
|
{
|
|
name: "Mrs. Gable",
|
|
role: "Local Resident",
|
|
content: "So impressed with their politeness and attention to detail. They got all the dog hair out of my SUV. Highly recommend supporting these young men.",
|
|
stars: 5
|
|
},
|
|
{
|
|
name: "Coach Miller",
|
|
role: "Family Friend",
|
|
content: "Hardest working 13-year-olds I know. They've detailed my car three times now and it's perfect every time. Real hustle.",
|
|
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 Our Neighbors</Heading>
|
|
<Subheading className="text-neutral-400">We're proud to serve the Cedar Rapids community.</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>
|
|
);
|
|
}
|