create-brainerce-store 1.84.0 → 1.86.0

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

@@ -1,151 +1,178 @@
-'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.
+ *
+ * Real categories from the API are the only grouping. There is deliberately
+ * no name-prefix or keyword heuristic here: a guessed grouping matches one
+ * vertical and silently matches nothing on every other, so the section would
+ * vanish and look like a design choice.
+ *
+ * Three states, decided by the CATALOG, never by whether a photo exists:
+ *   - 2+ categories      → up to four category tiles
+ *   - 1 category         → that tile plus an "all products" tile, so the
+ *                          grid never shows a lone card
+ *   - no categories yet  → one wide "all products" tile
+ * A tile without a photo renders the typographic wash tile instead of being
+ * skipped, so a catalog seeded with names and prices only still gets the
+ * section. The section always carries `id="categories"`, which the hero's
+ * secondary CTA anchors to; it renders nothing only when the catalog is empty
+ * (the hero then points that CTA at /products instead).
+ */
+import type { Product } from 'brainerce';
+import { Link } from '@/core/lib/navigation';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import { NoPhotoTile } from '@/ui/shared/no-photo-tile';
+import { useTranslations } from '@/core/lib/translations';
+import { IconArrowEnd } from '@/ui/shared/icons';
+
+interface Tile {
+  key: string;
+  label: string;
+  image: { url: string; alt: string } | null;
+  href: string;
+  /** Sub-line: a product count for a category, a "view all" for the catalog. */
+  meta: string;
+}
+
+const MAX_TILES = 4;
+
+export function CategoryTiles({ products }: { products: Product[] }) {
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+  const tp = useTranslations('products');
+
+  if (products.length === 0) return null;
+
+  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];
+
+  const tiles: Tile[] = [];
+  for (const [id, { name, slug, items }] of Array.from(byCategory.entries()).slice(0, MAX_TILES)) {
+    const img = pickImage(items);
+    // 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,
+      image: img?.url ? { url: img.url, alt: img.alt || name } : null,
+      href: slug
+        ? `/category/${encodeURIComponent(slug)}`
+        : `/products?category=${encodeURIComponent(id)}`,
+      meta: `${items.length} ${items.length === 1 ? tc('product') : tc('products')}`,
+    });
+  }
+
+  // Floor: never a lone tile, never an empty section over a live catalog.
+  // No count here — the home page only loads the newest few products, so a
+  // number would understate the store.
+  const wideAllTile = tiles.length === 0;
+  if (tiles.length < 2) {
+    const label = tp('allProducts');
+    const img = pickImage(products);
+    tiles.push({
+      key: 'all-products',
+      label,
+      image: img?.url ? { url: img.url, alt: img.alt || label } : null,
+      href: '/products',
+      meta: tc('viewAll'),
+    });
+  }
+
+  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) => {
+            const wide = wideAllTile && idx === 0;
+            return (
+              <li
+                key={tile.key}
+                className={
+                  wide
+                    ? 'col-span-2 lg:col-span-4'
+                    : // 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 overflow-hidden ${
+                    wide ? 'grid sm:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]' : 'block'
+                  }`}
+                >
+                  <span
+                    className={`bg-secondary relative block overflow-hidden ${
+                      wide ? 'aspect-[16/9] sm:aspect-auto sm:min-h-[14rem]' : 'aspect-square'
+                    }`}
+                  >
+                    {tile.image ? (
+                      <Image
+                        src={tile.image.url}
+                        alt={tile.image.alt}
+                        fill
+                        sizes={wide ? '(max-width: 640px) 100vw, 40vw' : '(max-width: 640px) 50vw, 25vw'}
+                        className="img-zoom object-cover"
+                      />
+                    ) : (
+                      <NoPhotoTile name={tile.label} size={wide ? 'lg' : 'md'} />
+                    )}
+                  </span>
+                  <span
+                    className={`flex items-center justify-between gap-2 px-4 py-3.5 ${
+                      wide ? 'sm:px-8 sm:py-8' : ''
+                    }`}
+                  >
+                    <span className="min-w-0">
+                      <span
+                        className={`text-foreground block font-semibold ${
+                          wide ? 'font-display text-2xl sm:text-3xl' : 'text-[15px]'
+                        }`}
+                      >
+                        {tile.label}
+                      </span>
+                      <span className="text-muted-foreground block text-xs">{tile.meta}</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/hero-section.tsx

@@ -7,13 +7,26 @@ import { useTranslations } from '@/core/lib/translations';
 import { PriceDisplay } from '@/ui/product/price-display';
 import { pickDisplayPrice } from '@/core/lib/display-price';
 import { useCurrency } from '@/core/lib/use-currency';
-import { IconArrowEnd, IconStar, IconSparkle } from '@/ui/shared/icons';
+import { NoPhotoTile } from '@/ui/shared/no-photo-tile';
+import { IconArrowEnd, IconShield, IconSparkle } from '@/ui/shared/icons';
 
 /**
  * Homepage hero — grid-breaking composition: oversized serif headline over a
  * soft forest/sand radial wash, live-catalog photography as overlapping,
  * slightly rotated floating cards with a glassy price chip. All imagery comes
  * from useHomeData() in the parent; motion is reduced-motion guarded.
+ *
+ * Three collage states, decided by the CATALOG, not by the first photo:
+ *   (a) products with a photo   → floating photo cards (the designed look)
+ *   (b) products, no photo yet  → the same cards on a wash, name + price on
+ *                                 the chip, still linking to the product. A
+ *                                 store seeded with names and prices only
+ *                                 is the normal first state of every new
+ *                                 store, so it must look intentional.
+ *   (c) no products at all      → decorative composition with the
+ *                                 "your first products appear here" hint.
+ * The old check keyed on `!heroImage`, which showed the "empty catalog"
+ * hint over a catalog that was merely photo-less.
  */
 export function HeroSection({
   storeName,
@@ -29,6 +42,7 @@ export function HeroSection({
   const sideProduct = products[1];
   const heroImage = heroProduct?.images?.[0]?.url;
   const sideImage = sideProduct?.images?.[0]?.url;
+  const hasProducts = Boolean(heroProduct);
 
   return (
     <section className="wash-hero relative overflow-hidden">
@@ -52,24 +66,32 @@ export function HeroSection({
               {tc('shopNow')}
               <IconArrowEnd size={20} className="rtl-flip" />
             </Link>
-            <a href="#categories" className="btn-outline btn-lg bg-background/60 backdrop-blur-sm">
-              {t('heroCtaSecondary')}
-            </a>
+            {/* `#categories` is owned by <CategoryTiles>, which renders for any
+                non-empty catalog. With no products there is no section, so
+                the anchor would be dead and the CTA is dropped ("Shop now"
+                already leads to the listing). */}
+            {hasProducts && (
+              <a href="#categories" className="btn-outline btn-lg bg-background/60 backdrop-blur-sm">
+                {t('heroCtaSecondary')}
+              </a>
+            )}
           </div>
 
-          {/* Soft social proof */}
+          {/* Factual trust line. Never a star row here: stars are a rating,
+              and a rating nobody gave is a fabricated review. Real ratings
+              render only from `avgRating` / `reviewCount` (product cards,
+              the rated band). */}
           <p className="mt-9 inline-flex items-center gap-2 text-sm text-muted-foreground">
             <span className="inline-flex text-primary" aria-hidden="true">
-              {[1, 2, 3, 4, 5].map((n) => (
-                <IconStar key={n} size={16} filled />
-              ))}
+              <IconShield size={18} />
             </span>
             {t('heroTrust')}
           </p>
         </div>
 
-        {/* Overlapping floating collage — real catalog photography */}
-        {heroImage && (
+        {/* Overlapping floating collage — states (a) and (b): real products,
+            photographed or not. */}
+        {hasProducts && (
           <div className="reveal reveal-delay-1 relative mx-auto h-[26rem] w-full max-w-md sm:h-[30rem] lg:col-span-6 lg:h-[34rem] lg:max-w-none">
             {/* Main card — tilted, floating */}
             <Link
@@ -77,14 +99,18 @@ export function HeroSection({
               className="group float-slow absolute inset-y-0 start-[4%] block w-[72%] -rotate-2 overflow-hidden rounded-3xl border-4 border-background shadow-[0_36px_80px_-30px_hsl(var(--primary)/0.45)]"
               style={{ '--float-rotate': '-2deg' } as React.CSSProperties}
             >
-              <Image
-                src={heroImage}
-                alt={heroProduct.images?.[0]?.alt || heroProduct.name}
-                fill
-                priority
-                sizes="(max-width: 1024px) 80vw, 36vw"
-                className="img-zoom object-cover"
-              />
+              {heroImage ? (
+                <Image
+                  src={heroImage}
+                  alt={heroProduct.images?.[0]?.alt || heroProduct.name}
+                  fill
+                  priority
+                  sizes="(max-width: 1024px) 80vw, 36vw"
+                  className="img-zoom object-cover"
+                />
+              ) : (
+                <NoPhotoTile name={heroProduct.name} tone="forest" size="lg" />
+              )}
               {/* Glassy shop-this chip */}
               <span className="glass absolute bottom-5 end-5 start-5 flex items-center justify-between gap-3 px-4 py-3 sm:end-auto sm:min-w-[15rem]">
                 <span className="min-w-0">
@@ -103,19 +129,23 @@ export function HeroSection({
             </Link>
 
             {/* Secondary card — overlaps the main one, counter-tilted */}
-            {sideImage && (
+            {sideProduct && (
               <Link
                 href={`/products/${sideProduct.slug || sideProduct.id}`}
                 className="group float-slower absolute -end-2 top-[54%] block aspect-[3/4] w-[38%] rotate-3 overflow-hidden rounded-3xl border-4 border-background shadow-[0_28px_60px_-24px_hsl(var(--primary)/0.4)] sm:end-0"
                 style={{ '--float-rotate': '3deg' } as React.CSSProperties}
               >
-                <Image
-                  src={sideImage}
-                  alt={sideProduct.images?.[0]?.alt || sideProduct.name}
-                  fill
-                  sizes="(max-width: 1024px) 40vw, 16vw"
-                  className="img-zoom object-cover"
-                />
+                {sideImage ? (
+                  <Image
+                    src={sideImage}
+                    alt={sideProduct.images?.[0]?.alt || sideProduct.name}
+                    fill
+                    sizes="(max-width: 1024px) 40vw, 16vw"
+                    className="img-zoom object-cover"
+                  />
+                ) : (
+                  <NoPhotoTile name={sideProduct.name} showName />
+                )}
                 <span className="sr-only">{sideProduct.name}</span>
               </Link>
             )}
@@ -132,10 +162,10 @@ export function HeroSection({
           </div>
         )}
 
-        {/* Empty catalog — the same floating composition as designed washes,
-            so a brand-new store still opens rich instead of half-blank. The
-            first two published products replace these automatically. */}
-        {!heroImage && (
+        {/* State (c): no products at all — the same floating composition as
+            designed washes, so a brand-new store still opens rich instead of
+            half-blank. The first two published products replace these. */}
+        {!hasProducts && (
           <div
             aria-hidden="true"
             className="reveal reveal-delay-1 relative mx-auto h-[26rem] w-full max-w-md sm:h-[30rem] lg:col-span-6 lg:h-[34rem] lg:max-w-none"
@@ -153,7 +183,7 @@ export function HeroSection({
               className="float-slower wash-sand absolute -end-2 top-[54%] flex aspect-[3/4] w-[38%] rotate-3 items-center justify-center rounded-3xl border-4 border-background shadow-[0_28px_60px_-24px_hsl(var(--primary)/0.4)] sm:end-0"
               style={{ '--float-rotate': '3deg' } as React.CSSProperties}
             >
-              <IconStar size={32} filled className="text-primary/20" />
+              <IconSparkle size={32} className="text-primary/25" />
             </div>
           </div>
         )}

package/templates/nextjs/designs/atelier/ui/layout/header-search.tsx

@@ -220,7 +220,7 @@ export function HeaderSearch({ className }: HeaderSearchProps) {
                   {index === 0 && productCount > 0 && (
                     <li
                       role="presentation"
-                      className="text-muted-foreground px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide"
+                      className="text-muted-foreground px-3 pb-1 pt-2 text-[11px] font-semibold ltr:uppercase ltr:tracking-wide"
                     >
                       {tp('pageTitle')}
                     </li>
@@ -228,7 +228,7 @@ export function HeaderSearch({ className }: HeaderSearchProps) {
                   {index === productCount && option.kind === 'category' && (
                     <li
                       role="presentation"
-                      className="text-muted-foreground px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide"
+                      className="text-muted-foreground px-3 pb-1 pt-2 text-[11px] font-semibold ltr:uppercase ltr:tracking-wide"
                     >
                       {t('categories')}
                     </li>