create-brainerce-store 1.50.5 → 1.51.0

package/templates/nextjs/designs/passepartout/app-overlay/layout.tsx.ejs

@@ -0,0 +1,253 @@
+<% if (i18nEnabled) { %>
+import type { Metadata } from 'next';
+import { Assistant, Frank_Ruhl_Libre } from 'next/font/google';
+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 { 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',
+});
+const sans = Assistant({
+  weight: ['300', '400', '600'],
+  subsets: ['hebrew', 'latin'],
+  variable: '--font-sans',
+});
+
+const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';
+
+export const metadata: Metadata = {
+  metadataBase: new URL(baseUrl),
+  title: {
+    default: <%- storeNameJs %>,
+    template: <%- titleTemplateJs %>,
+  },
+  description: <%- storeNameJs %>,
+  alternates: {
+    canonical: '/',
+  },
+  openGraph: {
+    siteName: <%- storeNameJs %>,
+    type: 'website',
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
+};
+
+const organizationJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'Organization',
+  name: <%- storeNameJs %>,
+  url: baseUrl,
+};
+
+export function generateStaticParams() {
+  return supportedLocales.map((locale) => ({ locale }));
+}
+
+export default async function RootLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const dir = getDirection(locale);
+  const nonce = await getNonce();
+
+  // Merchant-driven layout chrome — fetched server-side. Each call falls back
+  // to null/[] on 404 so the layout never crashes when the merchant hasn't
+  // seeded a particular content type yet. New stores ship with default rows
+  // seeded by the backend (StoresService.seedDefaultContent).
+  const client = getServerClient(locale);
+  const [announcements, siteHeader, siteFooter, storeInfo] = await Promise.all([
+    client.content.announcement.list(locale).catch(() => []),
+    client.content.header.get('main', locale).catch(() => null),
+    client.content.footer.get('main', locale).catch(() => null),
+    // SSR-fetch store config so PriceDisplay / FreeShippingBar / upsell UI
+    // render with the real currency, feature flags, and i18n config at frame 0
+    // — without this, Googlebot sees USD/defaults baked into the HTML.
+    fetchStoreInfo(locale),
+  ]);
+
+  return (
+    <html lang={locale} dir={dir}>
+      <head>
+        <script
+          type="application/ld+json"
+          nonce={nonce}
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(organizationJsonLd)
+              .replace(/</g, '\\u003c')
+              .replace(/>/g, '\\u003e')
+              .replace(/&/g, '\\u0026'),
+          }}
+        />
+        {/* Brainerce cookieless traffic analytics — auto-tracks pageviews +
+            SPA route changes. Cookieless (no consent banner needed); the
+            merchant can toggle it per sales channel in the dashboard. */}
+        <script
+          defer
+          src={`${process.env.NEXT_PUBLIC_BRAINERCE_PIXEL_URL || 'https://api.brainerce.com'}/t.js`}
+          data-channel={
+            process.env.NEXT_PUBLIC_BRAINERCE_SALES_CHANNEL_ID || '<%= connectionId %>'
+          }
+          nonce={nonce}
+          suppressHydrationWarning
+        />
+      </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 %>} />
+          </div>
+          <WhatsAppButton />
+          <BrainerceBotWidget />
+        </StoreProvider>
+      </body>
+    </html>
+  );
+}
+<% } else { %>
+import type { Metadata } from 'next';
+import { Assistant, Frank_Ruhl_Libre } from 'next/font/google';
+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 { 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',
+});
+const sans = Assistant({
+  weight: ['300', '400', '600'],
+  subsets: ['hebrew', 'latin'],
+  variable: '--font-sans',
+});
+
+const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';
+
+export const metadata: Metadata = {
+  metadataBase: new URL(baseUrl),
+  title: {
+    default: <%- storeNameJs %>,
+    template: <%- titleTemplateJs %>,
+  },
+  description: <%- storeNameJs %>,
+  alternates: {
+    canonical: '/',
+  },
+  openGraph: {
+    siteName: <%- storeNameJs %>,
+    locale: '<%= ogLocale %>',
+    type: 'website',
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
+};
+
+const organizationJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'Organization',
+  name: <%- storeNameJs %>,
+  url: baseUrl,
+};
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const nonce = await getNonce();
+
+  // Merchant-driven layout chrome — fetched server-side. Each call falls back
+  // to null/[] on 404 so the layout never crashes when the merchant hasn't
+  // seeded a particular content type yet. New stores ship with default rows
+  // seeded by the backend (StoresService.seedDefaultContent).
+  const client = getServerClient();
+  const [announcements, siteHeader, siteFooter, storeInfo] = await Promise.all([
+    client.content.announcement.list().catch(() => []),
+    client.content.header.get('main').catch(() => null),
+    client.content.footer.get('main').catch(() => null),
+    // SSR-fetch store config so PriceDisplay / FreeShippingBar / upsell UI
+    // render with the real currency, feature flags, and i18n config at frame 0
+    // — without this, Googlebot sees USD/defaults baked into the HTML.
+    fetchStoreInfo(),
+  ]);
+
+  return (
+    <html lang="<%= language %>" dir="<%= direction %>">
+      <head>
+        <script
+          type="application/ld+json"
+          nonce={nonce}
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(organizationJsonLd)
+              .replace(/</g, '\\u003c')
+              .replace(/>/g, '\\u003e')
+              .replace(/&/g, '\\u0026'),
+          }}
+        />
+        {/* Brainerce cookieless traffic analytics — auto-tracks pageviews +
+            SPA route changes. Cookieless (no consent banner needed); the
+            merchant can toggle it per sales channel in the dashboard. */}
+        <script
+          defer
+          src={`${process.env.NEXT_PUBLIC_BRAINERCE_PIXEL_URL || 'https://api.brainerce.com'}/t.js`}
+          data-channel={
+            process.env.NEXT_PUBLIC_BRAINERCE_SALES_CHANNEL_ID || '<%= connectionId %>'
+          }
+          nonce={nonce}
+          suppressHydrationWarning
+        />
+      </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} />
+            <SiteHeader header={siteHeader} storeName={<%- storeNameJs %>} />
+            <main className="flex-1">{children}</main>
+            <SiteFooter footer={siteFooter} storeName={<%- storeNameJs %>} />
+          </div>
+          <WhatsAppButton />
+          <BrainerceBotWidget />
+        </StoreProvider>
+      </body>
+    </html>
+  );
+}
+<% } %>

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

@@ -0,0 +1,412 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ─────────────────────────────────────────────────────────────
+   פספרטו · Passe-Partout — a warm gallery hang
+   Two whites do all the work: the plaster wall (--background)
+   and the paper mat (--surface), separated by a 1px hairline.
+   Brass never appears larger than a pin.
+   ───────────────────────────────────────────────────────────── */
+
+@layer base {
+  :root {
+    --background: 40 33% 97%; /* הקיר — warm plaster wall */
+    --foreground: 30 8% 16%; /* דיו — warm ink, never pure black */
+    --primary: 30 8% 16%; /* ink-filled buttons — gallery signage */
+    --primary-foreground: 40 33% 97%;
+    --secondary: 38 25% 94%;
+    --secondary-foreground: 30 8% 16%;
+    --muted: 38 25% 94%; /* plinth — placeholder fields, steppers */
+    --muted-foreground: 30 6% 45%; /* כיתוב — placard gray */
+    --accent: 38 32% 52%; /* פליז — brass, pin-scale only */
+    --accent-foreground: 40 33% 97%;
+    --destructive: 10 42% 44%; /* טרקוטה — sale text, never a red box */
+    --destructive-foreground: 0 0% 100%;
+    --border: 38 18% 88%; /* the hairline — always 1px */
+    --radius: 0rem; /* frames are not rounded */
+
+    --surface: 0 0% 100%; /* הפספרטו — paper mat behind every photo */
+    --plinth: 38 25% 94%;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-size: 0.9375rem;
+    line-height: 1.7;
+  }
+
+  /* Titles — Hebrew print serif. No uppercase, no tracking:
+     Hebrew has no case and tracking distorts the serif. */
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-family: var(--font-serif), 'Frank Ruhl Libre', serif;
+    font-weight: 400;
+    line-height: 1.25;
+    letter-spacing: 0;
+  }
+
+  h1 {
+    font-weight: 300;
+    line-height: 1.2;
+  }
+
+  /* The right-origin underline — every text link draws its 1px
+     ink underline from the right, the RTL reading direction. */
+  main a:not([class*='bg-']):not([class*='group']) {
+    position: relative;
+    transition: color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  main a:not([class*='bg-']):not([class*='group'])::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    inset-inline: 0;
+    height: 1px;
+    background: hsl(var(--foreground));
+    transform: scaleX(0);
+    transform-origin: right;
+    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  main a:not([class*='bg-']):not([class*='group']):hover::after {
+    transform: scaleX(1);
+  }
+
+  ::selection {
+    background: hsl(var(--accent) / 0.2);
+    color: hsl(var(--foreground));
+  }
+
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: hsl(var(--background));
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: hsl(var(--border));
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--accent) / 0.6);
+  }
+
+  :focus-visible {
+    outline: 1px solid hsl(var(--accent));
+    outline-offset: 2px;
+  }
+
+  /* Prices and catalog numbers always read as tabular figures */
+  [data-price],
+  .tabular {
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+@layer components {
+  /* ─── Buttons — gallery signage ─── */
+
+  button[class*='bg-primary'],
+  a[class*='bg-primary'] {
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    font-size: 0.8125rem;
+    border-radius: 0;
+    transition: background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  button[class*='bg-primary']:hover,
+  a[class*='bg-primary']:hover {
+    background: hsl(30 8% 24%) !important;
+    opacity: 1 !important;
+  }
+
+  [class*='bg-secondary'] {
+    border: 1px solid hsl(var(--border));
+    background: transparent !important;
+    font-size: 0.8125rem;
+    letter-spacing: 0.02em;
+    border-radius: 0;
+    transition: border-color 0.2s ease, background-color 0.2s ease;
+  }
+
+  [class*='bg-secondary']:hover {
+    border-color: hsl(var(--foreground));
+    background: hsl(var(--muted)) !important;
+  }
+
+  /* ─── Product images — the breath ─── */
+
+  [class*='group-hover\:scale-105'] {
+    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
+  }
+
+  /* ─── Forms — hairline boxes on the mat ─── */
+
+  input[class*='border'],
+  select[class*='border'],
+  textarea[class*='border'] {
+    background: hsl(var(--surface));
+    border-radius: 0;
+    transition: border-color 0.2s ease;
+  }
+
+  input[class*='border']:focus,
+  select[class*='border']:focus,
+  textarea[class*='border']:focus {
+    border-color: hsl(var(--foreground));
+    box-shadow: none;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    color: hsl(var(--muted-foreground) / 0.7);
+    font-size: 0.875rem;
+  }
+
+  /* ─── Header — the gallery entrance ─── */
+
+  header[class*='sticky'] {
+    backdrop-filter: blur(8px);
+    background: hsl(var(--background) / 0.92) !important;
+    border-bottom: 1px solid hsl(var(--border)) !important;
+  }
+
+  nav a {
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+  }
+
+  /* ─── Placards — quiet caption chips ─── */
+
+  [class*='bg-muted'][class*='text-xs'] {
+    background: transparent !important;
+    border: 0;
+    color: hsl(var(--muted-foreground));
+    font-size: 0.6875rem;
+    letter-spacing: 0.08em;
+    padding-inline: 0;
+  }
+
+  /* Sale — terracotta text, never a red box */
+  [class*='bg-destructive'] {
+    background: transparent !important;
+    color: hsl(var(--destructive)) !important;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    font-size: 0.6875rem;
+    padding-inline: 0;
+  }
+
+  [class*='line-through'] {
+    opacity: 0.4;
+  }
+
+  hr {
+    border-color: hsl(var(--border));
+  }
+
+  /* Sticky summary panels sit on the mat */
+  [class*='sticky'][class*='top-'] {
+    background: hsl(var(--surface));
+    border: 1px solid hsl(var(--border));
+  }
+
+  /* ─── Gallery furniture ─── */
+
+  /* Edge-fading hairline — the engraved section divider */
+  .hairline-fade {
+    height: 1px;
+    max-width: 20rem;
+    margin-inline: auto;
+    background: linear-gradient(to left, transparent, hsl(var(--border)), transparent);
+  }
+
+  /* The brass tick — a 12px pin centered on a hairline */
+  .brass-rule {
+    position: relative;
+    height: 1px;
+    background: hsl(var(--border));
+  }
+
+  .brass-rule::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 50%;
+    transform: translateX(50%);
+    width: 12px;
+    height: 1px;
+    background: hsl(var(--accent));
+  }
+
+  /* Overline — the 11px placard caption */
+  .placard {
+    font-size: 0.6875rem;
+    font-weight: 400;
+    letter-spacing: 0.08em;
+    color: hsl(var(--muted-foreground));
+  }
+
+  /* Paper grain — the wall has tooth. Sits above everything at ~2%
+     opacity so photography and type feel printed, not rendered. */
+  .paper-grain {
+    position: fixed;
+    inset: 0;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.021'/%3E%3C/svg%3E");
+    pointer-events: none;
+    z-index: 9999;
+  }
+
+  /* A hung work casts a real shadow — soft, warm, falling down the wall */
+  .hung {
+    box-shadow:
+      0 24px 44px -28px hsl(28 30% 22% / 0.3),
+      0 6px 14px -10px hsl(28 30% 22% / 0.12);
+  }
+
+  /* Sunlight on the wall — huge soft washes of warm light */
+  .wash {
+    pointer-events: none;
+    position: absolute;
+    border-radius: 9999px;
+    filter: blur(48px);
+  }
+
+  .wash-sand {
+    background: radial-gradient(closest-side, hsl(34 60% 88% / 0.65), transparent);
+  }
+
+  .wash-blush {
+    background: radial-gradient(closest-side, hsl(12 50% 88% / 0.5), transparent);
+  }
+
+  /* The breathing dot — the only loading state */
+  .breathing-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 9999px;
+    background: hsl(var(--accent));
+    animation: breathe 1.8s ease-in-out infinite;
+  }
+
+  /* Scroll reveal — sections rise 16px as they enter the viewport */
+  [data-reveal] {
+    opacity: 0;
+    transform: translateY(16px);
+    transition:
+      opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
+      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  [data-reveal].revealed {
+    opacity: 1;
+    transform: none;
+  }
+
+  /* The marquee — a quiet engraved band that drifts with the reading
+     direction; two identical halves make the loop seamless */
+  .marquee {
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .marquee-track {
+    display: inline-flex;
+    animation: marquee-drift 36s linear infinite;
+  }
+
+  .marquee:hover .marquee-track {
+    animation-play-state: paused;
+  }
+}
+
+/* ─── Motion — nothing moves more than 8px or longer than 700ms ─── */
+
+@keyframes gallery-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes breathe {
+  0%,
+  100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@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);
+}
+
+/* Touch feedback — every filled button settles 1px under the finger */
+button[class*='bg-primary']:active,
+a[class*='bg-primary']:active {
+  transform: translateY(1px);
+}
+
+@keyframes marquee-drift {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(50%);
+  }
+}
+
+[dir='ltr'] .marquee-track {
+  animation-name: marquee-drift-ltr;
+}
+
+@keyframes marquee-drift-ltr {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+main {
+  animation: gallery-fade 0.4s ease both;
+}
+
+[class*='grid'] > [class*='group'] {
+  animation: gallery-fade 0.3s ease both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
+  }
+}