@cimplify/cli 0.2.0

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

@@ -0,0 +1,87 @@
+"use client";
+
+import Link from "next/link";
+import {
+  CardVariant,
+  FoodProductCard,
+  RetailProductCard,
+  WholesaleProductCard,
+  DigitalProductCard,
+  BundleProductCard,
+  CompositeProductCard,
+  StandardServiceCard,
+  CompactServiceCard,
+  ScheduleServiceCard,
+  RentalServiceCard,
+  AccommodationCard,
+  LeaseServiceCard,
+  SubscriptionCard,
+} from "@cimplify/sdk/react";
+import type { CardLayoutProps } from "@cimplify/sdk/react";
+import type { Product } from "@cimplify/sdk";
+import { PRODUCT_TYPE, RENDER_HINT, DURATION_UNIT } from "@cimplify/sdk";
+
+const RENTAL_UNITS = new Set<string>([DURATION_UNIT.Days, DURATION_UNIT.Hours]);
+const LEASE_UNITS = new Set<string>([DURATION_UNIT.Weeks, DURATION_UNIT.Months, DURATION_UNIT.Years]);
+
+const VARIANT_CARDS: Record<CardVariant, React.ComponentType<CardLayoutProps>> = {
+  [CardVariant.Food]: FoodProductCard,
+  [CardVariant.Retail]: RetailProductCard,
+  [CardVariant.Wholesale]: WholesaleProductCard,
+  [CardVariant.Digital]: DigitalProductCard,
+  [CardVariant.Bundle]: BundleProductCard,
+  [CardVariant.Composite]: CompositeProductCard,
+  [CardVariant.Standard]: StandardServiceCard,
+  [CardVariant.Compact]: CompactServiceCard,
+  [CardVariant.Schedule]: ScheduleServiceCard,
+  [CardVariant.Rental]: RentalServiceCard,
+  [CardVariant.Accommodation]: AccommodationCard,
+  [CardVariant.Lease]: LeaseServiceCard,
+  [CardVariant.Subscription]: SubscriptionCard,
+};
+
+function resolveVariant(p: Product): CardVariant {
+  if (p.type === PRODUCT_TYPE.Bundle) return CardVariant.Bundle;
+  if (p.type === PRODUCT_TYPE.Composite) return CardVariant.Composite;
+  if (p.quantity_pricing && p.quantity_pricing.length > 1) return CardVariant.Wholesale;
+  if (p.type === PRODUCT_TYPE.Digital) return CardVariant.Digital;
+  if (p.type === PRODUCT_TYPE.Service) {
+    if (p.duration_unit && RENTAL_UNITS.has(p.duration_unit)) return CardVariant.Rental;
+    if (p.duration_unit === DURATION_UNIT.Nights) return CardVariant.Accommodation;
+    if (p.duration_unit && LEASE_UNITS.has(p.duration_unit)) return CardVariant.Lease;
+    if (p.billing_plans && p.billing_plans.length > 0 && !p.duration_minutes) return CardVariant.Subscription;
+    return CardVariant.Standard;
+  }
+  if (p.render_hint === RENDER_HINT.Food) return CardVariant.Food;
+  return CardVariant.Retail;
+}
+
+interface Props {
+  product: Product;
+  /** Override the auto-detected card variant. */
+  variant?: CardVariant;
+}
+
+/**
+ * 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 = `/products/${encodeURIComponent(slug)}`;
+
+  return (
+    <Card
+      product={product}
+      renderLink={({ className, children }) => (
+        <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>
+  );
+}