@cimplify/sdk 0.40.0 → 0.40.1

package/templates/storefront-retail/app/collections/[slug]/page.tsx

@@ -70,48 +70,60 @@ async function CollectionContent({
 
   const { collection, products } = data;
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
-      <header className="mb-8 text-center">
-        <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
-          Collection
-        </p>
-        <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-2">
-          {collection.name}
-        </h1>
-        {collection.description && (
-          <p className="mx-auto mb-2 max-w-xl text-muted-foreground">
-            {collection.description}
+    <>
+      <section className="bg-foreground text-background relative overflow-hidden">
+        <div className="absolute inset-0 opacity-[0.04] pointer-events-none [background-image:radial-gradient(circle_at_2px_2px,white_1px,transparent_0)] [background-size:32px_32px]" />
+        <div className="relative max-w-7xl mx-auto px-6 sm:px-8 py-12 sm:py-14">
+          <nav className="text-[12px] font-mono text-background/60 mb-3 flex items-center gap-2">
+            <Link href="/" className="hover:text-background transition-colors">Home</Link>
+            <span>/</span>
+            <span className="text-background/90">Collections</span>
+            <span>/</span>
+            <span className="text-background/90">{collection.name}</span>
+          </nav>
+          <h1 className="text-[clamp(2rem,4vw,3rem)] font-bold m-0 -tracking-[0.025em]">
+            {collection.name}
+          </h1>
+          {collection.description && (
+            <p className="mt-3 max-w-2xl text-base text-background/75">
+              {collection.description}
+            </p>
+          )}
+          <p className="mt-4 text-[11px] font-mono uppercase tracking-[0.16em] text-background/60 tabular-nums">
+            {products.length} {products.length === 1 ? "product" : "products"}
+          </p>
+        </div>
+      </section>
+      <section className="max-w-7xl mx-auto px-6 sm:px-8 py-10 sm:py-12">
+        <ListingClient products={products} />
+        {products.length === 0 && (
+          <p className="text-center mt-8">
+            <Link href="/shop" className="text-primary font-semibold hover:underline">
+              ← Browse all products
+            </Link>
           </p>
         )}
-        <p className="text-sm text-muted-foreground">
-          {products.length} item{products.length === 1 ? "" : "s"}
-        </p>
-      </header>
-      <ListingClient products={products} />
-      {products.length === 0 && (
-        <p className="text-center mt-8">
-          <Link href="/" className="text-primary font-semibold">
-            ← Back home
-          </Link>
-        </p>
-      )}
-    </section>
+      </section>
+    </>
   );
 }
 
 function CollectionSkeleton() {
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
-      <header className="mb-8 text-center">
-        <div className="mx-auto h-3 w-20 bg-muted rounded mb-2 animate-pulse" />
-        <div className="mx-auto h-10 w-64 bg-muted rounded mb-2 animate-pulse" />
-        <div className="mx-auto h-4 w-80 bg-muted rounded animate-pulse" />
-      </header>
-      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-        {Array.from({ length: 6 }).map((_, i) => (
-          <div key={i} className="aspect-square bg-muted rounded-2xl animate-pulse" />
-        ))}
-      </div>
-    </section>
+    <>
+      <section className="bg-foreground py-12 sm:py-14">
+        <div className="max-w-7xl mx-auto px-6 sm:px-8">
+          <div className="h-3 w-32 bg-background/20 rounded mb-3 animate-pulse" />
+          <div className="h-12 w-72 bg-background/20 rounded animate-pulse" />
+        </div>
+      </section>
+      <section className="max-w-7xl mx-auto px-6 sm:px-8 py-10 sm:py-12">
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <div key={i} className="aspect-[4/3] bg-muted rounded-2xl animate-pulse" />
+          ))}
+        </div>
+      </section>
+    </>
   );
 }

package/templates/storefront-retail/app/page.tsx

@@ -2,30 +2,44 @@ import type { Metadata } from "next";
 import { Suspense } from "react";
 import { cacheTag, cacheLife } from "next/cache";
 import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
-import { Hero } from "@/components/hero";
+import { FeatureHero } from "@/components/feature-hero";
+import { CategoryTiles } from "@/components/category-tiles";
 import { CollectionStrip } from "@/components/collection-strip";
-import { CategoryGrid } from "@/components/category-grid";
+import { PromoBanner } from "@/components/promo-banner";
+import { TrustBar } from "@/components/trust-bar";
+import { BrandMarquee } from "@/components/brand-marquee";
+import { TradeInCta } from "@/components/trade-in-cta";
+import { Newsletter } from "@/components/newsletter";
+import { SectionHeading } from "@/components/section-heading";
+import { StoreProductCard } from "@/components/store-product-card";
 
 export const metadata: Metadata = {
   title: "Currents Electronics — Tech, in stock, in Accra",
   description:
-    "The latest laptops, phones, audio, and accessories — curated, in-stock, shipped same-day from Accra.",
+    "Authorised dealer for Apple, Samsung, Sony, Bose. Same-day delivery, two-year warranty, instalment payments — across Accra and West Africa.",
 };
 
+interface CollectionWithProducts {
+  collection: { id: string; slug: string; name: string; description?: string };
+  products: Product[];
+}
+
 async function getHomeData() {
   "use cache";
   cacheTag(tags.collections(), tags.categories(), tags.products());
   cacheLife("hours");
 
   const client = getServerClient();
-  const [colRes, catRes] = await Promise.all([
+  const [colRes, catRes, productsRes] = await Promise.all([
     client.catalogue.getCollections(),
     client.catalogue.getCategories(),
+    client.catalogue.getProducts({ limit: 12 }),
   ]);
   const collections = colRes.ok ? colRes.value : [];
   const categories = catRes.ok ? catRes.value : [];
+  const allProducts = productsRes.ok ? productsRes.value.items : [];
 
-  const collectionsWithProducts = await Promise.all(
+  const collectionsWithProducts: CollectionWithProducts[] = await Promise.all(
     collections.map(async (col) => {
       const r = await client.catalogue.getCollectionProducts(col.id);
       const items = r.ok
@@ -38,19 +52,121 @@ async function getHomeData() {
   return {
     collections: collectionsWithProducts.filter((x) => x.products.length > 0),
     categories,
+    featured: allProducts.slice(0, 4),
+    newArrivals: allProducts.slice(4, 12),
   };
 }
 
+const TRUST_ITEMS = [
+  {
+    label: "Delivery",
+    value: "Same-day in Accra",
+    description: "Orders before 4pm, free over GH₵500.",
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden>
+        <path d="M3 7h12v8H3zM15 10h4l3 3v2h-7z" strokeLinejoin="round" />
+        <circle cx="7" cy="17" r="1.5" />
+        <circle cx="18" cy="17" r="1.5" />
+      </svg>
+    ),
+  },
+  {
+    label: "Warranty",
+    value: "2 years on everything",
+    description: "1yr manufacturer + 1yr Currents.",
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden>
+        <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z" strokeLinejoin="round" />
+        <path d="M9 12l2 2 4-4" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    ),
+  },
+  {
+    label: "Payment",
+    value: "Pay in 3, interest-free",
+    description: "Or 6/12 months via Fidelity Bank.",
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden>
+        <rect x="3" y="6" width="18" height="12" rx="2" />
+        <line x1="3" y1="10" x2="21" y2="10" />
+      </svg>
+    ),
+  },
+  {
+    label: "Genuine",
+    value: "Authorised dealer",
+    description: "Direct from Apple, Samsung, Sony, Bose.",
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden>
+        <circle cx="12" cy="12" r="9" />
+        <path d="M8 12l3 3 5-6" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    ),
+  },
+];
+
+const HERO_IMAGE =
+  "https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?w=1200&h=1200&fit=crop&auto=format&q=85";
+
 export default async function HomePage() {
-  const { collections, categories } = await getHomeData();
+  const { collections, categories, featured, newArrivals } = await getHomeData();
+  const heroProduct = featured[0];
 
   return (
     <>
-      <Hero
-        badge="LAPTOPS · PHONES · AUDIO · ACCESSORIES"
-        title="The tech you want, in stock today."
-        subtitle="Authorised dealer for Apple, Samsung, Sony, Bose. Same-day delivery in Accra. Two-year warranty on every product."
+      <FeatureHero
+        eyebrow="Featured · in stock"
+        badge="Just landed"
+        title={
+          <>
+            Built for the way<br />
+            you actually work.
+          </>
+        }
+        description={
+          heroProduct?.description ??
+          "Apple, Samsung, Sony, Bose — direct from the source, with a two-year warranty and same-day Accra delivery on every order."
+        }
+        primaryCta={{
+          label: heroProduct ? `Shop ${heroProduct.name}` : "Shop the menu",
+          href: heroProduct ? `?product=${heroProduct.slug ?? heroProduct.id}` : "/shop",
+        }}
+        secondaryCta={{ label: "See deals", href: "/categories/deals" }}
+        imageUrl={heroProduct?.image_url ?? heroProduct?.images?.[0] ?? HERO_IMAGE}
+        imageAlt={heroProduct?.name ?? "Featured product"}
+      />
+
+      <TrustBar items={TRUST_ITEMS} />
+
+      <Suspense fallback={<CategoryTilesSkeleton />}>
+        <CategoryTiles categories={categories} />
+      </Suspense>
+
+      <PromoBanner
+        badge="Limited · ends Sunday"
+        title="Trade in your old phone, get up to GH₵3,500 off."
+        body="Send us your last-gen iPhone or Galaxy. We'll quote within 48 hours and credit the value toward your next upgrade."
+        cta={{ label: "Start trade-in", href: "/about" }}
       />
+
+      <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-20">
+        <SectionHeading
+          eyebrow="Just dropped"
+          title="New this week."
+          description="Hand-picked launches and freshly restocked staples."
+          link={{ label: "Browse all", href: "/shop" }}
+        />
+        <Suspense fallback={<GridSkeleton count={4} />}>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+            {newArrivals.slice(0, 4).map((p) => (
+              <StoreProductCard key={p.id} product={p} />
+            ))}
+          </div>
+        </Suspense>
+      </section>
+
+      <BrandMarquee />
+
       {collections.map(({ collection, products }) => (
         <Suspense
           key={collection.id}
@@ -63,33 +179,59 @@ export default async function HomePage() {
           />
         </Suspense>
       ))}
-      <Suspense fallback={<CategoryGridSkeleton />}>
-        <CategoryGrid categories={categories} />
-      </Suspense>
+
+      <TradeInCta />
+
+      <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-20">
+        <SectionHeading
+          eyebrow="Best sellers"
+          title="What everyone&apos;s buying."
+          link={{ label: "See more", href: "/shop" }}
+        />
+        <Suspense fallback={<GridSkeleton count={4} />}>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+            {newArrivals.slice(4, 8).map((p) => (
+              <StoreProductCard key={p.id} product={p} />
+            ))}
+          </div>
+        </Suspense>
+      </section>
+
+      <Newsletter />
     </>
   );
 }
 
-function StripSkeleton({ title }: { title: string }) {
+function CategoryTilesSkeleton() {
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
-      <h2 className="text-[26px] font-semibold m-0 mb-5 -tracking-[0.02em]">{title}</h2>
-      <div className="grid grid-flow-col auto-cols-[minmax(220px,1fr)] gap-4 overflow-x-auto pb-2">
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-20">
+      <div className="h-8 w-64 bg-muted rounded mb-8 animate-pulse" />
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
         {Array.from({ length: 5 }).map((_, i) => (
-          <div key={i} className="aspect-square bg-muted rounded-2xl animate-pulse" />
+          <div key={i} className="h-40 bg-muted rounded-2xl animate-pulse" />
         ))}
       </div>
     </section>
   );
 }
 
-function CategoryGridSkeleton() {
+function GridSkeleton({ count }: { count: number }) {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="aspect-[4/3] bg-muted rounded-2xl animate-pulse" />
+      ))}
+    </div>
+  );
+}
+
+function StripSkeleton({ title }: { title: string }) {
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-14">
-      <div className="h-8 w-48 bg-muted rounded mb-5 animate-pulse" />
-      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-        {Array.from({ length: 6 }).map((_, i) => (
-          <div key={i} className="h-32 bg-muted rounded-2xl animate-pulse" />
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 py-12">
+      <h2 className="text-[26px] font-semibold m-0 mb-5 -tracking-[0.02em]">{title}</h2>
+      <div className="grid grid-flow-col auto-cols-[minmax(220px,1fr)] gap-4 overflow-x-auto pb-2">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} className="aspect-square bg-muted rounded-2xl animate-pulse" />
         ))}
       </div>
     </section>

package/templates/storefront-retail/app/shop/page.tsx

@@ -1,11 +1,13 @@
 import type { Metadata } from "next";
+import { Suspense } from "react";
 import { cacheTag, cacheLife } from "next/cache";
 import { getServerClient, tags } from "@cimplify/sdk/server";
 import { ShopClient } from "./shop-client";
 
 export const metadata: Metadata = {
-  title: "Shop — Akua's Bakery",
-  description: "Browse the full catalogue: breads, pastries, cakes, drinks, merch, and more.",
+  title: "Shop — Currents Electronics",
+  description:
+    "Browse every laptop, phone, audio device, accessory, and gaming product we stock. Authorised dealer pricing, 2-year warranty.",
 };
 
 async function getShopData() {
@@ -26,5 +28,36 @@ async function getShopData() {
 
 export default async function ShopPage() {
   const { products, categories } = await getShopData();
-  return <ShopClient products={products} categories={categories} />;
+  return (
+    <>
+      <section className="bg-foreground text-background relative overflow-hidden">
+        <div className="absolute inset-0 opacity-[0.04] pointer-events-none [background-image:radial-gradient(circle_at_2px_2px,white_1px,transparent_0)] [background-size:32px_32px]" />
+        <div className="relative max-w-7xl mx-auto px-6 sm:px-8 py-12 sm:py-14">
+          <p className="text-[11px] font-mono uppercase tracking-[0.2em] text-background/60 mb-2">
+            Catalogue · {products.length} products
+          </p>
+          <h1 className="text-[clamp(2rem,4vw,3rem)] font-bold m-0 -tracking-[0.025em] leading-[1.05]">
+            Every product we stock.
+          </h1>
+          <p className="mt-3 max-w-xl text-base text-background/75">
+            Filter, sort, search. Authorised dealer pricing, two-year warranty,
+            same-day Accra delivery on every order.
+          </p>
+        </div>
+      </section>
+      <Suspense
+        fallback={
+          <div className="max-w-7xl mx-auto px-6 sm:px-8 py-10">
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <div key={i} className="aspect-[4/3] bg-muted rounded-2xl animate-pulse" />
+              ))}
+            </div>
+          </div>
+        }
+      >
+        <ShopClient products={products} categories={categories} />
+      </Suspense>
+    </>
+  );
 }

package/templates/storefront-retail/app/shop/shop-client.tsx

@@ -8,6 +8,10 @@ import { StoreProductCard } from "@/components/store-product-card";
  * Client island for the shop page. Server-side fetches all products and
  * categories (cached via `'use cache'` in `app/shop/page.tsx`), then hands
  * them to `<CataloguePage>` which owns the interactive filter / sort state.
+ *
+ * The page hero (in `app/shop/page.tsx`) already provides the title; we
+ * pass an empty `title` and override the SDK heading via className so the
+ * page reads as one continuous design.
  */
 export function ShopClient({
   products,
@@ -18,10 +22,11 @@ export function ShopClient({
 }) {
   return (
     <CataloguePage
-      title="The Menu"
+      title="All products"
       products={products}
       categories={categories}
       renderCard={(p) => <StoreProductCard product={p} />}
+      className="max-w-7xl mx-auto px-6 sm:px-8 py-10 sm:py-12"
     />
   );
 }

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

@@ -0,0 +1,36 @@
+const BRANDS = [
+  "Apple",
+  "Samsung",
+  "Sony",
+  "Bose",
+  "Logitech",
+  "Anker",
+  "JBL",
+  "Microsoft",
+  "Lenovo",
+  "DJI",
+];
+
+/**
+ * Brand authority strip. Wordmark-only (avoids licensing issues with real
+ * logos), JetBrains Mono for the brand-as-typography aesthetic.
+ */
+export function BrandMarquee() {
+  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">
+        Authorised dealer · genuine stock · 2-year warranty
+      </p>
+      <div className="flex items-center justify-around gap-10 sm:gap-14 flex-wrap px-6">
+        {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-retail/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-retail/components/feature-hero.tsx

@@ -0,0 +1,83 @@
+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;
+}
+
+/**
+ * Apple-style split hero. Left: copy + CTAs. Right: large product image.
+ * Stacks to image-on-top on mobile.
+ */
+export function FeatureHero({
+  eyebrow,
+  title,
+  description,
+  primaryCta,
+  secondaryCta,
+  imageUrl,
+  imageAlt,
+  badge,
+}: FeatureHeroProps) {
+  return (
+    <section className="relative overflow-hidden bg-foreground text-background">
+      <div className="absolute inset-0 opacity-[0.04] pointer-events-none [background-image:radial-gradient(circle_at_2px_2px,white_1px,transparent_0)] [background-size:40px_40px]" />
+      <div className="relative max-w-7xl mx-auto px-6 sm:px-8 py-16 sm:py-20 lg:py-24 grid grid-cols-1 lg:grid-cols-[1.1fr_1fr] gap-10 lg:gap-16 items-center">
+        <div>
+          {badge && (
+            <span className="inline-flex items-center gap-2 mb-5 px-3 py-1.5 rounded-full bg-primary/15 border border-primary/40 text-primary-foreground/95 text-[11px] font-mono uppercase tracking-[0.16em]">
+              <span className="grid place-items-center w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
+              {badge}
+            </span>
+          )}
+          <p className="text-[12px] font-mono uppercase tracking-[0.2em] text-background/60 mb-3">
+            {eyebrow}
+          </p>
+          <h1 className="text-[clamp(2.5rem,6vw,4.75rem)] font-bold m-0 mb-5 -tracking-[0.035em] leading-[1.02]">
+            {title}
+          </h1>
+          <p className="text-base sm:text-lg text-background/75 leading-relaxed max-w-xl">
+            {description}
+          </p>
+          <div className="flex flex-wrap items-center gap-3 mt-7">
+            <Link
+              href={primaryCta.href}
+              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md bg-primary text-primary-foreground font-semibold text-sm hover:bg-primary/90 transition-colors"
+            >
+              {primaryCta.label}
+              <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>
+            {secondaryCta && (
+              <Link
+                href={secondaryCta.href}
+                className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md border border-background/25 text-background hover:bg-background/10 transition-colors text-sm font-medium"
+              >
+                {secondaryCta.label}
+              </Link>
+            )}
+          </div>
+        </div>
+        <div className="relative aspect-[4/3] lg:aspect-square w-full rounded-2xl overflow-hidden bg-background/5 ring-1 ring-background/10">
+          <Image
+            src={imageUrl}
+            alt={imageAlt}
+            fill
+            sizes="(min-width: 1024px) 50vw, 100vw"
+            className="object-cover"
+            priority
+          />
+          <div className="absolute inset-0 bg-gradient-to-tr from-foreground/40 via-transparent to-transparent pointer-events-none" />
+        </div>
+      </div>
+    </section>
+  );
+}