create-brainerce-store 1.51.0 → 1.52.0

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

@@ -1,42 +1,69 @@
-import type { Config } from 'tailwindcss';
-
-const config: Config = {
-  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
-  theme: {
-    extend: {
-      colors: {
-        primary: 'hsl(var(--primary))',
-        'primary-foreground': 'hsl(var(--primary-foreground))',
-        secondary: 'hsl(var(--secondary))',
-        'secondary-foreground': 'hsl(var(--secondary-foreground))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        muted: 'hsl(var(--muted))',
-        'muted-foreground': 'hsl(var(--muted-foreground))',
-        border: 'hsl(var(--border))',
-        destructive: 'hsl(var(--destructive))',
-        'destructive-foreground': 'hsl(var(--destructive-foreground))',
-        accent: 'hsl(var(--accent))',
-        'accent-foreground': 'hsl(var(--accent-foreground))',
-        // Extended tokens used by design packs (defined in their globals.css).
-        // Harmless when a design doesn't set the CSS variables — the classes
-        // simply aren't used by the base ui.
-        surface: 'hsl(var(--surface))',
-        plinth: 'hsl(var(--plinth))',
-      },
-      fontFamily: {
-        // Design packs set --font-sans / --font-serif via next/font variables
-        // in app/layout.tsx; the fallbacks keep font-sans/font-serif usable
-        // even when a layout doesn't define them.
-        sans: ['var(--font-sans)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
-        serif: ['var(--font-serif)', 'ui-serif', 'Georgia', 'serif'],
-      },
-      borderRadius: {
-        DEFAULT: 'var(--radius)',
-      },
-    },
-  },
-  plugins: [],
-};
-
-export default config;
+import type { Config } from 'tailwindcss';
+import tailwindcssAnimate from 'tailwindcss-animate';
+
+const config: Config = {
+  darkMode: ['class'],
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: 'hsl(var(--primary))',
+        'primary-foreground': 'hsl(var(--primary-foreground))',
+        secondary: 'hsl(var(--secondary))',
+        'secondary-foreground': 'hsl(var(--secondary-foreground))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        muted: 'hsl(var(--muted))',
+        'muted-foreground': 'hsl(var(--muted-foreground))',
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        destructive: 'hsl(var(--destructive))',
+        'destructive-foreground': 'hsl(var(--destructive-foreground))',
+        accent: 'hsl(var(--accent))',
+        'accent-foreground': 'hsl(var(--accent-foreground))',
+        card: 'hsl(var(--card))',
+        'card-foreground': 'hsl(var(--card-foreground))',
+        popover: 'hsl(var(--popover))',
+        'popover-foreground': 'hsl(var(--popover-foreground))',
+        // Extended tokens used by design packs (defined in their globals.css).
+        // Harmless when a design doesn't set the CSS variables — the classes
+        // simply aren't used by the base ui.
+        surface: 'hsl(var(--surface))',
+        plinth: 'hsl(var(--plinth))',
+      },
+      fontFamily: {
+        // Design packs set --font-sans / --font-serif via next/font variables
+        // in app/layout.tsx; the fallbacks keep font-sans/font-serif usable
+        // even when a layout doesn't define them.
+        sans: ['var(--font-sans)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+        serif: ['var(--font-serif)', 'ui-serif', 'Georgia', 'serif'],
+      },
+      borderRadius: {
+        // shadcn/ui convention: every radius derives from the --radius token,
+        // so `rounded`, `rounded-md`, `rounded-lg` all follow the theme.
+        DEFAULT: 'var(--radius)',
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [tailwindcssAnimate],
+};
+
+export default config;

package/templates/nextjs/designs/{passepartout → atelier}/app-overlay/layout.tsx.ejs

@@ -5,25 +5,26 @@ import { StoreProvider } from '@/core/providers/store-provider';
 import { AnnouncementBar } from '@/ui/layout/announcement-bar';
 import { SiteHeader } from '@/ui/layout/site-header';
 import { SiteFooter } from '@/ui/layout/site-footer';
-import { WhatsAppButton } from '@/ui/layout/whatsapp-button';
+import { CartDrawer } from '@/ui/cart/cart-drawer';
 import { BrainerceBotWidget } from '@/components/brainerce-bot';
 import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce';
 import { getDirection, supportedLocales } from '@/i18n';
 import { getNonce } from '@/core/lib/nonce';
 import '../globals.css';
 
-// פספרטו · Passe-Partout: print serif for titles, an invisible sans for
-// everything else. Both faces carry Hebrew + Latin subsets.
-const serif = Frank_Ruhl_Libre({
-  weight: ['300', '400', '500'],
-  subsets: ['hebrew', 'latin'],
-  variable: '--font-serif',
-});
+// Atelier: Assistant (clean Hebrew grotesque) for body, Frank Ruhl Libre
+// (Hebrew serif — the gallery voice) for display. Exposed as CSS variables
+// consumed by tailwind's font-sans / font-serif and the h1-h3 base styles.
 const sans = Assistant({
-  weight: ['300', '400', '600'],
   subsets: ['hebrew', 'latin'],
+  weight: ['400', '500', '600', '700'],
   variable: '--font-sans',
 });
+const serif = Frank_Ruhl_Libre({
+  subsets: ['hebrew', 'latin'],
+  weight: ['400', '500', '700'],
+  variable: '--font-serif',
+});
 
 const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';
 
@@ -112,16 +113,14 @@ export default async function RootLayout({
         />
       </head>
       <body className={`${sans.variable} ${serif.variable} font-sans`}>
-        {/* The wall has tooth — a fixed ~2% noise film above everything */}
-        <div aria-hidden="true" className="paper-grain" />
         <StoreProvider locale={locale} initialStoreInfo={storeInfo}>
           <div className="min-h-screen flex flex-col">
             <AnnouncementBar announcements={announcements} />
             <SiteHeader header={siteHeader} storeName={<%- storeNameJs %>} />
             <main className="flex-1">{children}</main>
-            <SiteFooter footer={siteFooter} storeName={<%- storeNameJs %>} />
+            <SiteFooter footer={siteFooter} storeName={<%- storeNameJs %>} locale={locale} />
           </div>
-          <WhatsAppButton />
+          <CartDrawer />
           <BrainerceBotWidget />
         </StoreProvider>
       </body>
@@ -135,24 +134,25 @@ import { StoreProvider } from '@/core/providers/store-provider';
 import { AnnouncementBar } from '@/ui/layout/announcement-bar';
 import { SiteHeader } from '@/ui/layout/site-header';
 import { SiteFooter } from '@/ui/layout/site-footer';
-import { WhatsAppButton } from '@/ui/layout/whatsapp-button';
+import { CartDrawer } from '@/ui/cart/cart-drawer';
 import { BrainerceBotWidget } from '@/components/brainerce-bot';
 import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce';
 import { getNonce } from '@/core/lib/nonce';
 import './globals.css';
 
-// פספרטו · Passe-Partout: print serif for titles, an invisible sans for
-// everything else. Both faces carry Hebrew + Latin subsets.
-const serif = Frank_Ruhl_Libre({
-  weight: ['300', '400', '500'],
-  subsets: ['hebrew', 'latin'],
-  variable: '--font-serif',
-});
+// Atelier: Assistant (clean Hebrew grotesque) for body, Frank Ruhl Libre
+// (Hebrew serif — the gallery voice) for display. Exposed as CSS variables
+// consumed by tailwind's font-sans / font-serif and the h1-h3 base styles.
 const sans = Assistant({
-  weight: ['300', '400', '600'],
   subsets: ['hebrew', 'latin'],
+  weight: ['400', '500', '600', '700'],
   variable: '--font-sans',
 });
+const serif = Frank_Ruhl_Libre({
+  subsets: ['hebrew', 'latin'],
+  weight: ['400', '500', '700'],
+  variable: '--font-serif',
+});
 
 const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';
 
@@ -234,8 +234,6 @@ export default async function RootLayout({
         />
       </head>
       <body className={`${sans.variable} ${serif.variable} font-sans`}>
-        {/* The wall has tooth — a fixed ~2% noise film above everything */}
-        <div aria-hidden="true" className="paper-grain" />
         <StoreProvider initialStoreInfo={storeInfo}>
           <div className="min-h-screen flex flex-col">
             <AnnouncementBar announcements={announcements} />
@@ -243,7 +241,7 @@ export default async function RootLayout({
             <main className="flex-1">{children}</main>
             <SiteFooter footer={siteFooter} storeName={<%- storeNameJs %>} />
           </div>
-          <WhatsAppButton />
+          <CartDrawer />
           <BrainerceBotWidget />
         </StoreProvider>
       </body>

package/templates/nextjs/designs/atelier/globals.css

@@ -0,0 +1,396 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ---------------------------------------------------------------------------
+   Design system — "Atelier" (premium modern jewelry commerce)
+   Palette (5 total): warm white / warm ink / deep forest / warm sand (2 tints)
+   + functional destructive. Tokens only — never raw colors in components.
+--------------------------------------------------------------------------- */
+
+@layer base {
+  :root {
+    --background: 40 33% 98%; /* warm white */
+    --foreground: 30 12% 13%; /* warm ink */
+    --primary: 163 34% 21%; /* deep forest */
+    --primary-foreground: 40 33% 98%;
+    --secondary: 40 28% 94%; /* warm sand */
+    --secondary-foreground: 30 12% 13%;
+    --muted: 40 28% 94%;
+    --muted-foreground: 30 8% 40%;
+    --accent: 40 24% 89%; /* deeper sand (hover) */
+    --accent-foreground: 30 12% 13%;
+    --destructive: 0 60% 44%;
+    --destructive-foreground: 40 33% 98%;
+    --border: 38 18% 86%;
+    --radius: 0.75rem;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      scroll-behavior: auto;
+    }
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-size: 1rem;
+    line-height: 1.6;
+  }
+
+  h1,
+  h2,
+  h3,
+  .font-display {
+    font-family: var(--font-serif), ui-serif, Georgia, serif;
+    @apply text-balance font-medium;
+    line-height: 1.2;
+  }
+
+  ::selection {
+    @apply bg-primary text-primary-foreground;
+  }
+
+  :focus-visible {
+    @apply outline-none ring-2 ring-primary ring-offset-2 ring-offset-background;
+  }
+}
+
+@layer components {
+  /* Layout rhythm */
+  /* Page container — near-full-bleed like the reference DTC sites (Mejuri /
+     Missoma): generous gutters instead of a narrow boxed column, capped only
+     on ultra-wide screens so lines never run away. */
+  .container-page {
+    @apply mx-auto w-full max-w-[105rem] px-4 sm:px-6 lg:px-10;
+  }
+  /* Contained variant for transactional / reading pages (cart, PDP) where
+     very long lines hurt more than the full-bleed look helps. */
+  .container-narrow {
+    @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
+  }
+  .section-pad {
+    @apply py-14 sm:py-16 lg:py-20;
+  }
+
+  /* Small caps-like label (caption size — tracking OK for Hebrew at this size) */
+  .eyebrow {
+    @apply mb-3 block text-xs font-semibold uppercase tracking-widest text-primary;
+  }
+
+  /* Buttons */
+  .btn {
+    @apply inline-flex select-none items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-semibold transition-colors duration-200 disabled:pointer-events-none disabled:opacity-50;
+  }
+  .btn-primary {
+    @apply btn bg-primary text-primary-foreground hover:bg-primary/90 shadow-[0_10px_28px_-10px_hsl(var(--primary)/0.55)] transition-[transform,box-shadow,background-color] hover:-translate-y-0.5 hover:shadow-[0_14px_34px_-10px_hsl(var(--primary)/0.6)];
+  }
+  .btn-outline {
+    @apply btn border border-foreground/20 bg-transparent text-foreground hover:border-foreground hover:bg-foreground hover:text-background;
+  }
+  .btn-soft {
+    @apply btn bg-secondary text-secondary-foreground hover:bg-accent;
+  }
+  .btn-ghost {
+    @apply btn text-foreground hover:bg-secondary;
+  }
+  .btn-md {
+    @apply h-11 px-6;
+  }
+  .btn-lg {
+    @apply h-12 px-8 text-base;
+  }
+  .btn-sm {
+    @apply h-9 px-4 text-sm;
+  }
+
+  /* Cards — oversized corners + forest-tinted lift on hover */
+  .card {
+    @apply rounded-2xl border bg-background shadow-sm;
+  }
+  .card-hover {
+    @apply transition-[transform,box-shadow] duration-300 hover:-translate-y-1 hover:shadow-[0_20px_45px_-18px_hsl(var(--primary)/0.35)];
+  }
+
+  /* Glassy surface (token-blended, no raw colors) */
+  .glass {
+    @apply rounded-2xl border border-background/60 bg-background/75 shadow-lg backdrop-blur-md;
+  }
+
+  /* Badges / pills */
+  .badge {
+    @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold;
+  }
+  .badge-primary {
+    @apply badge bg-primary text-primary-foreground;
+  }
+  .badge-soft {
+    @apply badge bg-secondary text-secondary-foreground;
+  }
+  .badge-destructive {
+    @apply badge bg-destructive/10 text-destructive;
+  }
+
+  /* Form controls */
+  .input {
+    @apply h-11 w-full rounded-lg border bg-background px-3.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary;
+  }
+  .select {
+    @apply h-10 rounded-full border bg-background pe-8 ps-4 text-sm font-medium text-foreground;
+    appearance: none;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23413b35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+  }
+  [dir='rtl'] .select {
+    background-position: left 0.75rem center;
+  }
+
+  /* Product description prose (merchant HTML) */
+  .prose-store {
+    @apply text-[0.95rem] leading-7 text-muted-foreground;
+  }
+  .prose-store p {
+    @apply mb-3;
+  }
+  .prose-store strong {
+    @apply font-semibold text-foreground;
+  }
+  .prose-store ul {
+    @apply mb-3 list-disc ps-5;
+  }
+  .prose-store ol {
+    @apply mb-3 list-decimal ps-5;
+  }
+  .prose-store a {
+    @apply text-primary underline underline-offset-2;
+  }
+  .prose-store h1,
+  .prose-store h2,
+  .prose-store h3 {
+    @apply mb-2 mt-4 text-foreground;
+  }
+}
+
+@layer utilities {
+  /* Flip directional glyphs (arrows) so they point with the reading direction */
+  [dir='rtl'] .rtl-flip {
+    transform: scaleX(-1);
+  }
+
+  /* --- Atmosphere washes: soft blends of the SAME tokens (forest + sand) --- */
+  .wash-hero {
+    background:
+      radial-gradient(52rem 32rem at 85% -10%, hsl(var(--primary) / 0.1), transparent 60%),
+      radial-gradient(46rem 30rem at 8% 108%, hsl(var(--primary) / 0.08), transparent 55%),
+      linear-gradient(180deg, hsl(var(--secondary) / 0.85), hsl(var(--background)));
+  }
+  [dir='rtl'] .wash-hero {
+    background:
+      radial-gradient(52rem 32rem at 15% -10%, hsl(var(--primary) / 0.1), transparent 60%),
+      radial-gradient(46rem 30rem at 92% 108%, hsl(var(--primary) / 0.08), transparent 55%),
+      linear-gradient(180deg, hsl(var(--secondary) / 0.85), hsl(var(--background)));
+  }
+  .wash-sand {
+    background: linear-gradient(
+      180deg,
+      hsl(var(--background)),
+      hsl(var(--secondary) / 0.9) 30%,
+      hsl(var(--secondary) / 0.9) 70%,
+      hsl(var(--background))
+    );
+  }
+  .wash-forest {
+    background:
+      radial-gradient(40rem 24rem at 20% 0%, hsl(var(--primary-foreground) / 0.12), transparent 60%),
+      linear-gradient(160deg, hsl(var(--primary)), hsl(163 40% 15%));
+  }
+
+  /* Soft blurred glow blob (decorative, sits behind content) */
+  .glow-blob {
+    position: absolute;
+    border-radius: 9999px;
+    background: hsl(var(--primary) / 0.16);
+    filter: blur(64px);
+    pointer-events: none;
+  }
+
+  /* Marquee band — duplicated track scrolls seamlessly; guarded below */
+  .marquee {
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .marquee-track {
+    display: inline-flex;
+    align-items: center;
+    min-width: 200%;
+  }
+
+  /* Single orchestrated reveal — guarded for reduced motion */
+  .reveal {
+    opacity: 1;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .reveal {
+      animation: reveal-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
+    }
+    .reveal-delay-1 {
+      animation-delay: 0.12s;
+    }
+    .reveal-delay-2 {
+      animation-delay: 0.24s;
+    }
+    .reveal-delay-3 {
+      animation-delay: 0.36s;
+    }
+    .img-zoom {
+      transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .group:hover .img-zoom {
+      transform: scale(1.045);
+    }
+    .spin {
+      animation: spinner 0.8s linear infinite;
+    }
+
+    /* Gentle floating — hero cards & chips */
+    .float-slow {
+      animation: float-y 7s ease-in-out infinite;
+    }
+    .float-slower {
+      animation: float-y 9s ease-in-out 1.2s infinite;
+    }
+    .blob-drift {
+      animation: blob-drift 14s ease-in-out infinite alternate;
+    }
+
+    /* Scroll reveals (driven by the <Reveal> island adding .is-visible) */
+    .reveal-scroll {
+      opacity: 0;
+      transform: translateY(28px);
+      transition:
+        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
+        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .reveal-scroll.is-visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    .marquee-track {
+      animation: marquee-ltr 32s linear infinite;
+    }
+    [dir='rtl'] .marquee-track {
+      animation-name: marquee-rtl;
+    }
+  }
+
+  @keyframes reveal-up {
+    from {
+      opacity: 0;
+      transform: translateY(16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes spinner {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes float-y {
+    0%,
+    100% {
+      transform: translateY(0) rotate(var(--float-rotate, 0deg));
+    }
+    50% {
+      transform: translateY(-12px) rotate(var(--float-rotate, 0deg));
+    }
+  }
+
+  @keyframes blob-drift {
+    from {
+      transform: translate(0, 0) scale(1);
+    }
+    to {
+      transform: translate(3rem, -2rem) scale(1.15);
+    }
+  }
+
+  @keyframes marquee-ltr {
+    to {
+      transform: translateX(-50%);
+    }
+  }
+  @keyframes marquee-rtl {
+    to {
+      transform: translateX(50%);
+    }
+  }
+}
+
+/* Cart bump — the landing pad reacts when a flown item arrives */
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes cart-bump {
+    30% { transform: scale(1.3); }
+    60% { transform: scale(0.92); }
+  }
+  .cart-bump { animation: cart-bump 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
+}
+
+/* Full-page loader — a gem orbiting a ring band (Atelier's "polishing" mark).
+   Static ring + gem under reduced motion; the orbit/breathe are additive. */
+.loader-orbit {
+  position: relative;
+  display: flex;
+  height: 3.5rem;
+  width: 3.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border: 1px solid hsl(var(--primary) / 0.25);
+  box-shadow: inset 0 0 18px hsl(var(--primary) / 0.06);
+}
+.loader-orbit-dot {
+  position: absolute;
+  inset: 0;
+}
+.loader-orbit-dot::before {
+  content: '';
+  position: absolute;
+  top: -3px;
+  inset-inline-start: 50%;
+  margin-inline-start: -3.5px;
+  height: 7px;
+  width: 7px;
+  border-radius: 9999px;
+  background: hsl(var(--primary));
+  box-shadow: 0 0 12px hsl(var(--primary) / 0.55);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .loader-orbit-dot {
+    animation: orbit 1.5s cubic-bezier(0.55, 0.12, 0.45, 0.88) infinite;
+  }
+  .loader-text {
+    animation: loader-breathe 2.2s ease-in-out infinite;
+  }
+  @keyframes orbit {
+    to { transform: rotate(360deg); }
+  }
+  @keyframes loader-breathe {
+    0%, 100% { opacity: 0.55; }
+    50% { opacity: 1; }
+  }
+}