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>
82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import { Link } from "react-router";
|
|
import { cn } from "@/lib/utils";
|
|
import { Heading } from "@/components/Heading";
|
|
|
|
export type CTAProps = {
|
|
tagline: string;
|
|
heading: string;
|
|
subheading: string;
|
|
primaryCta: { label: string; href: string };
|
|
secondaryCta: { label: string; href: string };
|
|
imageUrl: string;
|
|
align: "left" | "center";
|
|
};
|
|
|
|
export function CTA({
|
|
tagline,
|
|
heading,
|
|
subheading,
|
|
primaryCta,
|
|
secondaryCta,
|
|
imageUrl,
|
|
align,
|
|
}: CTAProps) {
|
|
return (
|
|
<section className="relative overflow-hidden py-24 md:py-32">
|
|
<div className="absolute inset-0 -z-10">
|
|
{imageUrl ? (
|
|
<>
|
|
<img
|
|
src={imageUrl}
|
|
alt=""
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/45" />
|
|
</>
|
|
) : (
|
|
<div className="h-full w-full bg-foreground" />
|
|
)}
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
"container mx-auto flex max-w-4xl flex-col px-6 text-white",
|
|
align === "center" ? "items-center text-center" : "items-start",
|
|
)}
|
|
>
|
|
<Heading
|
|
tagline={tagline}
|
|
title={heading}
|
|
subtitle={subheading}
|
|
align={align === "center" ? "center" : "left"}
|
|
size="lg"
|
|
tone="light"
|
|
subtitleClassName="max-w-xl"
|
|
/>
|
|
<div
|
|
className={cn(
|
|
"mt-10 flex flex-wrap gap-3",
|
|
align === "center" && "justify-center",
|
|
)}
|
|
>
|
|
{primaryCta?.label ? (
|
|
<Link
|
|
to={primaryCta.href || "#"}
|
|
className="inline-flex items-center justify-center rounded-md bg-white px-6 py-3 text-sm font-medium tracking-wide text-black hover:opacity-90"
|
|
>
|
|
{primaryCta.label}
|
|
</Link>
|
|
) : null}
|
|
{secondaryCta?.label ? (
|
|
<Link
|
|
to={secondaryCta.href || "#"}
|
|
className="inline-flex items-center justify-center rounded-md border border-white px-6 py-3 text-sm font-medium tracking-wide text-white hover:bg-white/10"
|
|
>
|
|
{secondaryCta.label}
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|