1c034400ca
- Pulse theme tokens in app.schema.json: Archivo Black headings (weight 400) + Inter body, white bg / black pill buttons, xl radius, AI-generated athletic imagery - Add headerFontWeight theme prop so single-weight fonts (Archivo Black) load and render correctly; ThemeProvider applies font-family + weight inline so Typography works regardless of `as` element - New shared Heading component (tagline / title / subtitle with size + align + tone variants) and Typography caption variant for taglines; refactor features, faq, cta, testimonials, products-carousel, products-grid, collection-grid, recommended-products, image-gallery, newsletter-cta to use them - Hero accepts a `buttons` array (label / href / variant) replacing primaryCta/secondaryCta; cover-image component removed and existing cover blocks migrated to Hero blocks with `buttons: []` - Newsletter CTA uses shadcn Button + Input so it inherits theme radius; stacked layout fixed to keep the image - Product/collection card titles use Typography subtitle variants (font-body), heading font weight is theme-controlled - Remove orphan commerce/shop-header.tsx and commerce/shop-footer.tsx; the editor-driven navigation/footer are the live chrome Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
101 lines
3.4 KiB
TypeScript
101 lines
3.4 KiB
TypeScript
import { useState } from "react";
|
|
import { ArrowLeft, ArrowRight } from "lucide-react";
|
|
import { Heading } from "@/components/Heading";
|
|
|
|
export type TestimonialsProps = {
|
|
tagline: string;
|
|
heading: string;
|
|
items: Array<{
|
|
quote: string;
|
|
author: string;
|
|
role: string;
|
|
avatar?: string;
|
|
}>;
|
|
};
|
|
|
|
export function Testimonials({ tagline, heading, items }: TestimonialsProps) {
|
|
const [i, setI] = useState(0);
|
|
const total = items.length;
|
|
const item = items[i];
|
|
|
|
return (
|
|
<section className="bg-muted/40 py-20 md:py-28">
|
|
<div className="container mx-auto max-w-4xl px-6 text-center">
|
|
<Heading
|
|
tagline={tagline}
|
|
title={heading}
|
|
align="center"
|
|
size="lg"
|
|
/>
|
|
|
|
{item ? (
|
|
<div className="relative mt-12">
|
|
{total > 1 ? (
|
|
<button
|
|
onClick={() => setI((p) => (p - 1 + total) % total)}
|
|
className="absolute left-0 top-1/2 hidden -translate-y-1/2 items-center justify-center rounded-full border h-10 w-10 hover:bg-background md:inline-flex"
|
|
aria-label="Previous"
|
|
>
|
|
<ArrowLeft size={16} />
|
|
</button>
|
|
) : null}
|
|
|
|
<figure className="mx-auto flex max-w-2xl flex-col items-center px-12 md:px-16">
|
|
<blockquote
|
|
className="text-balance text-foreground"
|
|
style={{ fontSize: "clamp(1.25rem, 2.4vw, 1.75rem)", lineHeight: 1.4 }}
|
|
>
|
|
{item.quote}
|
|
</blockquote>
|
|
<figcaption className="mt-8 flex items-center gap-3">
|
|
{item.avatar ? (
|
|
<img
|
|
src={item.avatar}
|
|
alt={item.author}
|
|
className="h-10 w-10 rounded-full object-cover"
|
|
/>
|
|
) : null}
|
|
<div className="text-left">
|
|
<p className="text-sm font-medium">{item.author}</p>
|
|
{item.role ? (
|
|
<p className="text-xs text-muted-foreground">{item.role}</p>
|
|
) : null}
|
|
</div>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
{total > 1 ? (
|
|
<button
|
|
onClick={() => setI((p) => (p + 1) % total)}
|
|
className="absolute right-0 top-1/2 hidden -translate-y-1/2 items-center justify-center rounded-full border h-10 w-10 hover:bg-background md:inline-flex"
|
|
aria-label="Next"
|
|
>
|
|
<ArrowRight size={16} />
|
|
</button>
|
|
) : null}
|
|
|
|
{total > 1 ? (
|
|
<div className="mt-8 flex items-center justify-center gap-3 md:hidden">
|
|
<button
|
|
onClick={() => setI((p) => (p - 1 + total) % total)}
|
|
className="inline-flex h-10 w-10 items-center justify-center rounded-full border hover:bg-background"
|
|
aria-label="Previous"
|
|
>
|
|
<ArrowLeft size={16} />
|
|
</button>
|
|
<button
|
|
onClick={() => setI((p) => (p + 1) % total)}
|
|
className="inline-flex h-10 w-10 items-center justify-center rounded-full border hover:bg-background"
|
|
aria-label="Next"
|
|
>
|
|
<ArrowRight size={16} />
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|