@cimplify/sdk 0.40.1 → 0.42.0

package/templates/storefront-retail/app/llms.txt/route.ts

@@ -0,0 +1,94 @@
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
+import { brand } from "@/lib/brand";
+
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+
+async function buildLlmsTxt(): Promise<string> {
+  "use cache";
+  cacheTag(tags.products(), tags.categories(), tags.collections());
+  cacheLife("hours");
+
+  const client = getServerClient();
+  const [productsRes, categoriesRes, collectionsRes] = await Promise.all([
+    client.catalogue.getProducts({ limit: 500 }),
+    client.catalogue.getCategories(),
+    client.catalogue.getCollections(),
+  ]);
+
+  const products: Product[] = productsRes.ok ? productsRes.value.items : [];
+  const categories = categoriesRes.ok ? categoriesRes.value : [];
+  const collections = collectionsRes.ok ? collectionsRes.value : [];
+
+  const lines: string[] = [];
+  lines.push(`# ${brand.name}`);
+  lines.push("");
+  lines.push(`> ${brand.llms.summary}`);
+  lines.push("");
+  lines.push("## Browse");
+  lines.push(`- [Home](${SITE_URL}/)`);
+  lines.push(`- [Shop](${SITE_URL}/shop): Full catalogue with filter and sort.`);
+
+  if (categories.length > 0) {
+    lines.push("");
+    lines.push("## Categories");
+    for (const c of categories) {
+      lines.push(
+        `- [${c.name}](${SITE_URL}/categories/${c.slug})${c.description ? `: ${c.description}` : ""}`,
+      );
+    }
+  }
+
+  if (collections.length > 0) {
+    lines.push("");
+    lines.push("## Collections");
+    for (const c of collections) {
+      lines.push(
+        `- [${c.name}](${SITE_URL}/collections/${c.slug})${c.description ? `: ${c.description}` : ""}`,
+      );
+    }
+  }
+
+  if (products.length > 0) {
+    lines.push("");
+    lines.push("## Products");
+    for (const p of products) {
+      const slug = p.slug ?? p.id;
+      const price = `${p.currency ?? brand.currency} ${p.default_price}`;
+      const desc = p.description ? ` — ${p.description.replace(/\s+/g, " ").slice(0, 200)}` : "";
+      lines.push(`- [${p.name}](${SITE_URL}/products/${slug}) (${price})${desc}`);
+    }
+  }
+
+  lines.push("");
+  lines.push("## Information");
+  lines.push(`- [About](${SITE_URL}/about)`);
+  lines.push(`- [Support / FAQ](${SITE_URL}/faq)`);
+  lines.push(`- [Terms of Service](${SITE_URL}/terms)`);
+  lines.push(`- [Privacy Policy](${SITE_URL}/privacy)`);
+  lines.push(`- [Sitemap (XML)](${SITE_URL}/sitemap.xml)`);
+  lines.push("");
+  lines.push("## Contact");
+  lines.push(`- Email: ${brand.contact.email}`);
+  lines.push(`- Phone: ${brand.contact.phone}`);
+  lines.push(`- Address: ${brand.contact.address}`);
+
+  return lines.join("\n") + "\n";
+}
+
+/**
+ * `/llms.txt` — machine-readable site index for LLMs (per llmstxt.org).
+ * Lets coding agents and chat assistants find products, categories, and
+ * support pages without scraping HTML. Plain Markdown so it streams cheaply
+ * into context windows.
+ */
+export async function GET(): Promise<Response> {
+  const body = await buildLlmsTxt();
+  return new Response(body, {
+    headers: {
+      "Content-Type": "text/plain; charset=utf-8",
+      "Cache-Control": "public, max-age=0, s-maxage=3600, stale-while-revalidate=86400",
+    },
+  });
+}

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

@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Sign in — ${brand.name}`,
+  description: brand.account.loginSubtitle,
+};
+
+/**
+ * Cimplify Link (the iframe in `<CimplifyAccount>`) handles sign-in
+ * automatically when no session exists. We just bounce /login to /account
+ * so consumers landing here get the right UI without a duplicate form.
+ */
+export default function LoginPage(): never {
+  redirect("/account");
+}

package/templates/storefront-retail/app/not-found.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Page not found — ${brand.name}`,
+  description: "We couldn't find that page.",
+};
+
+export default function NotFound() {
+  return (
+    <section className="max-w-2xl mx-auto px-6 sm:px-8 py-20 text-center">
+      <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-3">
+        404
+      </p>
+      <h1 className="text-[clamp(2.5rem,5vw,4rem)] font-bold mb-4 -tracking-[0.03em]">
+        Page not found.
+      </h1>
+      <p className="text-muted-foreground leading-relaxed mb-8">
+        The URL you followed might be old, a typo, or pointing at a product
+        that&apos;s no longer in stock. Try the menu or head back home.
+      </p>
+      <div className="flex flex-wrap items-center justify-center gap-3">
+        <Link
+          href="/shop"
+          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"
+        >
+          Browse the shop
+        </Link>
+        <Link
+          href="/"
+          className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md border border-border hover:bg-muted transition-colors text-sm font-medium"
+        >
+          Back home
+        </Link>
+      </div>
+    </section>
+  );
+}

package/templates/storefront-retail/app/opensearch.xml/route.ts

@@ -0,0 +1,37 @@
+import { brand } from "@/lib/brand";
+
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+
+/**
+ * OpenSearch description document — lets browsers add this site to the
+ * address bar's search engine list. When users press Tab after typing the
+ * domain, they get an inline search box that hits /search?q=...
+ */
+export async function GET(): Promise<Response> {
+  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
+  <ShortName>${escapeXml(brand.shortName)}</ShortName>
+  <Description>Search ${escapeXml(brand.name)}</Description>
+  <InputEncoding>UTF-8</InputEncoding>
+  <Url type="text/html" method="get" template="${SITE_URL}/search?q={searchTerms}" />
+  <Url type="application/opensearchdescription+xml" rel="self" template="${SITE_URL}/opensearch.xml" />
+  <moz:SearchForm>${SITE_URL}/search</moz:SearchForm>
+</OpenSearchDescription>
+`;
+  return new Response(xml, {
+    headers: {
+      "Content-Type": "application/opensearchdescription+xml; charset=utf-8",
+      "Cache-Control": "public, max-age=86400",
+    },
+  });
+}
+
+function escapeXml(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}

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

@@ -12,11 +12,11 @@ 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";
+import { brand } from "@/lib/brand";
 
 export const metadata: Metadata = {
-  title: "Currents Electronics — Tech, in stock, in Accra",
-  description:
-    "Authorised dealer for Apple, Samsung, Sony, Bose. Same-day delivery, two-year warranty, instalment payments — across Accra and West Africa.",
+  title: brand.hero.title,
+  description: brand.description,
 };
 
 interface CollectionWithProducts {
@@ -57,55 +57,7 @@ async function getHomeData() {
   };
 }
 
-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 =
+const HERO_FALLBACK_IMAGE =
   "https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?w=1200&h=1200&fit=crop&auto=format&q=85";
 
 export default async function HomePage() {
@@ -117,37 +69,28 @@ export default async function HomePage() {
       <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."
-        }
+        title={brand.hero.title}
+        description={heroProduct?.description ?? brand.hero.subtitle}
         primaryCta={{
-          label: heroProduct ? `Shop ${heroProduct.name}` : "Shop the menu",
-          href: heroProduct ? `?product=${heroProduct.slug ?? heroProduct.id}` : "/shop",
+          label: heroProduct ? `Shop ${heroProduct.name}` : brand.hero.primaryCtaLabel,
+          href: heroProduct ? `/products/${heroProduct.slug ?? heroProduct.id}` : "/shop",
         }}
-        secondaryCta={{ label: "See deals", href: "/categories/deals" }}
-        imageUrl={heroProduct?.image_url ?? heroProduct?.images?.[0] ?? HERO_IMAGE}
+        secondaryCta={
+          brand.hero.secondaryCtaLabel && brand.hero.secondaryCtaHref
+            ? { label: brand.hero.secondaryCtaLabel, href: brand.hero.secondaryCtaHref }
+            : undefined
+        }
+        imageUrl={heroProduct?.image_url ?? heroProduct?.images?.[0] ?? HERO_FALLBACK_IMAGE}
         imageAlt={heroProduct?.name ?? "Featured product"}
       />
 
-      <TrustBar items={TRUST_ITEMS} />
+      <TrustBar />
 
       <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" }}
-      />
+      <PromoBanner />
 
       <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-20">
         <SectionHeading

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

@@ -1,100 +1,43 @@
 import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
 
 export const metadata: Metadata = {
-  title: "Privacy Policy — Currents Electronics",
-  description:
-    "How Currents Electronics collects, uses, and protects your personal data.",
+  title: `Privacy Policy — ${brand.name}`,
+  description: `How ${brand.name} collects, uses, and protects your personal data.`,
 };
 
 export default function PrivacyPage() {
+  const p = brand.privacy;
   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">
-        Privacy
+        {p.eyebrow}
       </p>
       <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-bold mb-2 -tracking-[0.025em]">
-        Privacy Policy
+        {p.title}
       </h1>
       <p className="text-sm text-muted-foreground not-prose mb-10">
-        Last updated: 1 May 2026
+        Last updated: {p.lastUpdated}
       </p>
 
       <section className="space-y-5 leading-relaxed text-foreground/90">
-        <h2 className="text-2xl font-semibold mt-0 -tracking-[0.02em]">
-          What we collect
-        </h2>
-        <p>
-          We collect what we need to fulfil your order: name, phone, delivery
-          address, email, and the items in your order. For warranty service
-          and trade-ins, we also collect device serial numbers. Payment details
-          are processed by our payment partners (Paystack, Stripe, Fidelity
-          Bank) and never stored on our servers.
-        </p>
-
-        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
-          How we use it
-        </h2>
-        <ul className="list-disc pl-6 space-y-2">
-          <li>To prepare, deliver, and confirm your order.</li>
-          <li>To register product warranties on your behalf.</li>
-          <li>To send order updates by SMS and email.</li>
-          <li>
-            To send occasional product news and deals — only if you opted in.
-            Unsubscribe anytime in one click.
-          </li>
-          <li>
-            To analyse aggregated, anonymised browsing patterns so we can
-            improve the site and recommend products.
-          </li>
-        </ul>
-
-        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
-          Who we share it with
-        </h2>
-        <p>
-          We share data only with the partners required to fulfil your order
-          and warranty: payment processors (Paystack, Stripe, Fidelity Bank),
-          delivery couriers (DHL, local riders), manufacturer warranty portals
-          (for serial registration), and our email/SMS providers. We do not
-          sell or rent personal data to third parties — ever.
-        </p>
-
-        <h2 className="text-2xl font-semibold -tracking-[0.02em]">Cookies</h2>
-        <p>
-          We use a small number of strictly-necessary cookies to keep your cart
-          working and your session signed in, plus optional analytics cookies
-          (you can disable these in our cookie banner).
-        </p>
-
-        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
-          Your rights
-        </h2>
-        <p>
-          Under the Ghana Data Protection Act, 2012 (Act 843), you have the
-          right to access the data we hold about you, correct it, or have it
-          deleted (subject to our tax-record retention obligations). Email{" "}
-          <a
-            href="mailto:privacy@currentselectronics.test"
-            className="text-primary font-semibold hover:underline"
-          >
-            privacy@currentselectronics.test
-          </a>{" "}
-          and we&apos;ll respond within 14 days.
-        </p>
-
-        <h2 className="text-2xl font-semibold -tracking-[0.02em]">Retention</h2>
-        <p>
-          We keep order records for 7 years to comply with Ghanaian tax law.
-          Warranty records are retained for the life of the warranty plus 24
-          months. Marketing-list opt-ins are kept until you unsubscribe.
-        </p>
-
-        <h2 className="text-2xl font-semibold -tracking-[0.02em]">Changes</h2>
-        <p>
-          If we make material changes to this policy, we&apos;ll email
-          customers on our marketing list and update the &quot;last updated&quot;
-          date above.
-        </p>
+        {p.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-retail/app/products/[slug]/page.tsx

@@ -0,0 +1,165 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { cacheTag, cacheLife } from "next/cache";
+import {
+  getServerClient,
+  tags,
+  type Product,
+  type ProductWithDetails,
+} from "@cimplify/sdk/server";
+import { ProductDetail } from "./product-detail";
+import { brand } from "@/lib/brand";
+
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+
+function productLd(product: ProductWithDetails) {
+  const image = product.image_url ?? product.images?.[0];
+  const inStock = product.inventory_status?.in_stock !== false;
+  return {
+    "@context": "https://schema.org",
+    "@type": "Product",
+    name: product.name,
+    description: product.description ?? undefined,
+    image: image ? [image] : undefined,
+    sku: product.id,
+    brand: { "@type": "Brand", name: brand.name },
+    offers: {
+      "@type": "Offer",
+      price: product.default_price,
+      priceCurrency: product.currency ?? brand.currency,
+      availability: inStock
+        ? "https://schema.org/InStock"
+        : "https://schema.org/OutOfStock",
+      url: `${SITE_URL}/products/${product.slug ?? product.id}`,
+    },
+  };
+}
+
+interface ProductData {
+  product: ProductWithDetails;
+  related: Product[];
+}
+
+async function getProduct(slug: string): Promise<ProductData | null> {
+  "use cache";
+  cacheTag(tags.product(slug), tags.products());
+  cacheLife("hours");
+
+  const client = getServerClient();
+  const r = await client.catalogue.getProductBySlug(slug);
+  if (!r.ok) return null;
+
+  const related = r.value.category_id
+    ? await client.catalogue
+        .getCategoryProducts(r.value.category_id)
+        .then((res) =>
+          res.ok
+            ? (
+                ((res.value as { items?: Product[] }).items ??
+                  (res.value as Product[])) as Product[]
+              ).filter((p) => p.id !== r.value.id).slice(0, 4)
+            : [],
+        )
+    : [];
+
+  return { product: r.value, related };
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const data = await getProduct(slug);
+  if (!data) return {};
+  const { product } = data;
+  const image = product.image_url ?? product.images?.[0];
+  return {
+    title: `${product.name} — ${brand.name}`,
+    description: product.description ?? undefined,
+    openGraph: {
+      title: product.name,
+      description: product.description ?? undefined,
+      images: image ? [{ url: image }] : undefined,
+      type: "website",
+    },
+  };
+}
+
+export default async function ProductPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  return (
+    <Suspense fallback={<ProductSkeleton />}>
+      <ProductContent params={params} />
+    </Suspense>
+  );
+}
+
+async function ProductContent({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const data = await getProduct(slug);
+  if (!data) notFound();
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(productLd(data.product)) }}
+      />
+      <nav
+        aria-label="Breadcrumb"
+        className="max-w-7xl mx-auto px-6 sm:px-8 pt-6 text-[12px] font-mono text-muted-foreground flex items-center gap-2"
+      >
+        <Link href="/" className="hover:text-foreground transition-colors">
+          Home
+        </Link>
+        <span>/</span>
+        <Link href="/shop" className="hover:text-foreground transition-colors">
+          Shop
+        </Link>
+        {data.product.category?.slug && (
+          <>
+            <span>/</span>
+            <Link
+              href={`/categories/${data.product.category.slug}`}
+              className="hover:text-foreground transition-colors"
+            >
+              {data.product.category.name}
+            </Link>
+          </>
+        )}
+        <span>/</span>
+        <span className="text-foreground/90 truncate">{data.product.name}</span>
+      </nav>
+      <ProductDetail product={data.product} related={data.related} />
+    </>
+  );
+}
+
+function ProductSkeleton() {
+  return (
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 py-10">
+      <div className="grid grid-cols-1 lg:grid-cols-[1.1fr_1fr] gap-10 items-start">
+        <div className="aspect-square bg-muted rounded-3xl animate-pulse" />
+        <div className="space-y-4">
+          <div className="h-3 w-24 bg-muted rounded animate-pulse" />
+          <div className="h-10 w-3/4 bg-muted rounded animate-pulse" />
+          <div className="h-7 w-32 bg-muted rounded animate-pulse" />
+          <div className="h-20 w-full bg-muted rounded animate-pulse mt-6" />
+          <div className="h-12 w-full bg-muted rounded animate-pulse mt-4" />
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/storefront-retail/app/products/[slug]/product-detail.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import { ProductPage as SdkProductPage } from "@cimplify/sdk/react";
+import type { Product, ProductWithDetails } from "@cimplify/sdk";
+import { StoreProductCard } from "@/components/store-product-card";
+
+/**
+ * Client island for the product detail page.
+ *
+ * - Receives a server-fetched `ProductWithDetails` (no client refetch).
+ * - Renders the SDK `<ProductPage>` which picks the right layout
+ *   (Default / Wholesale / Service / Bundle / Composite) automatically.
+ * - On add-to-cart success, routes to `/cart`.
+ * - Custom Next.js Image renderer for optimised, lazy-loaded gallery shots.
+ * - Renders a "You may also like" rail of in-category products below.
+ */
+export function ProductDetail({
+  product,
+  related,
+}: {
+  product: ProductWithDetails;
+  related: Product[];
+}) {
+  const router = useRouter();
+
+  return (
+    <>
+      <SdkProductPage
+        product={product}
+        showRelated={false}
+        onAddToCart={() => {
+          router.push("/cart");
+        }}
+        renderImage={({ src, alt, className }) => (
+          <Image
+            src={src}
+            alt={alt}
+            width={1200}
+            height={1200}
+            className={className}
+            style={{ width: "100%", height: "auto", objectFit: "cover" }}
+            priority
+          />
+        )}
+        className="max-w-7xl mx-auto px-6 sm:px-8 py-8 sm:py-10"
+      />
+
+      {related.length > 0 && (
+        <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-16 border-t border-border mt-8">
+          <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">
+                You may also like
+              </p>
+              <h2 className="text-[clamp(1.5rem,2.5vw,2rem)] font-bold m-0 -tracking-[0.025em]">
+                More from this category.
+              </h2>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+            {related.map((p) => (
+              <StoreProductCard key={p.id} product={p} />
+            ))}
+          </div>
+        </section>
+      )}
+    </>
+  );
+}