Add tabbed report preview (score gauge, domains, issues, actions), annotated review evidence cards with sentiment highlights, social proof bar, and visual how-it-works mockups. Enhance hero with stat pills, testimonials with stars, and banner with mini gauge. Remove redundant features section. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
import { getTranslation } from "@turbostarter/i18n/server";
|
|
|
|
const stats = [
|
|
{ key: "reports" },
|
|
{ key: "rating" },
|
|
{ key: "dimensions" },
|
|
] as const;
|
|
|
|
export const SocialProof = async () => {
|
|
const { t } = await getTranslation({ ns: "marketing" });
|
|
|
|
return (
|
|
<div className="border-y bg-muted/30 py-6 sm:py-8">
|
|
<div className="mx-auto flex max-w-5xl flex-col items-center justify-center gap-6 px-6 sm:flex-row sm:gap-12 md:gap-16">
|
|
{stats.map((stat) => {
|
|
const text = t(`socialProof.${stat.key}` as const);
|
|
const match = text.match(/^([\d.+]+)\s+(.+)$/);
|
|
const number = match?.[1] ?? text;
|
|
const label = match?.[2] ?? "";
|
|
|
|
return (
|
|
<div key={stat.key} className="flex flex-col items-center text-center">
|
|
<span className="text-2xl font-bold tracking-tight sm:text-3xl">
|
|
{number}
|
|
</span>
|
|
<span className="text-sm text-muted-foreground">{label}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|