@cimplify/sdk 0.40.0 → 0.41.0

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

@@ -1,84 +1,51 @@
 import Link from "next/link";
+import { brand } from "@/lib/brand";
 
-const SOCIALS: { label: string; href: string; svg: React.ReactNode }[] = [
-  {
-    label: "Instagram",
-    href: "https://instagram.com/currentselectronics",
-    svg: (
-      <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>
-    ),
-  },
-  {
-    label: "X",
-    href: "https://x.com/currentselectronics",
-    svg: (
-      <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>
-    ),
-  },
-  {
-    label: "YouTube",
-    href: "https://youtube.com/@currentselectronics",
-    svg: (
-      <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>
-    ),
-  },
-  {
-    label: "WhatsApp",
-    href: "https://wa.me/233244000000",
-    svg: (
-      <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 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 SITEMAP: { title: string; links: { label: string; href: string }[] }[] = [
-  {
-    title: "Shop",
-    links: [
-      { label: "All products", href: "/shop" },
-      { label: "Laptops", href: "/categories/laptops" },
-      { label: "Phones", href: "/categories/phones" },
-      { label: "Audio", href: "/categories/audio" },
-      { label: "Accessories", href: "/categories/accessories" },
-      { label: "Deals", href: "/categories/deals" },
-    ],
-  },
-  {
-    title: "Support",
-    links: [
-      { label: "Contact", href: "mailto:hello@currentselectronics.test" },
-      { label: "Warranty", href: "/faq#warranty--repairs" },
-      { label: "Returns", href: "/faq#payment--returns" },
-      { label: "Shipping", href: "/faq#ordering--delivery" },
-    ],
-  },
-  {
-    title: "Company",
-    links: [
-      { label: "About", href: "/about" },
-      { label: "Trade-in", href: "/about" },
-      { label: "Business sales", href: "mailto:business@currentselectronics.test" },
-      { label: "Careers", href: "/about" },
-    ],
-  },
-  {
-    title: "Legal",
-    links: [
-      { label: "Terms of Service", href: "/terms" },
-      { label: "Privacy Policy", href: "/privacy" },
-    ],
-  },
-];
+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";
@@ -90,36 +57,35 @@ export async function Footer() {
           <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">
-                C
+                {brand.shortName.charAt(0).toUpperCase()}
               </span>
               <span className="text-background text-lg font-bold -tracking-[0.025em]">
-                Currents Electronics
+                {brand.name}
               </span>
             </div>
-            <p className="leading-relaxed mb-4 max-w-sm">
-              Authorised dealer for Apple, Samsung, Sony, Bose. Same-day
-              delivery in Accra; nationwide via partner courier. Two-year
-              warranty on every product.
-            </p>
+            <p className="leading-relaxed mb-4 max-w-sm">{brand.footer.blurb}</p>
             <address className="not-italic space-y-1">
-              <p className="m-0">Atomic Junction, East Legon, Accra</p>
+              <p className="m-0">{brand.contact.address}</p>
               <p className="m-0">
-                <a href="tel:+233244000000" className="hover:text-background transition-colors">
-                  +233 244 000 000
+                <a
+                  href={`tel:${brand.contact.phoneTel}`}
+                  className="hover:text-background transition-colors"
+                >
+                  {brand.contact.phone}
                 </a>
               </p>
               <p className="m-0">
                 <a
-                  href="mailto:hello@currentselectronics.test"
+                  href={`mailto:${brand.contact.email}`}
                   className="hover:text-background transition-colors"
                 >
-                  hello@currentselectronics.test
+                  {brand.contact.email}
                 </a>
               </p>
-              <p className="m-0 text-xs">Mon–Sat · 9am–8pm</p>
+              <p className="m-0 text-xs">{brand.contact.hours}</p>
             </address>
             <div className="flex items-center gap-3 mt-5">
-              {SOCIALS.map((s) => (
+              {brand.socials.map((s) => (
                 <a
                   key={s.label}
                   href={s.href}
@@ -128,12 +94,12 @@ export async function Footer() {
                   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.svg}
+                  {(s.icon && ICONS[s.icon]) ?? FALLBACK_ICON}
                 </a>
               ))}
             </div>
           </div>
-          {SITEMAP.map((section) => (
+          {brand.footer.sitemap.map((section) => (
             <nav key={section.title} aria-labelledby={`footer-${section.title}`}>
               <p
                 id={`footer-${section.title}`}
@@ -144,10 +110,7 @@ export async function Footer() {
               <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 href={link.href} className="hover:text-background transition-colors">
                       {link.label}
                     </Link>
                   </li>
@@ -158,29 +121,31 @@ export async function Footer() {
         </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} Currents Electronics. All rights reserved.</p>
-          <p className="m-0 inline-flex items-center gap-1.5">
-            <span className="opacity-70">Powered by</span>
-            <a
-              href="https://app.cimplify.io"
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Cimplify"
-              className="inline-flex items-center gap-1 text-background hover:text-primary transition-colors"
-            >
-              <span className="font-semibold tracking-tight">Cimplify</span>
-              <svg
-                viewBox="0 0 12 12"
-                aria-hidden
-                className="w-3 h-3 opacity-70"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.5"
+          <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"
               >
-                <path d="M3 9L9 3M9 3H4M9 3v5" strokeLinecap="round" strokeLinejoin="round" />
-              </svg>
-            </a>
-          </p>
+                <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-retail/components/header.tsx

@@ -2,6 +2,7 @@ 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. Brand mark + nav layout streams from the
@@ -9,27 +10,24 @@ import { CartPill, CartPillSkeleton } from "./cart-pill";
  * mounted in their own Suspense boundaries so the chrome never blocks.
  */
 export function Header() {
+  const initial = brand.shortName.charAt(0).toUpperCase();
   return (
     <header className="sticky top-0 z-30 flex items-center justify-between px-6 sm:px-8 py-3.5 border-b border-border bg-background/90 backdrop-blur-md">
       <Link href="/" className="flex items-center gap-2.5 group">
         <span className="grid place-items-center w-8 h-8 rounded-md bg-foreground text-background text-[13px] font-bold font-mono group-hover:bg-primary transition-colors">
-          C
+          {initial}
         </span>
-        <span className="text-[18px] font-bold -tracking-[0.025em]">Currents</span>
+        <span className="text-[18px] font-bold -tracking-[0.025em]">{brand.shortName}</span>
         <span className="hidden sm:inline text-[10px] font-mono uppercase tracking-[0.16em] text-muted-foreground border border-border rounded px-1.5 py-0.5">
-          ELECTRONICS
+          {brand.microTag}
         </span>
       </Link>
       <nav className="flex items-center gap-5 sm:gap-6">
-        <Suspense fallback={<NavLinkFallback>Shop</NavLinkFallback>}>
-          <NavLink href="/shop">Shop</NavLink>
-        </Suspense>
-        <Suspense fallback={<NavLinkFallback>Deals</NavLinkFallback>}>
-          <NavLink href="/categories/deals">Deals</NavLink>
-        </Suspense>
-        <Suspense fallback={<NavLinkFallback>Support</NavLinkFallback>}>
-          <NavLink href="/faq">Support</NavLink>
-        </Suspense>
+        {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>

package/templates/storefront-retail/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>
+  );
+}

package/templates/storefront-retail/components/promo-banner.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { brand } from "@/lib/brand";
+
+/**
+ * Full-width promo banner — reads brand.promo. Renders nothing if the
+ * brand doesn't define a promo, so this component is safe to drop in
+ * across templates that may or may not run a campaign.
+ */
+export function PromoBanner() {
+  const promo = brand.promo;
+  if (!promo) return null;
+  return (
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 py-6">
+      <div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-primary via-primary to-foreground text-primary-foreground p-8 sm:p-12 lg:p-16">
+        <div className="absolute -top-20 -right-20 w-72 h-72 rounded-full bg-background/10 blur-3xl pointer-events-none" />
+        <div className="absolute -bottom-32 -left-20 w-96 h-96 rounded-full bg-foreground/30 blur-3xl pointer-events-none" />
+        <div className="relative grid grid-cols-1 lg:grid-cols-[1fr_auto] gap-8 items-center">
+          <div className="max-w-2xl">
+            <span className="inline-flex items-center gap-2 mb-4 px-3 py-1 rounded-full bg-background/15 border border-background/25 text-[11px] font-mono uppercase tracking-[0.16em]">
+              <span className="w-1.5 h-1.5 rounded-full bg-background animate-pulse" />
+              {promo.badge}
+            </span>
+            <h2 className="text-[clamp(1.75rem,3.5vw,2.75rem)] font-bold m-0 mb-3 -tracking-[0.025em] leading-[1.1]">
+              {promo.title}
+            </h2>
+            <p className="text-base sm:text-lg opacity-90 leading-relaxed">{promo.body}</p>
+          </div>
+          <Link
+            href={promo.ctaHref}
+            className="inline-flex items-center gap-2 px-5 py-3 rounded-md bg-background text-foreground font-semibold text-sm hover:bg-background/90 transition-colors whitespace-nowrap"
+          >
+            {promo.ctaLabel}
+            <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>
+    </section>
+  );
+}

package/templates/storefront-retail/components/section-heading.tsx

@@ -0,0 +1,37 @@
+import Link from "next/link";
+
+interface SectionHeadingProps {
+  eyebrow: string;
+  title: string;
+  description?: string;
+  link?: { label: string; href: string };
+}
+
+export function SectionHeading({ eyebrow, title, description, link }: SectionHeadingProps) {
+  return (
+    <div className="flex items-end justify-between gap-6 mb-8">
+      <div className="max-w-2xl">
+        <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2">
+          {eyebrow}
+        </p>
+        <h2 className="text-[clamp(1.75rem,3vw,2.25rem)] font-bold m-0 -tracking-[0.025em]">
+          {title}
+        </h2>
+        {description && (
+          <p className="mt-2 text-muted-foreground">{description}</p>
+        )}
+      </div>
+      {link && (
+        <Link
+          href={link.href}
+          className="text-sm font-semibold text-primary hover:underline whitespace-nowrap hidden sm:inline-flex items-center gap-1"
+        >
+          {link.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>
+      )}
+    </div>
+  );
+}

package/templates/storefront-retail/components/store-product-card.tsx

@@ -59,22 +59,22 @@ interface Props {
 }
 
 /**
- * Variant-aware product card that opens the URL-driven product modal on
- * click. Uses `next/link` with `?product=<slug>` so the link is statically
- * pre-renderable — no `useSearchParams` dependency means cards don't
- * become dynamic islands. The modal (which already reads `useSearchParams`
- * inside a Suspense boundary in the root layout) handles the rest.
+ * Variant-aware product card that links to the dedicated product page at
+ * `/products/<slug>`. Statically pre-renderable (no `useSearchParams`),
+ * with `prefetch` enabled so hover → instant nav. Full product page
+ * (vs a modal) is the right pattern for retail: spec sheets, multi-image
+ * galleries, reviews, comparison rails all need vertical real estate.
  */
 export function StoreProductCard({ product, variant }: Props) {
   const slug = product.slug || product.id;
   const Card = VARIANT_CARDS[variant ?? resolveVariant(product)];
-  const href = `?product=${encodeURIComponent(slug)}`;
+  const href = `/products/${encodeURIComponent(slug)}`;
 
   return (
     <Card
       product={product}
       renderLink={({ className, children }) => (
-        <Link href={href} scroll={false} prefetch={false} className={className}>
+        <Link href={href} className={className}>
           {children}
         </Link>
       )}

package/templates/storefront-retail/components/trade-in-cta.tsx

@@ -0,0 +1,54 @@
+import Link from "next/link";
+import { brand } from "@/lib/brand";
+
+export function TradeInCta() {
+  const t = brand.tradeIn;
+  if (!t) return null;
+  return (
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-20">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center bg-foreground text-background rounded-3xl p-8 sm:p-12 lg:p-14 overflow-hidden relative">
+        <div className="absolute top-0 right-0 w-1/2 h-full opacity-[0.04] [background-image:linear-gradient(135deg,white_1px,transparent_1px)] [background-size:24px_24px] pointer-events-none" />
+        <div>
+          <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary-foreground/70 mb-3">
+            {t.eyebrow}
+          </p>
+          <h2 className="text-[clamp(1.75rem,3.5vw,2.5rem)] font-bold m-0 mb-4 -tracking-[0.025em] leading-[1.1]">
+            {t.title}
+          </h2>
+          <p className="text-background/75 leading-relaxed mb-6">{t.body}</p>
+          <div className="flex flex-wrap items-center gap-3">
+            <Link
+              href={t.primaryCtaHref}
+              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"
+            >
+              {t.primaryCtaLabel}
+              <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>
+            <Link
+              href={t.secondaryCtaHref}
+              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md border border-background/25 hover:bg-background/10 transition-colors text-sm font-medium"
+            >
+              {t.secondaryCtaLabel}
+            </Link>
+          </div>
+        </div>
+        <div className="grid grid-cols-3 gap-3">
+          {t.steps.map((s) => (
+            <div
+              key={s.step}
+              className="rounded-2xl p-4 sm:p-5 bg-background/5 border border-background/10"
+            >
+              <p className="text-[10px] font-mono text-primary tabular-nums mb-3">{s.step}</p>
+              <p className="text-[13px] sm:text-sm font-semibold mb-1.5 -tracking-[0.015em]">
+                {s.title}
+              </p>
+              <p className="text-[11px] sm:text-xs text-background/65 leading-snug">{s.body}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/storefront-retail/components/trust-bar.tsx

@@ -0,0 +1,66 @@
+import { brand } from "@/lib/brand";
+
+const ICONS: Record<string, React.ReactNode> = {
+  delivery: (
+    <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>
+  ),
+  warranty: (
+    <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>
+  ),
+  payment: (
+    <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>
+  ),
+  verified: (
+    <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>
+  ),
+  support: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden>
+      <path d="M18 18a8 8 0 1 0-12 0" />
+      <path d="M3 18h4v3H3zM17 18h4v3h-4z" strokeLinejoin="round" />
+    </svg>
+  ),
+};
+
+const FALLBACK_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" />
+  </svg>
+);
+
+export function TrustBar() {
+  const items = brand.trustItems;
+  if (!items || items.length === 0) return null;
+  return (
+    <section className="border-y border-border bg-card">
+      <div className="max-w-7xl mx-auto px-6 sm:px-8 py-10 grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-8">
+        {items.map((it) => (
+          <div key={it.label} className="flex items-start gap-3">
+            <div className="grid place-items-center w-10 h-10 rounded-lg bg-primary/10 text-primary shrink-0">
+              {ICONS[it.iconKey] ?? FALLBACK_ICON}
+            </div>
+            <div className="min-w-0">
+              <p className="text-[10px] font-mono uppercase tracking-[0.16em] text-muted-foreground mb-0.5">
+                {it.label}
+              </p>
+              <p className="text-base font-semibold -tracking-[0.015em] mb-0.5">{it.value}</p>
+              <p className="text-xs text-muted-foreground leading-snug">{it.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}