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,6 +1,7 @@
import React from 'react';
import { Link } from 'react-router';
import { Card, CardContent } from '@/components/ui/card';
import { Typography } from '@/components/Typography';
interface CollectionImage {
url: string;
@@ -40,9 +41,12 @@ const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
{/* Collection Info */}
<CardContent className="p-6">
<h3 className="text-2xl font-bold text-foreground mb-3 group-hover:text-muted-foreground transition-colors font-heading">
<Typography
variant="subtitle1"
className="mb-3 font-semibold tracking-tight text-foreground transition-colors group-hover:text-muted-foreground"
>
{collection.title}
</h3>
</Typography>
{collection.description && (
<p className="text-muted-foreground">