@cimplify/sdk 0.40.0 → 0.41.0

package/templates/storefront-retail/app/sitemap.ts

@@ -0,0 +1,59 @@
+import type { MetadataRoute } from "next";
+import { getServerClient, type Product } from "@cimplify/sdk/server";
+
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+
+const STATIC_ROUTES: { path: string; priority: number; changeFrequency: "daily" | "weekly" | "monthly" }[] = [
+  { path: "/", priority: 1.0, changeFrequency: "daily" },
+  { path: "/shop", priority: 0.9, changeFrequency: "daily" },
+  { path: "/about", priority: 0.5, changeFrequency: "monthly" },
+  { path: "/faq", priority: 0.4, changeFrequency: "monthly" },
+  { path: "/terms", priority: 0.2, changeFrequency: "monthly" },
+  { path: "/privacy", priority: 0.2, changeFrequency: "monthly" },
+];
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const now = new Date();
+  const client = getServerClient();
+
+  const [productsRes, categoriesRes, collectionsRes] = await Promise.all([
+    client.catalogue.getProducts({ limit: 500 }),
+    client.catalogue.getCategories(),
+    client.catalogue.getCollections(),
+  ]);
+
+  const products = productsRes.ok ? productsRes.value.items : [];
+  const categories = categoriesRes.ok ? categoriesRes.value : [];
+  const collections = collectionsRes.ok ? collectionsRes.value : [];
+
+  const staticEntries: MetadataRoute.Sitemap = STATIC_ROUTES.map((r) => ({
+    url: `${SITE_URL}${r.path}`,
+    lastModified: now,
+    changeFrequency: r.changeFrequency,
+    priority: r.priority,
+  }));
+
+  const productEntries: MetadataRoute.Sitemap = products.map((p: Product) => ({
+    url: `${SITE_URL}/products/${p.slug ?? p.id}`,
+    lastModified: p.updated_at ? new Date(p.updated_at) : now,
+    changeFrequency: "weekly",
+    priority: 0.7,
+  }));
+
+  const categoryEntries: MetadataRoute.Sitemap = categories.map((c) => ({
+    url: `${SITE_URL}/categories/${c.slug}`,
+    lastModified: now,
+    changeFrequency: "weekly",
+    priority: 0.6,
+  }));
+
+  const collectionEntries: MetadataRoute.Sitemap = collections.map((c) => ({
+    url: `${SITE_URL}/collections/${c.slug}`,
+    lastModified: now,
+    changeFrequency: "weekly",
+    priority: 0.6,
+  }));
+
+  return [...staticEntries, ...categoryEntries, ...collectionEntries, ...productEntries];
+}

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

@@ -1,116 +1,43 @@
 import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
 
 export const metadata: Metadata = {
-  title: "Terms of Service — Currents Electronics",
-  description: "The rules of the road for ordering from Currents Electronics.",
+  title: `Terms of Service — ${brand.name}`,
+  description: `The rules of the road for ordering from ${brand.name}.`,
 };
 
 export default function TermsPage() {
+  const t = brand.terms;
   return (
     <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
       <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2 not-prose">
-        Terms of service
+        {t.eyebrow}
       </p>
       <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-bold mb-2 -tracking-[0.025em]">
-        Terms of Service
+        {t.title}
       </h1>
       <p className="text-sm text-muted-foreground not-prose mb-10">
-        Last updated: 1 May 2026
+        Last updated: {t.lastUpdated}
       </p>
 
       <section className="space-y-5 leading-relaxed text-foreground/90">
-        <h2 className="text-2xl font-semibold mt-0 -tracking-[0.02em]">
-          1. Who we are
-        </h2>
-        <p>
-          Currents Electronics (&quot;we&quot;, &quot;us&quot;) is a consumer
-          electronics retailer based at Atomic Junction, East Legon, Accra,
-          Ghana. By placing an order, you (&quot;you&quot;, &quot;customer&quot;)
-          agree to these terms.
-        </p>
-
-        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
-          2. Authorised dealer status
-        </h2>
-        <p>
-          We are authorised dealers for the brands listed on our About page.
-          Every product is sourced direct from the manufacturer or a certified
-          distributor. Serial numbers can be verified on the brand&apos;s
-          official portal at any time.
-        </p>
-
-        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
-          3. Pricing and payment
-        </h2>
-        <p>
-          Prices are in Ghana Cedis (GH₵) and include VAT where applicable.
-          Payment is due at checkout via Mobile Money, card, or instalments via
-          our partner bank. Cash on delivery is available for Accra orders only.
-        </p>
-
-        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
-          4. Warranty
-        </h2>
-        <p>
-          Every product carries a two-year warranty: the standard manufacturer
-          warranty in year one, plus a Currents-backed extension in year two.
-          Coverage includes manufacturing defects and battery degradation below
-          80%. Accidental damage, liquid damage, and unauthorised modifications
-          are excluded.
-        </p>
-
-        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
-          5. Returns
-        </h2>
-        <p>
-          Sealed products: 14 days, no questions asked. Opened products:
-          7 days, subject to a 10% restocking fee for non-defective items.
-          Activated SIM-bundled phones cannot be returned once the SIM is
-          registered. Custom orders and bulk corporate orders are
-          non-refundable except for defects.
-        </p>
-
-        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
-          6. Trade-in
-        </h2>
-        <p>
-          Trade-in quotes are estimates only. Final value is determined after
-          inspection by our refurbishment partner. We reserve the right to
-          revise the quote, and you may decline the revised offer and receive
-          your device back at our cost.
-        </p>
-
-        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
-          7. Liability
-        </h2>
-        <p>
-          To the maximum extent permitted by Ghanaian law, our liability for
-          any claim arising from this website or your order is limited to the
-          value of the order. We&apos;re not liable for indirect or
-          consequential losses, including data loss.
-        </p>
-
-        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
-          8. Governing law
-        </h2>
-        <p>
-          These terms are governed by the laws of Ghana. Disputes will be
-          resolved in the courts of Greater Accra.
-        </p>
-
-        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
-          9. Contact
-        </h2>
-        <p>
-          Questions? Email{" "}
-          <a
-            href="mailto:hello@currentselectronics.test"
-            className="text-primary font-semibold hover:underline"
-          >
-            hello@currentselectronics.test
-          </a>
-          .
-        </p>
+        {t.sections.map((s) => (
+          <div key={s.heading}>
+            <h2 className="text-2xl font-semibold mt-0 -tracking-[0.02em]">{s.heading}</h2>
+            {typeof s.body === "string" ? (
+              <p>{s.body}</p>
+            ) : (
+              <>
+                <p>{s.body.intro}</p>
+                <ul className="list-disc pl-6 space-y-2">
+                  {s.body.bullets.map((b) => (
+                    <li key={b}>{b}</li>
+                  ))}
+                </ul>
+              </>
+            )}
+          </div>
+        ))}
       </section>
     </article>
   );

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

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

package/templates/storefront-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,84 @@
+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. Strings come from `brand.hero` at the
+ * call site — this component is otherwise design-only.
+ */
+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>
+  );
+}