70 lines
2.5 KiB
TypeScript
70 lines
2.5 KiB
TypeScript
export default function Testimonials() {
|
|
// Replace or extend these with real quotes/metrics when available.
|
|
const metrics = [
|
|
{ title: "+38% faster TTFB", sub: "after Cloudflare tuning" },
|
|
{ title: "DMARC p=reject", sub: "in 48 hours, spoofing blocked" },
|
|
{ title: "7m 12s restore", sub: "backup drill to full recovery" },
|
|
];
|
|
|
|
const quotes = [
|
|
{
|
|
quote:
|
|
"Our forms finally land in the inbox and the site is measurably faster. The before/after report made it an easy yes.",
|
|
name: "Marketing Lead",
|
|
company: "B2B Services SMB",
|
|
},
|
|
{
|
|
quote:
|
|
"They implemented, tested, and documented everything in two days. We now have backups that actually restore.",
|
|
name: "Founder",
|
|
company: "E-commerce SME",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section
|
|
aria-labelledby="testimonials-heading"
|
|
className="relative py-24 bg-gradient-to-b from-neutral-50 via-white to-neutral-100 dark:from-neutral-950 dark:via-neutral-900 dark:to-neutral-950"
|
|
>
|
|
<div className="container mx-auto max-w-6xl px-4">
|
|
<h2
|
|
id="testimonials-heading"
|
|
className="text-center text-3xl sm:text-4xl font-bold tracking-tight bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
|
|
>
|
|
Proof we deliver
|
|
</h2>
|
|
|
|
{/* Metric badges */}
|
|
<div className="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-4xl mx-auto">
|
|
{metrics.map((m) => (
|
|
<div
|
|
key={m.title}
|
|
className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 p-5 text-center"
|
|
>
|
|
<p className="text-2xl font-bold text-neutral-900 dark:text-white">{m.title}</p>
|
|
<p className="text-sm text-neutral-600 dark:text-neutral-400">{m.sub}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Quotes */}
|
|
<div className="mt-12 grid gap-6 sm:grid-cols-2">
|
|
{quotes.map((q, i) => (
|
|
<figure
|
|
key={i}
|
|
className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 p-6 shadow-sm"
|
|
>
|
|
<blockquote className="text-neutral-800 dark:text-neutral-200">
|
|
“{q.quote}”
|
|
</blockquote>
|
|
<figcaption className="mt-4 text-sm text-neutral-600 dark:text-neutral-400">
|
|
— {q.name}, {q.company}
|
|
</figcaption>
|
|
</figure>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|