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>
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import { useState } from "react";
|
|
import { Plus, Minus } from "lucide-react";
|
|
import { Heading } from "@/components/Heading";
|
|
|
|
export type FAQProps = {
|
|
tagline: string;
|
|
heading: string;
|
|
subheading: string;
|
|
items: Array<{ question: string; answer: string }>;
|
|
};
|
|
|
|
export function FAQ({ tagline, heading, subheading, items }: FAQProps) {
|
|
const [open, setOpen] = useState<number | null>(0);
|
|
return (
|
|
<section className="bg-background py-20 md:py-28">
|
|
<div className="container mx-auto max-w-3xl px-6">
|
|
<Heading
|
|
tagline={tagline}
|
|
title={heading}
|
|
subtitle={subheading}
|
|
align="center"
|
|
size="lg"
|
|
className="mb-12"
|
|
/>
|
|
|
|
<div className="divide-y divide-border border-y border-border">
|
|
{items.map((item, i) => {
|
|
const isOpen = open === i;
|
|
return (
|
|
<div key={i}>
|
|
<button
|
|
onClick={() => setOpen(isOpen ? null : i)}
|
|
className="flex w-full items-center justify-between py-6 text-left"
|
|
>
|
|
<span className="text-base font-medium tracking-tight md:text-lg">
|
|
{item.question}
|
|
</span>
|
|
{isOpen ? (
|
|
<Minus size={18} strokeWidth={1.5} className="flex-shrink-0" />
|
|
) : (
|
|
<Plus size={18} strokeWidth={1.5} className="flex-shrink-0" />
|
|
)}
|
|
</button>
|
|
{isOpen ? (
|
|
<p className="pb-6 pr-8 text-sm leading-relaxed text-muted-foreground md:text-base">
|
|
{item.answer}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|