create-brainerce-store 1.20.1 → 1.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.20.1",
+  "version": "1.22.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

package/templates/nextjs/base/next.config.ts

@@ -1,31 +1,31 @@
-import type { NextConfig } from 'next';
-
-const nextConfig: NextConfig = {
-  images: {
-    remotePatterns: [{ protocol: 'https', hostname: '**' }],
-  },
-  async headers() {
-    return [
-      {
-        source: '/(.*)',
-        headers: [
-          {
-            key: 'Content-Security-Policy',
-            value: [
-              "default-src 'self'",
-              "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.meshulam.co.il https://meshulam.co.il https://*.meshulam.co.il https://grow.link https://*.grow.link https://*.grow.security https://js.stripe.com https://pay.google.com",
-              "style-src 'self' 'unsafe-inline' https://cdn.meshulam.co.il",
-              "img-src 'self' data: blob: https:",
-              "font-src 'self' data:",
-              "frame-src 'self' https://*.meshulam.co.il https://grow.link https://*.grow.link https://*.grow.security https://*.creditguard.co.il https://js.stripe.com https://hooks.stripe.com https://pay.google.com",
-              "connect-src 'self' https://*.meshulam.co.il https://grow.link https://*.grow.link https://*.grow.security https://google.com https://pay.google.com https://*.stripe.com https://*.creditguard.co.il",
-              "worker-src 'self' blob:",
-            ].join('; '),
-          },
-        ],
-      },
-    ];
-  },
-};
-
-export default nextConfig;
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  images: {
+    remotePatterns: [{ protocol: 'https', hostname: '**' }],
+  },
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'Content-Security-Policy',
+            value: [
+              "default-src 'self'",
+              "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.meshulam.co.il https://meshulam.co.il https://*.meshulam.co.il https://grow.link https://*.grow.link https://*.grow.security https://js.stripe.com https://pay.google.com",
+              "style-src 'self' 'unsafe-inline' https://cdn.meshulam.co.il",
+              "img-src 'self' data: blob: https:",
+              "font-src 'self' data:",
+              "frame-src 'self' https://*.meshulam.co.il https://grow.link https://*.grow.link https://*.grow.security https://*.creditguard.co.il https://js.stripe.com https://hooks.stripe.com https://pay.google.com https://secure.cardcom.solutions",
+              "connect-src 'self' https://*.meshulam.co.il https://grow.link https://*.grow.link https://*.grow.security https://google.com https://pay.google.com https://*.stripe.com https://*.creditguard.co.il",
+              "worker-src 'self' blob:",
+            ].join('; '),
+          },
+        ],
+      },
+    ];
+  },
+};
+
+export default nextConfig;

package/templates/nextjs/base/src/components/checkout/payment-step.tsx

@@ -154,9 +154,6 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
     initialized.current = true;
 
     const client = getClient();
-    // For iframe-based providers, redirect inside the iframe goes to a
-    // lightweight callback page that sends postMessage to the parent window.
-    // For redirect-based providers, go straight to order-confirmation.
     const iframeSuccessUrl = `${window.location.origin}/payment-complete?checkout_id=${checkoutId}`;
     const iframeFailedUrl = `${window.location.origin}/payment-complete?checkout_id=${checkoutId}&failed=true`;
     const redirectSuccessUrl = `${window.location.origin}/order-confirmation?checkout_id=${checkoutId}`;
@@ -537,15 +534,45 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
 
   if (sdk.renderType === 'iframe') {
     return (
-      <div className={cn('py-4', className)}>
-        <iframe
-          src={paymentIntent.clientSecret}
-          className="w-full border-0"
-          style={{ minHeight: '500px' }}
-          title={t('payment')}
-          allow="payment"
-        />
-      </div>
+      <>
+        {/* Modal overlay */}
+        <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/50 py-6 backdrop-blur-sm">
+          <div className="relative mx-4 w-full max-w-md rounded-2xl bg-white shadow-2xl">
+            {/* Close button */}
+            <button
+              onClick={() => {
+                window.location.href = `/checkout?checkout_id=${checkoutId}&canceled=true`;
+              }}
+              className="absolute end-3 top-3 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white/80 text-gray-500 shadow-sm transition-colors hover:bg-gray-100 hover:text-gray-700"
+              aria-label="Close"
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+              >
+                <path d="M1 1l12 12M13 1L1 13" />
+              </svg>
+            </button>
+            <iframe
+              src={paymentIntent.clientSecret}
+              className="w-full rounded-2xl border-0"
+              style={{ height: '80vh' }}
+              title={t('payment')}
+              allow="payment"
+            />
+          </div>
+        </div>
+        {/* Placeholder so the checkout layout doesn't collapse */}
+        <div className={cn('flex flex-col items-center justify-center py-12', className)}>
+          <LoadingSpinner size="lg" />
+          <p className="text-muted-foreground mt-4 text-sm">{t('preparingPayment')}</p>
+        </div>
+      </>
     );
   }
 

package/templates/nextjs/themes/luxury/globals.css

@@ -0,0 +1,399 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 20 14% 4%;
+    --foreground: 38 25% 86%;
+    --primary: 38 60% 55%;
+    --primary-foreground: 20 14% 4%;
+    --secondary: 20 10% 10%;
+    --secondary-foreground: 38 25% 86%;
+    --muted: 20 10% 12%;
+    --muted-foreground: 30 10% 50%;
+    --accent: 38 60% 55%;
+    --accent-foreground: 20 14% 4%;
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 38 25% 86%;
+    --border: 30 10% 16%;
+    --radius: 0.25rem;
+
+    /* Luxury-specific tokens */
+    --gold: 38 60% 55%;
+    --gold-light: 38 50% 72%;
+    --gold-dark: 38 70% 40%;
+    --surface: 20 12% 7%;
+    --surface-elevated: 20 10% 10%;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    letter-spacing: 0.01em;
+    line-height: 1.7;
+  }
+
+  /* Luxury typography — editorial serif hierarchy */
+  h1,
+  h2,
+  h3,
+  h4 {
+    letter-spacing: 0.04em;
+    font-weight: 500;
+    line-height: 1.2;
+  }
+
+  h1 {
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    font-weight: 400;
+    line-height: 1.1;
+  }
+
+  h2 {
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  /* Elegant link underline animation */
+  a:not([class*="bg-"]) {
+    position: relative;
+    transition: color 0.3s ease, opacity 0.3s ease;
+  }
+
+  main a:not([class*="bg-"]):not([class*="group"])::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    width: 0;
+    height: 1px;
+    background: hsl(var(--gold));
+    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  main a:not([class*="bg-"]):not([class*="group"]):hover::after {
+    width: 100%;
+  }
+
+  /* Refined text selection */
+  ::selection {
+    background: hsl(var(--gold) / 0.3);
+    color: hsl(38 25% 96%);
+  }
+
+  /* Subtle body texture overlay */
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.015'/%3E%3C/svg%3E");
+    pointer-events: none;
+    z-index: 9999;
+  }
+
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: hsl(20 14% 4%);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: hsl(30 10% 18%);
+    border-radius: 3px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--gold) / 0.5);
+  }
+
+  /* Smooth focus states */
+  :focus-visible {
+    outline: 1px solid hsl(var(--gold) / 0.5);
+    outline-offset: 3px;
+  }
+}
+
+@layer components {
+  /* ─── Buttons ─── */
+
+  /* Primary CTA — gold with shimmer sweep */
+  button[class*="bg-primary"],
+  a[class*="bg-primary"] {
+    position: relative;
+    overflow: hidden;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    font-size: 0.78rem;
+    border: 1px solid hsl(var(--gold) / 0.3);
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  button[class*="bg-primary"]:hover,
+  a[class*="bg-primary"]:hover {
+    box-shadow:
+      0 0 20px hsl(var(--gold) / 0.2),
+      0 4px 16px hsl(0 0% 0% / 0.3);
+    border-color: hsl(var(--gold) / 0.6);
+    opacity: 1 !important;
+  }
+
+  button[class*="bg-primary"]::after,
+  a[class*="bg-primary"]::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -75%;
+    width: 50%;
+    height: 200%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      hsl(var(--gold-light) / 0.12),
+      hsl(var(--gold-light) / 0.2),
+      transparent
+    );
+    transform: skewX(-20deg);
+    transition: left 0.7s ease;
+    pointer-events: none;
+  }
+
+  button[class*="bg-primary"]:hover::after,
+  a[class*="bg-primary"]:hover::after {
+    left: 130%;
+  }
+
+  /* Secondary/ghost buttons — thin border, minimal */
+  [class*="bg-secondary"] {
+    border: 1px solid hsl(var(--border));
+    transition: all 0.3s ease;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    font-size: 0.8rem;
+  }
+
+  [class*="bg-secondary"]:hover {
+    border-color: hsl(var(--gold) / 0.4);
+    background: hsl(var(--surface-elevated)) !important;
+  }
+
+  /* ─── Product Cards ─── */
+
+  [class*="group"][class*="border"] {
+    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    border-color: hsl(var(--border) / 0.5);
+    background: hsl(var(--surface));
+  }
+
+  [class*="group"][class*="border"]:hover {
+    border-color: hsl(var(--gold) / 0.25);
+    box-shadow:
+      0 8px 40px hsl(0 0% 0% / 0.5),
+      0 0 0 1px hsl(var(--gold) / 0.08);
+  }
+
+  /* Product image — slow cinematic zoom */
+  [class*="group-hover\\:scale-105"] {
+    transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
+  }
+
+  /* Product image overlay on hover — subtle dark gradient */
+  [class*="group"] [class*="aspect-square"] {
+    position: relative;
+  }
+
+  [class*="group"]:hover [class*="aspect-square"]::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      to top,
+      hsl(20 14% 4% / 0.3),
+      transparent 50%
+    );
+    pointer-events: none;
+    transition: opacity 0.5s ease;
+  }
+
+  /* ─── Form Elements ─── */
+
+  input[class*="border-border"],
+  select[class*="border-border"],
+  textarea[class*="border-border"] {
+    background: hsl(var(--surface)) !important;
+    transition: all 0.3s ease;
+  }
+
+  input[class*="border-border"]:focus,
+  select[class*="border-border"]:focus,
+  textarea[class*="border-border"]:focus {
+    border-color: hsl(var(--gold) / 0.5) !important;
+    box-shadow: 0 0 0 3px hsl(var(--gold) / 0.08);
+    background: hsl(var(--surface-elevated)) !important;
+  }
+
+  /* Placeholder text */
+  input::placeholder,
+  textarea::placeholder {
+    letter-spacing: 0.03em;
+    font-size: 0.85rem;
+  }
+
+  /* ─── Navigation & Header ─── */
+
+  header[class*="sticky"] {
+    backdrop-filter: blur(16px) saturate(1.2);
+    background: hsl(20 14% 4% / 0.8) !important;
+    border-bottom: 1px solid hsl(var(--gold) / 0.08) !important;
+  }
+
+  /* Nav links */
+  nav a {
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+
+  /* ─── Badges & Tags ─── */
+
+  [class*="bg-muted"][class*="text-xs"] {
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    font-size: 0.6rem;
+    font-weight: 600;
+    border: 1px solid hsl(var(--border));
+  }
+
+  /* Sale badges — dark red, refined */
+  [class*="bg-destructive"] {
+    background: hsl(0 60% 38%) !important;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    font-size: 0.65rem;
+  }
+
+  /* ─── Price Display ─── */
+
+  /* Gold gradient on prices */
+  [class*="font-bold"][class*="text-lg"],
+  [class*="font-bold"][class*="text-xl"],
+  [class*="font-bold"][class*="text-2xl"] {
+    background: linear-gradient(
+      135deg,
+      hsl(var(--gold-light)),
+      hsl(var(--gold)),
+      hsl(var(--gold-dark))
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  /* Strikethrough original prices */
+  [class*="line-through"] {
+    opacity: 0.4;
+  }
+
+  /* ─── Dividers & Separators ─── */
+
+  hr {
+    border-color: hsl(var(--border) / 0.3);
+  }
+
+  /* Decorative gold separator */
+  main > section + section {
+    border-top: 1px solid hsl(var(--gold) / 0.06);
+  }
+
+  /* ─── Cart & Checkout ─── */
+
+  /* Sticky summary panel */
+  [class*="sticky"][class*="top-"] {
+    background: hsl(var(--surface));
+    border: 1px solid hsl(var(--border) / 0.5);
+  }
+}
+
+/* ─── Animations ─── */
+
+/* Elegant fade-in-up */
+@keyframes luxury-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+main > * {
+  animation: luxury-fade-in 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
+main > *:nth-child(2) {
+  animation-delay: 0.1s;
+}
+
+main > *:nth-child(3) {
+  animation-delay: 0.2s;
+}
+
+main > *:nth-child(4) {
+  animation-delay: 0.3s;
+}
+
+/* Staggered grid item reveal */
+@keyframes luxury-grid-item {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+[class*="grid"] > [class*="group"] {
+  animation: luxury-grid-item 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(2) {
+  animation-delay: 0.08s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(3) {
+  animation-delay: 0.16s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(4) {
+  animation-delay: 0.24s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(5) {
+  animation-delay: 0.32s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(6) {
+  animation-delay: 0.4s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(7) {
+  animation-delay: 0.48s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(8) {
+  animation-delay: 0.56s;
+}

package/templates/nextjs/themes/luxury/theme.json

@@ -0,0 +1,23 @@
+{
+  "name": "Luxury",
+  "description": "Dark, sophisticated design with Cormorant Garamond serif font and warm gold accents",
+  "font": {
+    "family": "Cormorant Garamond",
+    "import": "next/font/google"
+  },
+  "colors": {
+    "background": "20 14% 4%",
+    "foreground": "38 25% 86%",
+    "primary": "38 60% 55%",
+    "primary-foreground": "20 14% 4%",
+    "secondary": "20 10% 10%",
+    "secondary-foreground": "38 25% 86%",
+    "muted": "20 10% 12%",
+    "muted-foreground": "30 10% 50%",
+    "accent": "38 60% 55%",
+    "accent-foreground": "20 14% 4%",
+    "destructive": "0 72% 51%",
+    "border": "30 10% 16%"
+  },
+  "radius": "0.25rem"
+}