@cimplify/cli 0.2.7 → 0.3.0

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