create-brainerce-store 1.62.0 → 1.64.0

package/templates/nextjs/designs/atelier/ui/home/category-tiles.tsx

@@ -1,151 +1,151 @@
-'use client';
-
-/**
- * Category tiles derived from the live catalog. Uses product categories when
- * present; otherwise derives collections from Hebrew product-name prefixes
- * (טבעת / שרשרת / עגילי / צמיד) so the section is never empty on stores that
- * haven't seeded category data. Each tile shows a real catalog photo.
- */
-import type { Product } from 'brainerce';
-import { Link } from '@/core/lib/navigation';
-import { CdnImage as Image } from '@/ui/shared/cdn-image';
-import { useTranslations } from '@/core/lib/translations';
-import { IconArrowEnd } from '@/ui/shared/icons';
-
-const PREFIX_GROUPS = [
-  { prefixes: ['טבעת', 'טבעות', 'ring'], labelKey: 'catRings' },
-  { prefixes: ['שרשרת', 'שרשראות', 'necklace'], labelKey: 'catNecklaces' },
-  { prefixes: ['עגיל', 'earring'], labelKey: 'catEarrings' },
-  { prefixes: ['צמיד', 'bracelet'], labelKey: 'catBracelets' },
-] as const;
-
-interface Tile {
-  key: string;
-  label: string;
-  imageUrl: string;
-  imageAlt: string;
-  href: string;
-  count: number;
-}
-
-export function CategoryTiles({ products }: { products: Product[] }) {
-  const t = useTranslations('home');
-  const tc = useTranslations('common');
-
-  const tiles: Tile[] = [];
-
-  // Prefer real category data when the catalog has it.
-  const byCategory = new Map<string, { name: string; slug: string | null; items: Product[] }>();
-  for (const p of products) {
-    for (const cat of p.categories ?? []) {
-      const entry = byCategory.get(cat.id) ?? { name: cat.name, slug: cat.slug ?? null, items: [] };
-      entry.items.push(p);
-      byCategory.set(cat.id, entry);
-    }
-  }
-
-  // Tile photo: prefer the LAST matching product's image — the featured grid
-  // above leads with the first ones, so tiles avoid repeating the same shots.
-  const pickImage = (items: Product[]) =>
-    [...items].reverse().find((p) => p.images?.[0]?.url)?.images?.[0];
-
-  if (byCategory.size >= 2) {
-    for (const [id, { name, slug, items }] of Array.from(byCategory.entries()).slice(0, 4)) {
-      const img = pickImage(items);
-      if (!img?.url) continue;
-      // Prefer the real category landing page (SEO-indexed, has its own
-      // written description) — this is the only place in the storefront that
-      // links to it, so without a real slug it'd be an orphaned page. Fall
-      // back to the filtered grid for categories with no slug yet.
-      tiles.push({
-        key: id,
-        label: name,
-        imageUrl: img.url,
-        imageAlt: img.alt || name,
-        href: slug
-          ? `/category/${encodeURIComponent(slug)}`
-          : `/products?category=${encodeURIComponent(id)}`,
-        count: items.length,
-      });
-    }
-  } else {
-    // Derive from name prefixes — never hardcodes products, only groups them.
-    for (const group of PREFIX_GROUPS) {
-      const items = products.filter((p) =>
-        group.prefixes.some((prefix) => p.name?.toLowerCase().startsWith(prefix))
-      );
-      const img = pickImage(items);
-      if (!img?.url) continue;
-      tiles.push({
-        key: group.labelKey,
-        label: t(group.labelKey),
-        imageUrl: img.url,
-        imageAlt: img.alt || t(group.labelKey),
-        href: `/products?search=${encodeURIComponent(group.prefixes[0])}`,
-        count: items.length,
-      });
-    }
-  }
-
-  if (tiles.length === 0) return null;
-
-  return (
-    <section id="categories" className="section-pad wash-sand relative overflow-hidden">
-      <div aria-hidden="true" className="glow-blob -start-24 top-1/3 h-72 w-72 opacity-70" />
-      <div className="container-page relative">
-        <div className="mb-8 max-w-xl lg:mb-10">
-          <span className="eyebrow">{t('categoriesEyebrow')}</span>
-          <h2 className="text-4xl sm:text-5xl">{t('categoriesTitle')}</h2>
-          <p className="text-muted-foreground mt-3">{t('categoriesSubtitle')}</p>
-        </div>
-
-        <ul
-          className={`grid grid-cols-2 gap-3 sm:gap-5 lg:gap-6 ${
-            tiles.length === 3 ? 'lg:grid-cols-3' : 'lg:grid-cols-4'
-          }`}
-        >
-          {tiles.map((tile, idx) => (
-            <li
-              key={tile.key}
-              className={
-                // Odd tile count: let the last tile span the full row on
-                // mobile so the 2-col grid never shows an orphan hole.
-                tiles.length % 2 === 1 && idx === tiles.length - 1
-                  ? 'col-span-2 lg:col-span-1'
-                  : undefined
-              }
-            >
-              <Link href={tile.href} className="card card-hover group block overflow-hidden">
-                <span className="bg-secondary relative block aspect-square overflow-hidden">
-                  <Image
-                    src={tile.imageUrl}
-                    alt={tile.imageAlt}
-                    fill
-                    sizes="(max-width: 640px) 50vw, 25vw"
-                    className="img-zoom object-cover"
-                  />
-                </span>
-                <span className="flex items-center justify-between gap-2 px-4 py-3.5">
-                  <span>
-                    <span className="text-foreground block text-[15px] font-semibold">
-                      {tile.label}
-                    </span>
-                    <span className="text-muted-foreground block text-xs">
-                      {tile.count} {tile.count === 1 ? tc('product') : tc('products')}
-                    </span>
-                  </span>
-                  <span
-                    aria-hidden="true"
-                    className="bg-secondary text-foreground group-hover:bg-primary group-hover:text-primary-foreground flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition-colors"
-                  >
-                    <IconArrowEnd size={16} className="rtl-flip" />
-                  </span>
-                </span>
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
-  );
-}
+'use client';
+
+/**
+ * Category tiles derived from the live catalog. Uses product categories when
+ * present; otherwise derives collections from Hebrew product-name prefixes
+ * (טבעת / שרשרת / עגילי / צמיד) so the section is never empty on stores that
+ * haven't seeded category data. Each tile shows a real catalog photo.
+ */
+import type { Product } from 'brainerce';
+import { Link } from '@/core/lib/navigation';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import { useTranslations } from '@/core/lib/translations';
+import { IconArrowEnd } from '@/ui/shared/icons';
+
+const PREFIX_GROUPS = [
+  { prefixes: ['טבעת', 'טבעות', 'ring'], labelKey: 'catRings' },
+  { prefixes: ['שרשרת', 'שרשראות', 'necklace'], labelKey: 'catNecklaces' },
+  { prefixes: ['עגיל', 'earring'], labelKey: 'catEarrings' },
+  { prefixes: ['צמיד', 'bracelet'], labelKey: 'catBracelets' },
+] as const;
+
+interface Tile {
+  key: string;
+  label: string;
+  imageUrl: string;
+  imageAlt: string;
+  href: string;
+  count: number;
+}
+
+export function CategoryTiles({ products }: { products: Product[] }) {
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+
+  const tiles: Tile[] = [];
+
+  // Prefer real category data when the catalog has it.
+  const byCategory = new Map<string, { name: string; slug: string | null; items: Product[] }>();
+  for (const p of products) {
+    for (const cat of p.categories ?? []) {
+      const entry = byCategory.get(cat.id) ?? { name: cat.name, slug: cat.slug ?? null, items: [] };
+      entry.items.push(p);
+      byCategory.set(cat.id, entry);
+    }
+  }
+
+  // Tile photo: prefer the LAST matching product's image — the featured grid
+  // above leads with the first ones, so tiles avoid repeating the same shots.
+  const pickImage = (items: Product[]) =>
+    [...items].reverse().find((p) => p.images?.[0]?.url)?.images?.[0];
+
+  if (byCategory.size >= 2) {
+    for (const [id, { name, slug, items }] of Array.from(byCategory.entries()).slice(0, 4)) {
+      const img = pickImage(items);
+      if (!img?.url) continue;
+      // Prefer the real category landing page (SEO-indexed, has its own
+      // written description) — this is the only place in the storefront that
+      // links to it, so without a real slug it'd be an orphaned page. Fall
+      // back to the filtered grid for categories with no slug yet.
+      tiles.push({
+        key: id,
+        label: name,
+        imageUrl: img.url,
+        imageAlt: img.alt || name,
+        href: slug
+          ? `/category/${encodeURIComponent(slug)}`
+          : `/products?category=${encodeURIComponent(id)}`,
+        count: items.length,
+      });
+    }
+  } else {
+    // Derive from name prefixes — never hardcodes products, only groups them.
+    for (const group of PREFIX_GROUPS) {
+      const items = products.filter((p) =>
+        group.prefixes.some((prefix) => p.name?.toLowerCase().startsWith(prefix))
+      );
+      const img = pickImage(items);
+      if (!img?.url) continue;
+      tiles.push({
+        key: group.labelKey,
+        label: t(group.labelKey),
+        imageUrl: img.url,
+        imageAlt: img.alt || t(group.labelKey),
+        href: `/products?search=${encodeURIComponent(group.prefixes[0])}`,
+        count: items.length,
+      });
+    }
+  }
+
+  if (tiles.length === 0) return null;
+
+  return (
+    <section id="categories" className="section-pad wash-sand relative overflow-hidden">
+      <div aria-hidden="true" className="glow-blob -start-24 top-1/3 h-72 w-72 opacity-70" />
+      <div className="container-page relative">
+        <div className="mb-8 max-w-xl lg:mb-10">
+          <span className="eyebrow">{t('categoriesEyebrow')}</span>
+          <h2 className="text-4xl sm:text-5xl">{t('categoriesTitle')}</h2>
+          <p className="text-muted-foreground mt-3">{t('categoriesSubtitle')}</p>
+        </div>
+
+        <ul
+          className={`grid grid-cols-2 gap-3 sm:gap-5 lg:gap-6 ${
+            tiles.length === 3 ? 'lg:grid-cols-3' : 'lg:grid-cols-4'
+          }`}
+        >
+          {tiles.map((tile, idx) => (
+            <li
+              key={tile.key}
+              className={
+                // Odd tile count: let the last tile span the full row on
+                // mobile so the 2-col grid never shows an orphan hole.
+                tiles.length % 2 === 1 && idx === tiles.length - 1
+                  ? 'col-span-2 lg:col-span-1'
+                  : undefined
+              }
+            >
+              <Link href={tile.href} className="card card-hover group block overflow-hidden">
+                <span className="bg-secondary relative block aspect-square overflow-hidden">
+                  <Image
+                    src={tile.imageUrl}
+                    alt={tile.imageAlt}
+                    fill
+                    sizes="(max-width: 640px) 50vw, 25vw"
+                    className="img-zoom object-cover"
+                  />
+                </span>
+                <span className="flex items-center justify-between gap-2 px-4 py-3.5">
+                  <span>
+                    <span className="text-foreground block text-[15px] font-semibold">
+                      {tile.label}
+                    </span>
+                    <span className="text-muted-foreground block text-xs">
+                      {tile.count} {tile.count === 1 ? tc('product') : tc('products')}
+                    </span>
+                  </span>
+                  <span
+                    aria-hidden="true"
+                    className="bg-secondary text-foreground group-hover:bg-primary group-hover:text-primary-foreground flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition-colors"
+                  >
+                    <IconArrowEnd size={16} className="rtl-flip" />
+                  </span>
+                </span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}

package/templates/nextjs/designs/atelier/ui/home/discount-banner-strip.tsx

@@ -1,27 +1,27 @@
-'use client';
-
-import type { DiscountBanner } from 'brainerce';
-import { IconTag } from '@/ui/shared/icons';
-
-/** Store-wide discount banner strip shown at the very top of the homepage. */
-export function DiscountBannerStrip({ banners }: { banners: DiscountBanner[] }) {
-  if (banners.length === 0) return null;
-
-  return (
-    <div role="region" aria-label="Promotions" className="border-b bg-secondary">
-      <ul className="container-page flex flex-wrap items-center justify-center gap-x-8 gap-y-1 py-2.5">
-        {banners.map((banner) => (
-          <li
-            key={banner.ruleId}
-            className="inline-flex items-center gap-2 text-[13px] font-semibold text-foreground"
-          >
-            <span aria-hidden="true" className="text-primary">
-              <IconTag size={16} />
-            </span>
-            {banner.text}
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
+'use client';
+
+import type { DiscountBanner } from 'brainerce';
+import { IconTag } from '@/ui/shared/icons';
+
+/** Store-wide discount banner strip shown at the very top of the homepage. */
+export function DiscountBannerStrip({ banners }: { banners: DiscountBanner[] }) {
+  if (banners.length === 0) return null;
+
+  return (
+    <div role="region" aria-label="Promotions" className="border-b bg-secondary">
+      <ul className="container-page flex flex-wrap items-center justify-center gap-x-8 gap-y-1 py-2.5">
+        {banners.map((banner) => (
+          <li
+            key={banner.ruleId}
+            className="inline-flex items-center gap-2 text-[13px] font-semibold whitespace-pre-line text-foreground"
+          >
+            <span aria-hidden="true" className="text-primary">
+              <IconTag size={16} />
+            </span>
+            {banner.text}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/templates/nextjs/designs/atelier/ui/home/editorial-band.tsx

@@ -1,75 +1,75 @@
-'use client';
-
-/**
- * Editorial "our story" band — lifestyle photography (Pexels hotlinks,
- * HEAD-verified) + brand-story copy from translation keys. Purely template
- * marketing content; no catalog data is hardcoded here. Deliberately
- * vertical-neutral (order fulfillment / packaging imagery, not a specific
- * product category) since this pack scaffolds stores of any kind.
- */
-import { Link } from '@/core/lib/navigation';
-import { useTranslations } from '@/core/lib/translations';
-import { IconArrowEnd } from '@/ui/shared/icons';
-
-// Verified free-stock imagery (images.pexels.com allows hotlinking).
-const IMG_MODEL =
-  'https://images.pexels.com/photos/7857523/pexels-photo-7857523.jpeg?auto=compress&cs=tinysrgb&w=1200';
-const IMG_DETAIL =
-  'https://images.pexels.com/photos/6224252/pexels-photo-6224252.jpeg?auto=compress&cs=tinysrgb&w=800';
-
-export function EditorialBand() {
-  const t = useTranslations('home');
-
-  return (
-    <section className="section-pad">
-      <div className="container-page grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
-        {/* Image pair */}
-        <div className="grid grid-cols-12 gap-4">
-          <figure className="border-background col-span-8 -rotate-2 overflow-hidden rounded-3xl border-4 shadow-[0_28px_60px_-24px_hsl(var(--primary)/0.35)]">
-            {}
-            <img
-              src={IMG_MODEL}
-              alt={t('storyTitle')}
-              loading="lazy"
-              className="aspect-[4/5] h-full w-full object-cover"
-            />
-          </figure>
-          <figure className="border-background col-span-4 -mb-8 rotate-3 self-end overflow-hidden rounded-3xl border-4 shadow-[0_24px_50px_-20px_hsl(var(--primary)/0.35)]">
-            {}
-            <img
-              src={IMG_DETAIL}
-              alt={t('storyStat1Value')}
-              loading="lazy"
-              className="aspect-[3/4] h-full w-full object-cover"
-            />
-          </figure>
-        </div>
-
-        {/* Copy */}
-        <div className="max-w-xl">
-          <span className="eyebrow">{t('storyEyebrow')}</span>
-          <h2 className="text-4xl sm:text-5xl">{t('storyTitle')}</h2>
-          <p className="text-muted-foreground mt-5 leading-8">{t('storyP1')}</p>
-          <p className="text-muted-foreground mt-4 leading-8">{t('storyP2')}</p>
-
-          {/* Craft highlights */}
-          <dl className="mt-8 grid grid-cols-2 gap-6 border-t pt-8">
-            <div>
-              <dt className="font-display text-foreground text-2xl">{t('storyStat1Value')}</dt>
-              <dd className="text-muted-foreground mt-1 text-sm">{t('storyStat1Label')}</dd>
-            </div>
-            <div>
-              <dt className="font-display text-foreground text-2xl">{t('storyStat2Value')}</dt>
-              <dd className="text-muted-foreground mt-1 text-sm">{t('storyStat2Label')}</dd>
-            </div>
-          </dl>
-
-          <Link href="/products" className="btn-outline btn-md mt-8">
-            {t('storyCta')}
-            <IconArrowEnd size={18} className="rtl-flip" />
-          </Link>
-        </div>
-      </div>
-    </section>
-  );
-}
+'use client';
+
+/**
+ * Editorial "our story" band — lifestyle photography (Pexels hotlinks,
+ * HEAD-verified) + brand-story copy from translation keys. Purely template
+ * marketing content; no catalog data is hardcoded here. Deliberately
+ * vertical-neutral (order fulfillment / packaging imagery, not a specific
+ * product category) since this pack scaffolds stores of any kind.
+ */
+import { Link } from '@/core/lib/navigation';
+import { useTranslations } from '@/core/lib/translations';
+import { IconArrowEnd } from '@/ui/shared/icons';
+
+// Verified free-stock imagery (images.pexels.com allows hotlinking).
+const IMG_MODEL =
+  'https://images.pexels.com/photos/7857523/pexels-photo-7857523.jpeg?auto=compress&cs=tinysrgb&w=1200';
+const IMG_DETAIL =
+  'https://images.pexels.com/photos/6224252/pexels-photo-6224252.jpeg?auto=compress&cs=tinysrgb&w=800';
+
+export function EditorialBand() {
+  const t = useTranslations('home');
+
+  return (
+    <section className="section-pad">
+      <div className="container-page grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
+        {/* Image pair */}
+        <div className="grid grid-cols-12 gap-4">
+          <figure className="border-background col-span-8 -rotate-2 overflow-hidden rounded-3xl border-4 shadow-[0_28px_60px_-24px_hsl(var(--primary)/0.35)]">
+            {}
+            <img
+              src={IMG_MODEL}
+              alt={t('storyTitle')}
+              loading="lazy"
+              className="aspect-[4/5] h-full w-full object-cover"
+            />
+          </figure>
+          <figure className="border-background col-span-4 -mb-8 rotate-3 self-end overflow-hidden rounded-3xl border-4 shadow-[0_24px_50px_-20px_hsl(var(--primary)/0.35)]">
+            {}
+            <img
+              src={IMG_DETAIL}
+              alt={t('storyStat1Value')}
+              loading="lazy"
+              className="aspect-[3/4] h-full w-full object-cover"
+            />
+          </figure>
+        </div>
+
+        {/* Copy */}
+        <div className="max-w-xl">
+          <span className="eyebrow">{t('storyEyebrow')}</span>
+          <h2 className="text-4xl sm:text-5xl">{t('storyTitle')}</h2>
+          <p className="text-muted-foreground mt-5 leading-8">{t('storyP1')}</p>
+          <p className="text-muted-foreground mt-4 leading-8">{t('storyP2')}</p>
+
+          {/* Craft highlights */}
+          <dl className="mt-8 grid grid-cols-2 gap-6 border-t pt-8">
+            <div>
+              <dt className="font-display text-foreground text-2xl">{t('storyStat1Value')}</dt>
+              <dd className="text-muted-foreground mt-1 text-sm">{t('storyStat1Label')}</dd>
+            </div>
+            <div>
+              <dt className="font-display text-foreground text-2xl">{t('storyStat2Value')}</dt>
+              <dd className="text-muted-foreground mt-1 text-sm">{t('storyStat2Label')}</dd>
+            </div>
+          </dl>
+
+          <Link href="/products" className="btn-outline btn-md mt-8">
+            {t('storyCta')}
+            <IconArrowEnd size={18} className="rtl-flip" />
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/nextjs/designs/atelier/ui/home/featured-products-section.tsx

@@ -1,36 +1,36 @@
-'use client';
-
-import type { Product } from 'brainerce';
-import { Link } from '@/core/lib/navigation';
-import { useTranslations } from '@/core/lib/translations';
-import { ProductGrid } from '@/ui/product/product-grid';
-import { IconArrowEnd } from '@/ui/shared/icons';
-
-/** Homepage featured-products grid with a section header + view-all link. */
-export function FeaturedProductsSection({ products }: { products: Product[] }) {
-  const t = useTranslations('home');
-  const tc = useTranslations('common');
-
-  return (
-    <section className="section-pad">
-      <div className="container-page">
-        <div className="mb-8 flex flex-wrap items-end justify-between gap-4 lg:mb-10">
-          <div className="max-w-xl">
-            <span className="eyebrow">{t('featuredEyebrow')}</span>
-            <h2 className="text-4xl sm:text-5xl">{t('featuredProducts')}</h2>
-            <p className="mt-3 text-muted-foreground">{t('featuredSubtitle')}</p>
-          </div>
-          <Link
-            href="/products"
-            className="group inline-flex items-center gap-1.5 text-sm font-semibold text-primary hover:underline"
-          >
-            {tc('viewAll')}
-            <IconArrowEnd size={16} className="rtl-flip" />
-          </Link>
-        </div>
-
-        <ProductGrid products={products.slice(0, 8)} />
-      </div>
-    </section>
-  );
-}
+'use client';
+
+import type { Product } from 'brainerce';
+import { Link } from '@/core/lib/navigation';
+import { useTranslations } from '@/core/lib/translations';
+import { ProductGrid } from '@/ui/product/product-grid';
+import { IconArrowEnd } from '@/ui/shared/icons';
+
+/** Homepage featured-products grid with a section header + view-all link. */
+export function FeaturedProductsSection({ products }: { products: Product[] }) {
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+
+  return (
+    <section className="section-pad">
+      <div className="container-page">
+        <div className="mb-8 flex flex-wrap items-end justify-between gap-4 lg:mb-10">
+          <div className="max-w-xl">
+            <span className="eyebrow">{t('featuredEyebrow')}</span>
+            <h2 className="text-4xl sm:text-5xl">{t('featuredProducts')}</h2>
+            <p className="mt-3 text-muted-foreground">{t('featuredSubtitle')}</p>
+          </div>
+          <Link
+            href="/products"
+            className="group inline-flex items-center gap-1.5 text-sm font-semibold text-primary hover:underline"
+          >
+            {tc('viewAll')}
+            <IconArrowEnd size={16} className="rtl-flip" />
+          </Link>
+        </div>
+
+        <ProductGrid products={products.slice(0, 8)} />
+      </div>
+    </section>
+  );
+}