@cimplify/sdk 0.40.1 → 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

@@ -1,8 +1,10 @@
 "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);
 
@@ -11,16 +13,12 @@ export function Newsletter() {
       <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">
-            The shortlist
+            {n.eyebrow}
           </p>
           <h2 className="text-[clamp(1.5rem,3vw,2rem)] font-bold m-0 mb-3 -tracking-[0.025em]">
-            New drops, real prices, in your inbox.
+            {n.title}
           </h2>
-          <p className="text-muted-foreground leading-relaxed">
-            One email a week. Curated launches, our actual price (not the
-            launch price), and the deals worth knowing about. No newsletter
-            chaff.
-          </p>
+          <p className="text-muted-foreground leading-relaxed">{n.body}</p>
         </div>
         <form
           onSubmit={(e) => {
@@ -34,7 +32,7 @@ export function Newsletter() {
             required
             value={email}
             onChange={(e) => setEmail(e.target.value)}
-            placeholder="you@email.com"
+            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"
           />
@@ -43,7 +41,7 @@ export function Newsletter() {
             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 ? "Subscribed ✓" : "Subscribe"}
+            {submitted ? n.successLabel : n.submitLabel}
           </button>
         </form>
       </div>

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

@@ -1,17 +1,14 @@
 import Link from "next/link";
-
-interface PromoBannerProps {
-  badge: string;
-  title: string;
-  body: string;
-  cta: { label: string; href: string };
-}
+import { brand } from "@/lib/brand";
 
 /**
- * Full-width promo banner — featured deal / launch / season campaign.
- * Bold geometric background, mono-spaced detail labels.
+ * 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({ badge, title, body, cta }: PromoBannerProps) {
+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">
@@ -21,18 +18,18 @@ export function PromoBanner({ badge, title, body, cta }: PromoBannerProps) {
           <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" />
-              {badge}
+              {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]">
-              {title}
+              {promo.title}
             </h2>
-            <p className="text-base sm:text-lg opacity-90 leading-relaxed">{body}</p>
+            <p className="text-base sm:text-lg opacity-90 leading-relaxed">{promo.body}</p>
           </div>
           <Link
-            href={cta.href}
+            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"
           >
-            {cta.label}
+            {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>

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

@@ -1,47 +1,41 @@
 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">
-            Trade-in programme
+            {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]">
-            Last year&apos;s phone, this year&apos;s discount.
+            {t.title}
           </h2>
-          <p className="text-background/75 leading-relaxed mb-6">
-            Send us your iPhone, Galaxy, or MacBook. We&apos;ll quote within
-            48 hours and credit the value toward your next purchase. Devices
-            head to certified refurbishers across the continent — yours stays
-            in service for years more.
-          </p>
+          <p className="text-background/75 leading-relaxed mb-6">{t.body}</p>
           <div className="flex flex-wrap items-center gap-3">
             <Link
-              href="/about"
+              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"
             >
-              Get a quote
+              {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="/faq"
+              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"
             >
-              How it works
+              {t.secondaryCtaLabel}
             </Link>
           </div>
         </div>
         <div className="grid grid-cols-3 gap-3">
-          {[
-            { step: "01", title: "Tell us what you have", body: "Model + condition + photos. 2 minutes." },
-            { step: "02", title: "Ship it free", body: "Drop at our store or book a free pickup." },
-            { step: "03", title: "Get credited", body: "Within 48 hours, in store credit or Mobile Money." },
-          ].map((s) => (
+          {t.steps.map((s) => (
             <div
               key={s.step}
               className="rounded-2xl p-4 sm:p-5 bg-background/5 border border-background/10"

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

@@ -1,15 +1,55 @@
-interface TrustBarProps {
-  items: { label: string; value: string; description: string; icon: React.ReactNode }[];
-}
+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({ items }: TrustBarProps) {
+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">
-              {it.icon}
+              {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">