@cimplify/sdk 0.40.1 → 0.41.0

package/templates/storefront-fashion/app/terms/page.tsx

@@ -0,0 +1,44 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Terms of Service — ${brand.name}`,
+  description: `The rules of the road for ordering from ${brand.name}.`,
+};
+
+export default function TermsPage() {
+  const t = brand.terms;
+  return (
+    <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
+      <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2 not-prose">
+        {t.eyebrow}
+      </p>
+      <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-bold mb-2 -tracking-[0.025em]">
+        {t.title}
+      </h1>
+      <p className="text-sm text-muted-foreground not-prose mb-10">
+        Last updated: {t.lastUpdated}
+      </p>
+
+      <section className="space-y-5 leading-relaxed text-foreground/90">
+        {t.sections.map((s) => (
+          <div key={s.heading}>
+            <h2 className="text-2xl font-semibold mt-0 -tracking-[0.02em]">{s.heading}</h2>
+            {typeof s.body === "string" ? (
+              <p>{s.body}</p>
+            ) : (
+              <>
+                <p>{s.body.intro}</p>
+                <ul className="list-disc pl-6 space-y-2">
+                  {s.body.bullets.map((b) => (
+                    <li key={b}>{b}</li>
+                  ))}
+                </ul>
+              </>
+            )}
+          </div>
+        ))}
+      </section>
+    </article>
+  );
+}

package/templates/storefront-fashion/components/brand-marquee.tsx

@@ -0,0 +1,27 @@
+import { brand } from "@/lib/brand";
+
+/**
+ * Brand authority strip. Wordmark-only (avoids licensing issues with real
+ * logos), monospaced for the brand-as-typography aesthetic.
+ */
+export function BrandMarquee() {
+  const strip = brand.brandStrip;
+  if (!strip || strip.brands.length === 0) return null;
+  return (
+    <section className="border-y border-border bg-background py-8 sm:py-10 overflow-hidden">
+      <p className="text-center text-[11px] font-mono uppercase tracking-[0.2em] text-muted-foreground mb-6">
+        {strip.headline}
+      </p>
+      <div className="flex items-center justify-around gap-10 sm:gap-14 flex-wrap px-6">
+        {strip.brands.map((b) => (
+          <span
+            key={b}
+            className="text-[clamp(1.25rem,2vw,1.75rem)] font-semibold text-muted-foreground hover:text-foreground transition-colors -tracking-[0.025em] opacity-70 hover:opacity-100"
+          >
+            {b}
+          </span>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/storefront-fashion/components/cart-pill.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import Link from "next/link";
+import { useCartCount } from "@/lib/cart";
+
+/**
+ * Cart pill — dynamic island. Reads the live cart count via the SDK and
+ * renders a link to `/cart`. Wrap in `<Suspense fallback={<CartPillSkeleton/>}>`
+ * so the cached header chrome streams without blocking on the cart fetch.
+ */
+export function CartPill() {
+  const { count } = useCartCount();
+  return (
+    <Link
+      href="/cart"
+      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105"
+    >
+      Cart · {count}
+    </Link>
+  );
+}
+
+export function CartPillSkeleton() {
+  return (
+    <span
+      aria-hidden
+      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground/80 text-background text-xs font-semibold tracking-wide"
+    >
+      Cart · …
+    </span>
+  );
+}

package/templates/storefront-fashion/components/category-grid.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { CategoryGrid as SdkCategoryGrid } from "@cimplify/sdk/react";
+import type { Category } from "@cimplify/sdk";
+
+/**
+ * Homepage category tiles — defers to the SDK's <CategoryGrid/> for layout
+ * and accessibility, and routes selections to /categories/:slug.
+ */
+export function CategoryGrid({ categories }: { categories?: Category[] }) {
+  const router = useRouter();
+  return (
+    <section className="max-w-7xl mx-auto px-8 pt-14">
+      <h2 className="font-serif text-[28px] font-semibold m-0 mb-5">Browse the menu</h2>
+      <SdkCategoryGrid
+        categories={categories}
+        onSelect={(c) => router.push(`/categories/${c.slug}`)}
+        classNames={{
+          item: "flex flex-col gap-1 p-6 bg-card border border-border rounded-2xl cursor-pointer text-left transition-all hover:border-primary hover:-translate-y-0.5",
+          name: "font-serif text-lg font-semibold text-foreground",
+          description: "text-xs text-muted-foreground",
+          count: "text-xs text-muted-foreground mt-1",
+        }}
+      />
+    </section>
+  );
+}

package/templates/storefront-fashion/components/category-tiles.tsx

@@ -0,0 +1,104 @@
+import Link from "next/link";
+import Image from "next/image";
+import type { Category } from "@cimplify/sdk";
+
+interface CategoryTilesProps {
+  categories: Category[];
+}
+
+const ICONS: Record<string, React.ReactNode> = {
+  phones: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-7 h-7" aria-hidden>
+      <rect x="6" y="2" width="12" height="20" rx="2.5" />
+      <line x1="12" y1="18" x2="12" y2="18" strokeWidth="2.5" strokeLinecap="round" />
+    </svg>
+  ),
+  laptops: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-7 h-7" aria-hidden>
+      <rect x="3" y="4" width="18" height="12" rx="1.5" />
+      <line x1="2" y1="20" x2="22" y2="20" strokeLinecap="round" />
+    </svg>
+  ),
+  audio: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-7 h-7" aria-hidden>
+      <path d="M3 14v-2a9 9 0 0 1 18 0v2" />
+      <rect x="2" y="14" width="5" height="6" rx="1.5" />
+      <rect x="17" y="14" width="5" height="6" rx="1.5" />
+    </svg>
+  ),
+  accessories: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-7 h-7" aria-hidden>
+      <rect x="2" y="6" width="14" height="10" rx="2" />
+      <path d="M16 12h4l2 2v0l-2 2h-4" />
+    </svg>
+  ),
+  gaming: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-7 h-7" aria-hidden>
+      <path d="M5 7h14a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3h-1l-2-3H8l-2 3H5a3 3 0 0 1-3-3v-4a3 3 0 0 1 3-3z" />
+      <line x1="9" y1="11" x2="9" y2="13" strokeLinecap="round" />
+      <line x1="8" y1="12" x2="10" y2="12" strokeLinecap="round" />
+      <circle cx="15" cy="11" r="0.75" fill="currentColor" />
+      <circle cx="17" cy="13" r="0.75" fill="currentColor" />
+    </svg>
+  ),
+};
+
+export function CategoryTiles({ categories }: CategoryTilesProps) {
+  if (categories.length === 0) return null;
+  return (
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-20">
+      <div className="flex items-end justify-between gap-6 mb-8">
+        <div>
+          <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2">
+            Shop the catalogue
+          </p>
+          <h2 className="text-[clamp(1.75rem,3vw,2.25rem)] font-bold -tracking-[0.025em]">
+            Pick your category.
+          </h2>
+        </div>
+        <Link
+          href="/shop"
+          className="text-sm font-semibold text-primary hover:underline whitespace-nowrap hidden sm:inline-flex items-center gap-1"
+        >
+          See everything
+          <svg viewBox="0 0 12 12" className="w-3 h-3" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+            <path d="M3 6h7m0 0L7 3m3 3L7 9" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </Link>
+      </div>
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
+        {categories.map((c, i) => (
+          <Link
+            key={c.id}
+            href={`/categories/${c.slug}`}
+            className="group relative overflow-hidden rounded-2xl bg-card border border-border p-5 hover:border-primary hover:-translate-y-0.5 transition-all"
+          >
+            <div className="flex items-start justify-between mb-12">
+              <div className="grid place-items-center w-10 h-10 rounded-lg bg-primary/10 text-primary">
+                {ICONS[c.slug] ?? (
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-7 h-7" aria-hidden>
+                    <rect x="3" y="3" width="18" height="18" rx="2" />
+                  </svg>
+                )}
+              </div>
+              <span className="text-[10px] font-mono text-muted-foreground tabular-nums">
+                {String(i + 1).padStart(2, "0")}
+              </span>
+            </div>
+            <p className="text-base font-semibold mb-1 -tracking-[0.015em]">{c.name}</p>
+            {c.product_count != null && (
+              <p className="text-xs text-muted-foreground">
+                {c.product_count} {c.product_count === 1 ? "product" : "products"}
+              </p>
+            )}
+            <span className="absolute right-4 bottom-4 grid place-items-center w-7 h-7 rounded-full bg-foreground text-background opacity-0 group-hover:opacity-100 transition-opacity">
+              <svg viewBox="0 0 12 12" className="w-3 h-3" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+                <path d="M3 6h7m0 0L7 3m3 3L7 9" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            </span>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/storefront-fashion/components/collection-strip.tsx

@@ -0,0 +1,45 @@
+import Link from "next/link";
+import type { Collection, Product } from "@cimplify/sdk";
+import { StoreProductCard } from "./store-product-card";
+
+interface CollectionStripProps {
+  collection: Collection;
+  products: Product[];
+  collectionHref?: string;
+}
+
+/**
+ * Horizontal strip of products under a collection title. Cards come from the
+ * SDK so every variant (Food, Bundle, Composite, Service, …) renders
+ * correctly; clicks open the shared URL-driven product modal.
+ */
+export function CollectionStrip({ collection, products, collectionHref }: CollectionStripProps) {
+  if (products.length === 0) return null;
+  return (
+    <section className="max-w-7xl mx-auto px-8 pt-12">
+      <header className="grid grid-cols-[1fr_auto] items-end gap-4 mb-5">
+        <h2 className="font-serif text-[28px] font-semibold m-0">{collection.name}</h2>
+        {collectionHref && (
+          <Link
+            href={collectionHref}
+            className="text-[13px] font-semibold text-primary hover:underline"
+          >
+            See all →
+          </Link>
+        )}
+        {collection.description && (
+          <p className="col-span-full m-0 mt-1 text-sm text-muted-foreground">
+            {collection.description}
+          </p>
+        )}
+      </header>
+      <div className="grid grid-flow-col auto-cols-[minmax(220px,1fr)] gap-4 overflow-x-auto snap-x snap-mandatory pb-2">
+        {products.slice(0, 8).map((p) => (
+          <div key={p.id} className="snap-start">
+            <StoreProductCard product={p} />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/storefront-fashion/components/feature-hero.tsx

@@ -0,0 +1,82 @@
+import Link from "next/link";
+import Image from "next/image";
+
+interface FeatureHeroProps {
+  eyebrow: string;
+  title: React.ReactNode;
+  description: string;
+  primaryCta: { label: string; href: string };
+  secondaryCta?: { label: string; href: string };
+  imageUrl: string;
+  imageAlt: string;
+  badge?: string;
+}
+
+/**
+ * Editorial full-bleed fashion hero. Image fills the viewport; copy sits
+ * over a dark gradient. Strings come from `brand.hero` at the call site.
+ */
+export function FeatureHero({
+  eyebrow,
+  title,
+  description,
+  primaryCta,
+  secondaryCta,
+  imageUrl,
+  imageAlt,
+  badge,
+}: FeatureHeroProps) {
+  return (
+    <section className="relative w-full h-[clamp(560px,80vh,820px)] overflow-hidden bg-foreground text-background">
+      <Image
+        src={imageUrl}
+        alt={imageAlt}
+        fill
+        sizes="100vw"
+        className="object-cover"
+        priority
+      />
+      <div className="absolute inset-0 bg-gradient-to-t from-foreground via-foreground/40 to-foreground/0 pointer-events-none" />
+      <div className="absolute inset-0 flex items-end">
+        <div className="w-full max-w-7xl mx-auto px-6 sm:px-10 pb-12 sm:pb-16 lg:pb-20">
+          {badge && (
+            <span className="inline-flex items-center gap-2 mb-5 px-3 py-1.5 rounded-full bg-background/10 border border-background/30 backdrop-blur-md text-[11px] uppercase tracking-[0.2em] font-medium">
+              <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
+              {badge}
+            </span>
+          )}
+          {eyebrow && (
+            <p className="text-[12px] uppercase tracking-[0.3em] text-background/70 mb-3">
+              {eyebrow}
+            </p>
+          )}
+          <h1 className="font-display text-[clamp(3.5rem,11vw,9rem)] m-0 mb-4 -tracking-[0.04em] leading-[0.92] uppercase">
+            {title}
+          </h1>
+          <p className="max-w-xl text-base sm:text-lg text-background/85 leading-relaxed mb-8">
+            {description}
+          </p>
+          <div className="flex flex-wrap items-center gap-3">
+            <Link
+              href={primaryCta.href}
+              className="inline-flex items-center gap-2 px-7 py-3.5 bg-background text-foreground font-bold text-sm uppercase tracking-wider hover:bg-primary hover:text-primary-foreground transition-colors"
+            >
+              {primaryCta.label}
+              <svg viewBox="0 0 12 12" className="w-3 h-3" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden>
+                <path d="M3 6h7m0 0L7 3m3 3L7 9" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            </Link>
+            {secondaryCta && (
+              <Link
+                href={secondaryCta.href}
+                className="inline-flex items-center gap-2 px-7 py-3.5 border border-background/40 text-background hover:bg-background/10 transition-colors text-sm uppercase tracking-wider font-medium"
+              >
+                {secondaryCta.label}
+              </Link>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/storefront-fashion/components/footer.tsx

@@ -0,0 +1,153 @@
+import Link from "next/link";
+import { brand } from "@/lib/brand";
+
+const ICONS: Record<string, React.ReactNode> = {
+  instagram: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden className="w-5 h-5">
+      <rect x="3" y="3" width="18" height="18" rx="5" />
+      <circle cx="12" cy="12" r="4" />
+      <circle cx="17.5" cy="6.5" r="0.75" fill="currentColor" />
+    </svg>
+  ),
+  x: (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
+      <path d="M18 2h3l-7.5 8.6L22 22h-6.6l-5-6.5L4 22H1l8-9.2L1.4 2H8l4.6 6 5.4-6z" />
+    </svg>
+  ),
+  tiktok: (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
+      <path d="M16 3v3.5a4.5 4.5 0 0 0 4.5 4.5V14a7.5 7.5 0 0 1-4.5-1.5V16a5 5 0 1 1-5-5v3a2 2 0 1 0 2 2V3z" />
+    </svg>
+  ),
+  facebook: (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
+      <path d="M14 9V7a1 1 0 0 1 1-1h2V3h-3a4 4 0 0 0-4 4v2H8v3h2v9h3v-9h2.5l.5-3H13z" />
+    </svg>
+  ),
+  youtube: (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
+      <path d="M22.5 6.5a2.6 2.6 0 0 0-1.8-1.8C19 4.2 12 4.2 12 4.2s-7 0-8.7.5A2.6 2.6 0 0 0 1.5 6.5C1 8.2 1 12 1 12s0 3.8.5 5.5a2.6 2.6 0 0 0 1.8 1.8C5 19.8 12 19.8 12 19.8s7 0 8.7-.5a2.6 2.6 0 0 0 1.8-1.8c.5-1.7.5-5.5.5-5.5s0-3.8-.5-5.5zM10 15.5v-7l6 3.5-6 3.5z" />
+    </svg>
+  ),
+  linkedin: (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
+      <path d="M4 4h4v16H4zM6 2.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM10 8h4v2.5h.1c.6-1.1 2-2.5 4-2.5 4 0 4.9 2.6 4.9 6V20h-4v-5c0-1.5-.5-3-2.3-3-1.7 0-2.5 1.3-2.5 3v5h-4z" />
+    </svg>
+  ),
+  whatsapp: (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
+      <path d="M12 2a10 10 0 0 0-8.6 15l-1.4 5 5.2-1.4A10 10 0 1 0 12 2zm5 14.2c-.2.6-1.2 1.2-1.7 1.2-.5.1-1.1.1-1.7-.1-.4-.1-.9-.3-1.5-.6a8.4 8.4 0 0 1-3.7-3.4c-.7-1-1-1.8-1-2.5 0-.7.4-1.1.6-1.3.2-.2.4-.2.5-.2h.4c.1 0 .3 0 .4.3l.6 1.4c.1.2 0 .3 0 .4l-.3.4-.3.3c-.1.1-.2.2-.1.4.2.4.7 1.1 1.4 1.8.9.8 1.7 1.1 1.9 1.2.2.1.3.1.5-.1l.6-.7c.2-.2.3-.2.5-.1l1.4.7c.2.1.3.2.4.3.1.2.1.6 0 1z" />
+    </svg>
+  ),
+};
+
+const FALLBACK_ICON = (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden className="w-5 h-5">
+    <circle cx="12" cy="12" r="9" />
+  </svg>
+);
+
+export async function Footer() {
+  "use cache";
+  const year = new Date().getFullYear();
+  return (
+    <footer className="mt-16 border-t border-border bg-foreground text-background/80 text-sm">
+      <div className="max-w-7xl mx-auto px-6 sm:px-8 pt-12 pb-8">
+        <div className="grid gap-10 md:grid-cols-[1.4fr_repeat(4,1fr)]">
+          <div>
+            <div className="flex items-center gap-2.5 mb-4">
+              <span className="grid place-items-center w-8 h-8 rounded-md bg-primary text-primary-foreground text-[13px] font-bold font-mono">
+                {brand.shortName.charAt(0).toUpperCase()}
+              </span>
+              <span className="text-background text-lg font-bold -tracking-[0.025em]">
+                {brand.name}
+              </span>
+            </div>
+            <p className="leading-relaxed mb-4 max-w-sm">{brand.footer.blurb}</p>
+            <address className="not-italic space-y-1">
+              <p className="m-0">{brand.contact.address}</p>
+              <p className="m-0">
+                <a
+                  href={`tel:${brand.contact.phoneTel}`}
+                  className="hover:text-background transition-colors"
+                >
+                  {brand.contact.phone}
+                </a>
+              </p>
+              <p className="m-0">
+                <a
+                  href={`mailto:${brand.contact.email}`}
+                  className="hover:text-background transition-colors"
+                >
+                  {brand.contact.email}
+                </a>
+              </p>
+              <p className="m-0 text-xs">{brand.contact.hours}</p>
+            </address>
+            <div className="flex items-center gap-3 mt-5">
+              {brand.socials.map((s) => (
+                <a
+                  key={s.label}
+                  href={s.href}
+                  aria-label={s.label}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center justify-center w-9 h-9 rounded-md border border-background/20 hover:bg-primary hover:border-primary transition-colors"
+                >
+                  {(s.icon && ICONS[s.icon]) ?? FALLBACK_ICON}
+                </a>
+              ))}
+            </div>
+          </div>
+          {brand.footer.sitemap.map((section) => (
+            <nav key={section.title} aria-labelledby={`footer-${section.title}`}>
+              <p
+                id={`footer-${section.title}`}
+                className="text-background font-mono mb-3 text-[11px] uppercase tracking-[0.12em]"
+              >
+                {section.title}
+              </p>
+              <ul className="space-y-2 m-0 p-0 list-none">
+                {section.links.map((link) => (
+                  <li key={link.label}>
+                    <Link href={link.href} className="hover:text-background transition-colors">
+                      {link.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          ))}
+        </div>
+
+        <div className="mt-12 pt-6 border-t border-background/15 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs">
+          <p className="m-0">© {year} {brand.name}. All rights reserved.</p>
+          {brand.footer.poweredBy && (
+            <p className="m-0 inline-flex items-center gap-1.5">
+              <span className="opacity-70">Powered by</span>
+              <a
+                href={brand.footer.poweredBy.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={brand.footer.poweredBy.label}
+                className="inline-flex items-center gap-1 text-background hover:text-primary transition-colors"
+              >
+                <span className="font-semibold tracking-tight">{brand.footer.poweredBy.label}</span>
+                <svg
+                  viewBox="0 0 12 12"
+                  aria-hidden
+                  className="w-3 h-3 opacity-70"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                >
+                  <path d="M3 9L9 3M9 3H4M9 3v5" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              </a>
+            </p>
+          )}
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/storefront-fashion/components/header.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link";
+import { Suspense } from "react";
+import { NavLink } from "./nav-link";
+import { CartPill, CartPillSkeleton } from "./cart-pill";
+import { brand } from "@/lib/brand";
+
+/**
+ * Server-rendered header chrome. Big block-letter brand mark, mono-spaced
+ * uppercase nav. Active-link styling and live cart count live in client
+ * islands behind their own Suspense boundaries.
+ */
+export function Header() {
+  return (
+    <header className="sticky top-0 z-30 flex items-center justify-between px-6 sm:px-10 py-4 border-b border-border bg-background/95 backdrop-blur-md">
+      <Link href="/" className="flex items-center gap-3">
+        <span className="font-display text-[22px] uppercase -tracking-[0.04em] leading-none">
+          {brand.shortName}
+        </span>
+        <span className="hidden sm:inline text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
+          {brand.microTag}
+        </span>
+      </Link>
+      <nav className="flex items-center gap-5 sm:gap-7 uppercase tracking-wide text-[12px]">
+        {brand.header.nav.map((link) => (
+          <Suspense key={link.href} fallback={<NavLinkFallback>{link.label}</NavLinkFallback>}>
+            <NavLink href={link.href}>{link.label}</NavLink>
+          </Suspense>
+        ))}
+        <Suspense fallback={<CartPillSkeleton />}>
+          <CartPill />
+        </Suspense>
+      </nav>
+    </header>
+  );
+}
+
+function NavLinkFallback({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="text-[12px] font-medium uppercase tracking-wider text-muted-foreground">
+      {children}
+    </span>
+  );
+}

package/templates/storefront-fashion/components/hero.tsx

@@ -0,0 +1,28 @@
+interface HeroProps {
+  badge?: string;
+  title: string;
+  subtitle?: string;
+}
+
+export function Hero({ badge, title, subtitle }: HeroProps) {
+  return (
+    <section className="relative px-8 py-20 text-center overflow-hidden bg-gradient-to-br from-foreground via-foreground to-primary text-background">
+      <div className="absolute inset-0 opacity-[0.06] pointer-events-none [background-image:radial-gradient(circle_at_2px_2px,white_1px,transparent_0)] [background-size:32px_32px]" />
+      <div className="relative max-w-3xl mx-auto">
+        {badge && (
+          <span className="inline-block mb-5 px-3.5 py-1.5 rounded-full bg-primary/15 border border-primary/30 text-primary-foreground/90 text-[11px] font-semibold uppercase tracking-[0.16em] font-mono">
+            {badge}
+          </span>
+        )}
+        <h1 className="text-[clamp(2.5rem,6vw,4rem)] font-bold m-0 -tracking-[0.03em] leading-[1.05]">
+          {title}
+        </h1>
+        {subtitle && (
+          <p className="mx-auto mt-5 max-w-2xl text-base sm:text-lg text-background/80 leading-relaxed">
+            {subtitle}
+          </p>
+        )}
+      </div>
+    </section>
+  );
+}

package/templates/storefront-fashion/components/nav-link.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
+  const pathname = usePathname();
+  const active = pathname === href;
+  return (
+    <Link
+      href={href}
+      className={[
+        "text-[13px] font-medium tracking-wide transition-colors",
+        active ? "text-primary" : "text-muted-foreground hover:text-foreground",
+      ].join(" ")}
+    >
+      {children}
+    </Link>
+  );
+}

package/templates/storefront-fashion/components/newsletter.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useState } from "react";
+import { brand } from "@/lib/brand";
+
+export function Newsletter() {
+  const n = brand.newsletter;
+  const [email, setEmail] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+
+  return (
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-20">
+      <div className="rounded-3xl border border-border bg-card p-8 sm:p-12 grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+        <div>
+          <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2">
+            {n.eyebrow}
+          </p>
+          <h2 className="text-[clamp(1.5rem,3vw,2rem)] font-bold m-0 mb-3 -tracking-[0.025em]">
+            {n.title}
+          </h2>
+          <p className="text-muted-foreground leading-relaxed">{n.body}</p>
+        </div>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            setSubmitted(true);
+          }}
+          className="flex flex-col sm:flex-row gap-2"
+        >
+          <input
+            type="email"
+            required
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder={n.placeholder}
+            disabled={submitted}
+            className="flex-1 px-4 py-3 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-shadow text-sm disabled:opacity-50"
+          />
+          <button
+            type="submit"
+            disabled={submitted}
+            className="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-md bg-foreground text-background font-semibold text-sm hover:bg-primary transition-colors disabled:opacity-50"
+          >
+            {submitted ? n.successLabel : n.submitLabel}
+          </button>
+        </form>
+      </div>
+    </section>
+  );
+}