Rebrand store as Pulse with athletic theme and shared typography

- 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>
This commit is contained in:
Rami Bitar
2026-05-10 16:47:07 -04:00
parent 0a1fbd62bb
commit 1c034400ca
24 changed files with 747 additions and 835 deletions

View File

@@ -1,5 +1,6 @@
import { Typography } from "@/components/Typography";
import { Container } from "@/components/layout/Container";
import { Heading } from "@/components/Heading";
export type FeaturesProps = {
tagline: string;
@@ -19,28 +20,24 @@ export function Features({ tagline, heading, subheading, columns, items }: Featu
return (
<section className="bg-background py-20 md:py-28">
<Container>
<div className="mx-auto mb-16 max-w-2xl text-center">
{tagline ? (
<p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
{tagline}
</p>
) : null}
<Typography variant="h2">{heading}</Typography>
{subheading ? (
<Typography variant="subtitle1" className="mt-3">
{subheading}
</Typography>
) : null}
</div>
<Heading
tagline={tagline}
title={heading}
subtitle={subheading}
align="center"
size="lg"
className="mx-auto mb-16"
maxWidth="max-w-2xl"
/>
<div className={`grid grid-cols-1 gap-x-10 gap-y-12 ${colClass[columns]}`}>
{items.map((item, i) => (
<div key={i} className="border-t border-border pt-6">
<p className="mb-3 text-xs tracking-[0.18em] text-muted-foreground">
<div key={i} className="flex flex-col gap-3">
<Typography variant="caption">
{String(i + 1).padStart(2, "0")}
</p>
</Typography>
<Typography variant="h5">{item.title}</Typography>
<Typography variant="body2" className="mt-3 text-muted-foreground">
<Typography variant="body2" className="text-muted-foreground">
{item.body}
</Typography>
</div>