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>

components/landing/newsletter-cta.tsx

@@ -1,7 +1,9 @@
 import { useState } from "react";
 import { cn } from "@/lib/utils";
-import { Typography } from "@/components/Typography";
 import { Container } from "@/components/layout/Container";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Heading } from "@/components/Heading";
 
 export type EmailProvider = "none" | "mailchimp" | "klaviyo";
 
@@ -109,92 +111,80 @@ export function NewsletterCta({
   const Form = (
     <form
       onSubmit={submit}
-      className="flex w-full max-w-md items-center border-b border-foreground/30 focus-within:border-foreground"
+      className="flex w-full max-w-md flex-col gap-3 sm:flex-row sm:items-center"
     >
-      <input
+      <Input
         type="email"
         required
         value={email}
         onChange={(e) => setEmail(e.target.value)}
-        placeholder="you@example.com"
-        className="flex-1 bg-transparent py-3 text-sm placeholder:text-muted-foreground focus:outline-none"
+        placeholder="Enter your email"
+        className="h-11 flex-1"
       />
-      <button
-        type="submit"
-        disabled={submitting}
-        className="ml-3 text-sm font-medium tracking-wide hover:opacity-70 disabled:opacity-40"
-      >
-        {submitting ? "…" : buttonLabel} →
-      </button>
+      <Button type="submit" size="lg" disabled={submitting} className="h-11">
+        {submitting ? "Joining…" : buttonLabel}
+      </Button>
     </form>
   );
 
-  if (layout === "split") {
-    return (
-      <section className="bg-background">
-        <Container className="py-16 md:py-24">
-          <div className="grid grid-cols-1 items-center gap-12 md:grid-cols-2">
-            <div>
-              {imageUrl ? (
+  const isStacked = layout === "stacked";
+
+  return (
+    <section className="bg-background">
+      <Container className="py-20 md:py-28">
+        <div
+          className={cn(
+            "grid grid-cols-1 gap-10",
+            isStacked
+              ? "mx-auto max-w-3xl items-center text-center"
+              : "items-center md:grid-cols-12 md:gap-16",
+          )}
+        >
+          {imageUrl ? (
+            <div className={cn(!isStacked && "md:col-span-7")}>
+              <div className="relative overflow-hidden rounded-xl bg-muted">
                 <img
                   src={imageUrl}
                   alt=""
-                  className="aspect-[5/4] w-full rounded-md object-cover"
+                  className={cn(
+                    "w-full object-cover transition-transform duration-700 hover:scale-105",
+                    isStacked ? "aspect-[16/9]" : "aspect-[4/3]",
+                  )}
                 />
-              ) : null}
-            </div>
-            <div className="flex flex-col items-start">
-              {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 max-w-md">
-                  {subheading}
-                </Typography>
-              ) : null}
-              <div className="mt-8 w-full">
-                {submitted ? (
-                  <p className="text-sm text-muted-foreground">
-                    Thanks — we'll be in touch.
-                  </p>
-                ) : (
-                  Form
-                )}
               </div>
             </div>
+          ) : null}
+          <div
+            className={cn(
+              "flex w-full flex-col",
+              isStacked ? "items-center" : "items-start md:col-span-5",
+            )}
+          >
+            <Heading
+              tagline={tagline}
+              title={heading}
+              subtitle={subheading}
+              align={isStacked ? "center" : "left"}
+              size="lg"
+              subtitleClassName={isStacked ? "mx-auto max-w-xl" : "max-w-md"}
+            />
+            <div
+              className={cn(
+                "mt-8 w-full",
+                isStacked && "flex justify-center",
+              )}
+            >
+              {submitted ? (
+                <p className="text-sm font-medium uppercase tracking-wide">
+                  You're in. See you Monday at 5:30am.
+                </p>
+              ) : (
+                Form
+              )}
+            </div>
           </div>
-        </Container>
-      </section>
-    );
-  }
-
-  return (
-    <section className="bg-muted/40 py-20 md:py-28">
-      <div className="container mx-auto max-w-2xl px-6 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 className={cn("mx-auto mt-10 flex w-full max-w-md justify-center")}>
-          {submitted ? (
-            <p className="text-sm text-muted-foreground">
-              Thanks — we'll be in touch.
-            </p>
-          ) : (
-            Form
-          )}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }