create-brainerce-store 1.53.0 → 1.55.0

package/templates/nextjs/base/src/components/seo/article-json-ld.tsx

@@ -0,0 +1,59 @@
+import type { BlogPost } from 'brainerce';
+import { buildArticleJsonLd, buildBreadcrumbJsonLd } from 'brainerce';
+import { getNonce } from '@/core/lib/nonce';
+
+interface ArticleJsonLdProps {
+  post: BlogPost;
+  url: string;
+  /** Store display name — feeds Article.publisher (and the author fallback). */
+  organizationName?: string;
+}
+
+/**
+ * Article + BreadcrumbList structured data for a blog post page.
+ *
+ * Uses the SDK builders for the schema shape, but renders the <script> here so
+ * we can attach the CSP nonce (the SDK's jsonLdScriptProps can't).
+ */
+export async function ArticleJsonLd({ post, url, organizationName }: ArticleJsonLdProps) {
+  const nonce = await getNonce();
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+
+  const articleJsonLd = buildArticleJsonLd(post, {
+    siteUrl: baseUrl,
+    path: url,
+    organizationName,
+  });
+
+  const breadcrumbJsonLd = buildBreadcrumbJsonLd([
+    { name: 'Home', url: baseUrl || '/' },
+    { name: 'Blog', url: `${baseUrl}/blog` },
+    { name: post.title, url },
+  ]);
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(articleJsonLd) }}
+      />
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd) }}
+      />
+    </>
+  );
+}
+
+// Escape `<`, `>`, `&` so AI-generated article copy can't break out of the
+// <script> element or inject HTML.
+function serializeJsonLd(value: unknown): string {
+  return JSON.stringify(value)
+    .replace(/</g, '\\u003c')
+    .replace(/>/g, '\\u003e')
+    .replace(/&/g, '\\u0026');
+}

package/templates/nextjs/base/src/components/seo/breadcrumbs.tsx

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+
+interface Crumb {
+  name: string;
+  /** Site-relative path, e.g. "/category/shoes". Omit on the current (last) crumb. */
+  href?: string;
+}
+
+/**
+ * Visible breadcrumb trail. Renders the exact same path structured data
+ * already declares (see category-json-ld.tsx / product-json-ld.tsx) as real
+ * `<Link>`s — search engines weight on-page navigation links much more than
+ * sitemap-only or script-only (JSON-LD) mentions of a URL.
+ */
+export function Breadcrumbs({ items }: { items: Crumb[] }) {
+  if (items.length < 2) return null;
+  return (
+    <nav aria-label="Breadcrumb" className="text-muted-foreground mb-4 text-sm">
+      <ol className="flex flex-wrap items-center gap-1.5">
+        {items.map((item, idx) => (
+          <li key={`${item.name}-${idx}`} className="flex items-center gap-1.5">
+            {idx > 0 && <span aria-hidden="true">/</span>}
+            {item.href ? (
+              <Link href={item.href} className="hover:text-foreground transition-colors">
+                {item.name}
+              </Link>
+            ) : (
+              <span aria-current="page" className="text-foreground">
+                {item.name}
+              </span>
+            )}
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}

package/templates/nextjs/base/src/components/seo/category-json-ld.tsx

@@ -0,0 +1,61 @@
+import type { CategoryDetail } from 'brainerce';
+import { buildCollectionPageJsonLd, buildBreadcrumbJsonLd } from 'brainerce';
+import { getNonce } from '@/core/lib/nonce';
+
+interface CategoryJsonLdProps {
+  category: CategoryDetail;
+  url: string;
+}
+
+/**
+ * CollectionPage + BreadcrumbList structured data for a category (collection)
+ * landing page. NEVER emit Product markup on a listing page — Google's Product
+ * rich results are single-product only (see ProductJsonLd for PDPs).
+ *
+ * Uses the SDK builders for the schema shape, but renders the <script> here so
+ * we can attach the CSP nonce (the SDK's jsonLdScriptProps can't).
+ */
+export async function CategoryJsonLd({ category, url }: CategoryJsonLdProps) {
+  const nonce = await getNonce();
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+
+  const collectionJsonLd = buildCollectionPageJsonLd(category, { siteUrl: baseUrl, path: url });
+
+  // Breadcrumb: Home → ancestor categories → this category.
+  const crumbs: Array<{ name: string; url: string }> = [
+    { name: 'Home', url: baseUrl || '/' },
+  ];
+  for (const ancestor of category.breadcrumb) {
+    if (ancestor.slug) {
+      crumbs.push({ name: ancestor.name, url: `${baseUrl}/category/${ancestor.slug}` });
+    }
+  }
+  crumbs.push({ name: category.name, url });
+  const breadcrumbJsonLd = buildBreadcrumbJsonLd(crumbs);
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(collectionJsonLd) }}
+      />
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd) }}
+      />
+    </>
+  );
+}
+
+// Escape `<`, `>`, `&` so merchant-authored category copy can't break out of
+// the <script> element or inject HTML.
+function serializeJsonLd(value: unknown): string {
+  return JSON.stringify(value)
+    .replace(/</g, '\\u003c')
+    .replace(/>/g, '\\u003e')
+    .replace(/&/g, '\\u0026');
+}

package/templates/nextjs/base/src/components/seo/organization-json-ld.tsx

@@ -58,8 +58,11 @@ export async function OrganizationJsonLd({ storeInfo, baseUrl }: OrganizationJso
     potentialAction: {
       '@type': 'SearchAction',
       target: {
+        // Must match the storefront's real search param — the product listing
+        // reads `?search=` (see use-product-listing.ts), not `?q=`. A wrong
+        // param makes the sitelinks search box land on an empty listing.
         '@type': 'EntryPoint',
-        urlTemplate: `${baseUrl}/products?q={search_term_string}`,
+        urlTemplate: `${baseUrl}/products?search={search_term_string}`,
       },
       'query-input': 'required name=search_term_string',
     },

package/templates/nextjs/base/src/components/seo/product-json-ld.tsx

@@ -1,4 +1,4 @@
-import type { Product } from 'brainerce';
+import type { Product, ShippingSummaryEntry } from 'brainerce';
 import { getProductPriceInfo } from 'brainerce';
 import { getNonce } from '@/core/lib/nonce';
 import { resolveCurrency } from '@/core/lib/resolve-currency';
@@ -8,9 +8,11 @@ interface ProductJsonLdProps {
   product: Product;
   url: string;
   currency?: string;
+  /** From `storeInfo.shipping` — real flat-rate/free zones only. Omitted entirely when unset, never fabricated. */
+  shipping?: ShippingSummaryEntry[];
 }
 
-export async function ProductJsonLd({ product, url, currency }: ProductJsonLdProps) {
+export async function ProductJsonLd({ product, url, currency, shipping }: ProductJsonLdProps) {
   // Defer to the shared server helper so the env-var + USD fallback chain
   // lives in exactly one place across all server-side currency reads.
   const resolvedCurrency = resolveCurrency(null, currency);
@@ -24,6 +26,44 @@ export async function ProductJsonLd({ product, url, currency }: ProductJsonLdPro
       ? 'https://schema.org/InStock'
       : 'https://schema.org/OutOfStock';
 
+  // All Brainerce catalog listings are first-party new-goods sales — no
+  // used/refurbished condition data exists anywhere in the product model, so
+  // this is a deliberate always-true assumption, not a per-product field.
+  const itemCondition = 'https://schema.org/NewCondition';
+
+  const shippingDetails = (shipping ?? [])
+    .filter((z) => z.amount !== null)
+    .map((z) => ({
+      '@type': 'OfferShippingDetails',
+      shippingRate: { '@type': 'MonetaryAmount', value: z.amount, currency: resolvedCurrency },
+      shippingDestination: { '@type': 'DefinedRegion', addressCountry: z.countries },
+      ...(z.handlingTime != null || z.minDeliveryDays != null || z.maxDeliveryDays != null
+        ? {
+            deliveryTime: {
+              '@type': 'ShippingDeliveryTime',
+              ...(z.handlingTime != null
+                ? {
+                    handlingTime: {
+                      '@type': 'QuantitativeValue',
+                      minValue: 0,
+                      maxValue: z.handlingTime,
+                    },
+                  }
+                : {}),
+              ...(z.minDeliveryDays != null || z.maxDeliveryDays != null
+                ? {
+                    transitTime: {
+                      '@type': 'QuantitativeValue',
+                      minValue: z.minDeliveryDays ?? z.maxDeliveryDays,
+                      maxValue: z.maxDeliveryDays ?? z.minDeliveryDays,
+                    },
+                  }
+                : {}),
+            },
+          }
+        : {}),
+    }));
+
   const isVariable = product.type === 'VARIABLE';
   const offers =
     isVariable && product.priceMin
@@ -34,6 +74,8 @@ export async function ProductJsonLd({ product, url, currency }: ProductJsonLdPro
           offerCount: product.variants?.length ?? 1,
           priceCurrency: resolvedCurrency,
           availability,
+          itemCondition,
+          ...(shippingDetails.length > 0 ? { shippingDetails } : {}),
           url,
         }
       : {
@@ -41,6 +83,11 @@ export async function ProductJsonLd({ product, url, currency }: ProductJsonLdPro
           price: priceInfo.price,
           priceCurrency: resolvedCurrency,
           availability,
+          itemCondition,
+          ...(product.salePrice && product.salePriceEndsAt
+            ? { priceValidUntil: product.salePriceEndsAt }
+            : {}),
+          ...(shippingDetails.length > 0 ? { shippingDetails } : {}),
           url,
         };
 
@@ -48,6 +95,7 @@ export async function ProductJsonLd({ product, url, currency }: ProductJsonLdPro
   // and AI Overviews ingest this field directly and reject markup. Strip HTML
   // first; if the description is empty after stripping, fall back to the name.
   const cleanDescription = stripHtmlForSeo(product.description) || product.name;
+  const brandName = product.brands?.[0]?.name;
   const productJsonLd: Record<string, unknown> = {
     '@context': 'https://schema.org',
     '@type': 'Product',
@@ -56,6 +104,12 @@ export async function ProductJsonLd({ product, url, currency }: ProductJsonLdPro
     image: imageUrl,
     url,
     sku: product.sku || product.id,
+    // Brand + identifiers qualify the PDP for Google's free merchant listings
+    // (no Merchant Center feed needed). Emitted only when present — Google
+    // penalizes fabricated identifiers.
+    ...(brandName ? { brand: { '@type': 'Brand', name: brandName } } : {}),
+    ...(product.gtin ? { gtin: product.gtin } : {}),
+    ...(product.mpn ? { mpn: product.mpn } : {}),
     offers,
   };
 

package/templates/nextjs/base/src/core/lib/store-info.ts

@@ -23,6 +23,8 @@ export interface PublicStoreInfo {
   requireEmailVerification?: boolean;
   upsell?: StoreInfo['upsell'];
   i18n?: StoreInfo['i18n'];
+  /** Real flat-rate/free shipping zones — feeds Product JSON-LD `shippingDetails`. Public by design (merchants display shipping rates openly). */
+  shipping?: StoreInfo['shipping'];
 }
 
 /**
@@ -44,5 +46,6 @@ export function pickPublicStoreInfo(raw: StoreInfo): PublicStoreInfo {
     requireEmailVerification: raw.requireEmailVerification,
     upsell: raw.upsell,
     i18n: raw.i18n,
+    shipping: raw.shipping,
   };
 }

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

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 /* ---------------------------------------------------------------------------
-   Design system — "Atelier" (premium modern jewelry commerce)
+   Design system — "Atelier" (premium modern handcrafted-goods commerce)
    Palette (5 total): warm white / warm ink / deep forest / warm sand (2 tints)
    + functional destructive. Tokens only — never raw colors in components.
 --------------------------------------------------------------------------- */

package/templates/nextjs/designs/atelier/messages-patch/en.json

@@ -8,8 +8,8 @@
   },
   "home": {
     "heroEyebrow": "New collection · Handcrafted",
-    "heroTitle": "Jewelry that tells your story",
-    "heroLead": "Delicate gold and silver designs, handcrafted with love — made to be with you through the small moments and the big ones.",
+    "heroTitle": "Pieces that tell your story",
+    "heroLead": "Thoughtfully designed, handcrafted with love — made to be with you through the small moments and the big ones.",
     "heroCtaSecondary": "Browse categories",
     "heroTrust": "Happy customers nationwide",
     "benefit1Title": "Fast home delivery",
@@ -17,37 +17,37 @@
     "benefit2Title": "Secure payment",
     "benefit2Desc": "Encrypted checkout, highest standard",
     "benefit3Title": "Quality materials",
-    "benefit3Desc": "Gold, 925 silver and genuine stones",
+    "benefit3Desc": "Carefully sourced, built to last",
     "benefit4Title": "Easy returns",
     "benefit4Desc": "30 days to exchange or return, no questions",
     "featuredEyebrow": "Our picks",
     "featuredSubtitle": "The pieces our customers love most — hand-picked from the new collection.",
     "categoriesEyebrow": "Categories",
     "categoriesTitle": "Find the perfect piece",
-    "categoriesSubtitle": "From delicate rings to statement necklaces — each one speaks its own language.",
+    "categoriesSubtitle": "From everyday favorites to statement pieces — there's something for everyone.",
     "catRings": "Rings",
     "catNecklaces": "Necklaces",
     "catEarrings": "Earrings",
     "catBracelets": "Bracelets",
     "catCta": "Shop the category",
     "storyEyebrow": "Our studio",
-    "storyTitle": "Made by hand, worn by heart",
-    "storyP1": "Every piece begins as a small sketch on paper — and ends as delicate handwork in our studio. We choose every stone and every link with care, so the piece that reaches you is exactly as we imagined it.",
-    "storyP2": "We believe in jewelry that lasts: real materials, meticulous finish and full warranty on every piece. That is what love for the small details looks like.",
+    "storyTitle": "Made with care, made to last",
+    "storyP1": "Every piece begins as a small sketch on paper — and ends as delicate handwork in our studio. We choose every material and every detail with care, so the piece that reaches you is exactly as we imagined it.",
+    "storyP2": "We believe in pieces that last: real materials, meticulous finish and full warranty on every piece. That is what love for the small details looks like.",
     "storyCta": "Discover the collection",
     "storyStat1Value": "Handmade",
     "storyStat1Label": "Every piece is made in our studio",
-    "storyStat2Value": "925 Silver",
-    "storyStat2Label": "Genuine materials only",
+    "storyStat2Value": "Hand-finished",
+    "storyStat2Label": "Every piece checked before it ships",
     "testimonialsEyebrow": "Customer stories",
     "testimonialsTitle": "They already fell in love",
-    "testimonial1Quote": "The necklace arrived in gorgeous packaging and looks even better than the photos. I got compliments on day one.",
+    "testimonial1Quote": "It arrived in gorgeous packaging and looks even better than the photos. I got compliments on day one.",
     "testimonial1Name": "Noa L.",
     "testimonial1Meta": "Tel Aviv",
-    "testimonial2Quote": "I bought earrings as a gift for my mom and she has not taken them off since. Amazing quality and truly personal service.",
+    "testimonial2Quote": "I bought this as a gift for my mom and she has not put it down since. Amazing quality and truly personal service.",
     "testimonial2Name": "Shira B.",
     "testimonial2Meta": "Haifa",
-    "testimonial3Quote": "The ring fits perfectly, the work is delicate and precise. You can feel every detail was made with love. Highly recommend.",
+    "testimonial3Quote": "It's exactly as described, the work is delicate and precise. You can feel every detail was made with love. Highly recommend.",
     "testimonial3Name": "Dana K.",
     "testimonial3Meta": "Jerusalem",
     "newsletterTitle": "Join our club",
@@ -88,7 +88,7 @@
     "shippingAtCheckout": "Shipping calculated at checkout"
   },
   "footer": {
-    "tagline": "Handcrafted jewelry, designed with love in Israel.",
+    "tagline": "{{storeName}} — handcrafted with love in Israel.",
     "followUs": "Follow us",
     "quickLinksTitle": "Quick links",
     "linkProducts": "All products",

package/templates/nextjs/designs/atelier/messages-patch/he.json

@@ -8,8 +8,8 @@
   },
   "home": {
     "heroEyebrow": "קולקציה חדשה · עבודת יד",
-    "heroTitle": "תכשיטים שמספרים את הסיפור שלך",
-    "heroLead": "עיצובים עדינים מזהב ומכסף, בעבודת יד ובאהבה — נוצרו ללוות אתכן ברגעים הקטנים והגדולים.",
+    "heroTitle": "פריטים שמספרים את הסיפור שלך",
+    "heroLead": "עיצובים עדינים, בעבודת יד ובאהבה — נוצרו ללוות אתכן ברגעים הקטנים והגדולים.",
     "heroCtaSecondary": "לצפייה בקטגוריות",
     "heroTrust": "לקוחות מרוצות ברחבי הארץ",
     "benefit1Title": "משלוח מהיר עד הבית",
@@ -17,37 +17,37 @@
     "benefit2Title": "תשלום מאובטח",
     "benefit2Desc": "סליקה מוצפנת בתקן המחמיר ביותר",
     "benefit3Title": "חומרים איכותיים",
-    "benefit3Desc": "זהב, כסף 925 ואבני חן אמיתיות",
+    "benefit3Desc": "נבחרים בקפידה, עמידים לאורך זמן",
     "benefit4Title": "החזרה קלה",
     "benefit4Desc": "30 יום להחלפה או החזרה, בלי שאלות",
     "featuredEyebrow": "הנבחרים שלנו",
     "featuredSubtitle": "הפריטים שהלקוחות שלנו הכי אוהבות — נבחרו בקפידה מהקולקציה החדשה.",
     "categoriesEyebrow": "קטגוריות",
-    "categoriesTitle": "מצאו את התכשיט המושלם",
-    "categoriesSubtitle": "מטבעות עדינות ועד שרשראות בולטות — לכל אחת יש את השפה שלה.",
+    "categoriesTitle": "מצאו את הפריט המושלם",
+    "categoriesSubtitle": "מהפריטים העדינים ועד הבולטים — לכל אחת יש את השפה שלה.",
     "catRings": "טבעות",
     "catNecklaces": "שרשראות",
     "catEarrings": "עגילים",
     "catBracelets": "צמידים",
     "catCta": "לצפייה בקטגוריה",
     "storyEyebrow": "הסטודיו שלנו",
-    "storyTitle": "נוצר ביד, נלבש בלב",
-    "storyP1": "כל תכשיט אצלנו מתחיל בסקיצה קטנה על נייר — ונגמר בעבודת יד עדינה בסטודיו. אנחנו בוחרים כל אבן וכל חוליה בקפידה, כדי שהתכשיט שיגיע אליכן יהיה בדיוק כמו שדמיינו אותו.",
-    "storyP2": "אנחנו מאמינים בתכשיטים שנשארים: חומרים אמיתיים, גימור מוקפד ואחריות מלאה על כל פריט. ככה נראית אהבה לפרטים הקטנים.",
+    "storyTitle": "נוצר ביד, נאהב בלב",
+    "storyP1": "כל פריט אצלנו מתחיל בסקיצה קטנה על נייר — ונגמר בעבודת יד עדינה בסטודיו. אנחנו בוחרים כל חומר וכל פרט בקפידה, כדי שהפריט שיגיע אליכן יהיה בדיוק כמו שדמיינו אותו.",
+    "storyP2": "אנחנו מאמינים בפריטים שנשארים: חומרים אמיתיים, גימור מוקפד ואחריות מלאה על כל פריט. ככה נראית אהבה לפרטים הקטנים.",
     "storyCta": "לגלות את הקולקציה",
     "storyStat1Value": "עבודת יד",
     "storyStat1Label": "כל פריט נוצר בסטודיו שלנו",
-    "storyStat2Value": "כסף 925",
-    "storyStat2Label": "חומרים אמיתיים בלבד",
+    "storyStat2Value": "גימור מוקפד",
+    "storyStat2Label": "כל פריט נבדק לפני המשלוח",
     "testimonialsEyebrow": "לקוחות מספרות",
     "testimonialsTitle": "הן כבר התאהבו",
-    "testimonial1Quote": "השרשרת הגיעה באריזה מהממת ונראית אפילו יותר טוב מבתמונות. קיבלתי מחמאות כבר ביום הראשון.",
+    "testimonial1Quote": "הפריט הגיע באריזה מהממת ונראה אפילו יותר טוב מבתמונות. קיבלתי מחמאות כבר ביום הראשון.",
     "testimonial1Name": "נועה ל.",
     "testimonial1Meta": "תל אביב",
-    "testimonial2Quote": "קניתי עגילים במתנה לאמא שלי והיא לא מורידה אותם מאז. איכות מדהימה ושירות סופר אישי.",
+    "testimonial2Quote": "קניתי מתנה לאמא שלי והיא לא מפסיקה להשתמש בו מאז. איכות מדהימה ושירות סופר אישי.",
     "testimonial2Name": "שירה ב.",
     "testimonial2Meta": "חיפה",
-    "testimonial3Quote": "הטבעת בדיוק במידה, העבודה עדינה ומוקפדת. מרגישים שכל פרט נעשה באהבה. ממליצה בחום.",
+    "testimonial3Quote": "בדיוק כמו שתואר, העבודה עדינה ומוקפדת. מרגישים שכל פרט נעשה באהבה. ממליצה בחום.",
     "testimonial3Name": "דנה כ.",
     "testimonial3Meta": "ירושלים",
     "newsletterTitle": "הצטרפו למועדון שלנו",
@@ -68,7 +68,7 @@
   "productDetail": {
     "quantityLabel": "כמות",
     "shippingNote": "משלוח מהיר עד הבית · החזרה קלה עד 30 יום",
-    "guaranteeNote": "אחריות מלאה על כל תכשיט",
+    "guaranteeNote": "אחריות מלאה על כל פריט",
     "pickOne": "בחרו אחד",
     "upTo": "עד {max}",
     "pickExactly": "בחרו בדיוק {min}",
@@ -88,7 +88,7 @@
     "shippingAtCheckout": "משלוח יחושב בקופה"
   },
   "footer": {
-    "tagline": "תכשיטים בעבודת יד, מעוצבים באהבה בישראל.",
+    "tagline": "{{storeName}} — עבודת יד, מעוצב באהבה בישראל.",
     "followUs": "עקבו אחרינו",
     "quickLinksTitle": "ניווט מהיר",
     "linkProducts": "כל המוצרים",

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

@@ -35,10 +35,10 @@ export function CategoryTiles({ products }: { products: Product[] }) {
   const tiles: Tile[] = [];
 
   // Prefer real category data when the catalog has it.
-  const byCategory = new Map<string, { name: string; items: Product[] }>();
+  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, items: [] };
+      const entry = byCategory.get(cat.id) ?? { name: cat.name, slug: cat.slug ?? null, items: [] };
       entry.items.push(p);
       byCategory.set(cat.id, entry);
     }
@@ -50,15 +50,21 @@ export function CategoryTiles({ products }: { products: Product[] }) {
     [...items].reverse().find((p) => p.images?.[0]?.url)?.images?.[0];
 
   if (byCategory.size >= 2) {
-    for (const [id, { name, items }] of Array.from(byCategory.entries()).slice(0, 4)) {
+    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: `/products?category=${encodeURIComponent(id)}`,
+        href: slug
+          ? `/category/${encodeURIComponent(slug)}`
+          : `/products?category=${encodeURIComponent(id)}`,
         count: items.length,
       });
     }
@@ -90,7 +96,7 @@ export function CategoryTiles({ products }: { products: Product[] }) {
         <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="mt-3 text-muted-foreground">{t('categoriesSubtitle')}</p>
+          <p className="text-muted-foreground mt-3">{t('categoriesSubtitle')}</p>
         </div>
 
         <ul
@@ -109,11 +115,8 @@ export function CategoryTiles({ products }: { products: Product[] }) {
                   : undefined
               }
             >
-              <Link
-                href={tile.href}
-                className="group card card-hover block overflow-hidden"
-              >
-                <span className="relative block aspect-square overflow-hidden bg-secondary">
+              <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}
@@ -124,16 +127,16 @@ export function CategoryTiles({ products }: { products: Product[] }) {
                 </span>
                 <span className="flex items-center justify-between gap-2 px-4 py-3.5">
                   <span>
-                    <span className="block text-[15px] font-semibold text-foreground">
+                    <span className="text-foreground block text-[15px] font-semibold">
                       {tile.label}
                     </span>
-                    <span className="block text-xs text-muted-foreground">
+                    <span className="text-muted-foreground block text-xs">
                       {tile.count} {tile.count === 1 ? tc('product') : tc('products')}
                     </span>
                   </span>
                   <span
                     aria-hidden="true"
-                    className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-secondary text-foreground transition-colors group-hover:bg-primary group-hover:text-primary-foreground"
+                    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>

package/templates/nextjs/designs/atelier/ui/shared/icons.tsx

@@ -9,7 +9,7 @@ import * as React from 'react';
 export type IconProps = {
   size?: 16 | 18 | 20 | 24 | 28 | 32 | 56;
   className?: string;
-  /** stroke width — 1.75 default matches the light, jewelry-grade look */
+  /** stroke width — 1.75 default matches the light, boutique-grade look */
   strokeWidth?: number;
 };