create-brainerce-store 1.63.0 → 1.64.0

package/templates/nextjs/base/src/app/llms.txt/route.ts

@@ -1,44 +1,67 @@
-/**
- * llms.txt — GET /llms.txt
- *
- * A machine-readable site summary for AI answer engines (ChatGPT, Perplexity,
- * Claude, AI Overviews). Emerging convention: a concise markdown map of what
- * the site is and where its key content lives, so AI crawlers ground answers
- * in (and cite) the right pages.
- */
-import { getServerClient } from '@/core/lib/brainerce';
-
-export const revalidate = 3600;
-
-export async function GET() {
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';
-  const client = getServerClient();
-
-  const [info, posts] = await Promise.all([
-    client.getStoreInfo().catch(() => null),
-    client.blog.getPosts({ limit: 20 }).catch(() => null),
-  ]);
-
-  const lines: string[] = [
-    `# ${info?.name ?? 'Store'}`,
-    '',
-    ...(info?.metaDescription ? [`> ${info.metaDescription}`, ''] : []),
-    '## Key pages',
-    '',
-    `- [Products](${baseUrl}/products): full catalog`,
-    `- [Blog](${baseUrl}/blog): guides and articles`,
-    ...(info?.contactEmail ? [`- Contact: ${info.contactEmail}`] : []),
-  ];
-
-  if (posts && posts.data.length > 0) {
-    lines.push('', '## Recent articles', '');
-    for (const post of posts.data) {
-      const summary = post.seoDescription ?? post.excerpt ?? '';
-      lines.push(`- [${post.title}](${baseUrl}/blog/${post.slug})${summary ? `: ${summary}` : ''}`);
-    }
-  }
-
-  return new Response(lines.join('\n') + '\n', {
-    headers: { 'Content-Type': 'text/plain; charset=utf-8' },
-  });
-}
+/**
+ * llms.txt — GET /llms.txt
+ *
+ * A machine-readable site summary for AI answer engines (ChatGPT, Perplexity,
+ * Claude, AI Overviews): a concise markdown map of what the site is and where
+ * its key content lives, so AI crawlers ground answers in (and cite) the
+ * right pages. /agents.md is the richer agent-facing companion (the newer
+ * convention) — keep the two consistent.
+ */
+import { getServerClient } from '@/core/lib/brainerce';
+
+export const revalidate = 3600;
+
+interface CategoryNodeLike {
+  name: string;
+  slug?: string | null;
+  children?: CategoryNodeLike[];
+}
+
+export async function GET() {
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';
+  const client = getServerClient();
+
+  const [info, posts, categoriesRes] = await Promise.all([
+    client.getStoreInfo().catch(() => null),
+    client.blog.getPosts({ limit: 20 }).catch(() => null),
+    client.getCategories().catch(() => null),
+  ]);
+
+  const topCategories: CategoryNodeLike[] = (
+    (categoriesRes?.categories as CategoryNodeLike[] | undefined) ?? []
+  ).filter((c) => c.slug);
+
+  const lines: string[] = [
+    `# ${info?.name ?? 'Store'}`,
+    '',
+    ...(info?.metaDescription ? [`> ${info.metaDescription}`, ''] : []),
+    '## Key pages',
+    '',
+    `- [Products](${baseUrl}/products): full catalog`,
+    ...topCategories
+      .slice(0, 20)
+      .map((c) => `- [${c.name}](${baseUrl}/category/${c.slug}): category`),
+    `- [Blog](${baseUrl}/blog): guides and articles`,
+    `- [FAQ](${baseUrl}/faq)`,
+    `- [Contact](${baseUrl}/contact)`,
+    ...(info?.contactEmail ? [`- Contact email: ${info.contactEmail}`] : []),
+    '',
+    '## Machine-readable surfaces',
+    '',
+    `- [Agent guide](${baseUrl}/agents.md)`,
+    `- [Sitemap](${baseUrl}/sitemap.xml)`,
+    `- [Blog RSS](${baseUrl}/blog/rss.xml)`,
+  ];
+
+  if (posts && posts.data.length > 0) {
+    lines.push('', '## Recent articles', '');
+    for (const post of posts.data) {
+      const summary = post.seoDescription ?? post.excerpt ?? '';
+      lines.push(`- [${post.title}](${baseUrl}/blog/${post.slug})${summary ? `: ${summary}` : ''}`);
+    }
+  }
+
+  return new Response(lines.join('\n') + '\n', {
+    headers: { 'Content-Type': 'text/plain; charset=utf-8' },
+  });
+}

package/templates/nextjs/base/src/app/not-found.tsx.ejs

@@ -0,0 +1,35 @@
+import Link from 'next/link';
+
+/**
+ * 404 page — rendered for unknown URLs and for `notFound()` calls from
+ * product/category/blog pages (deleted products, renamed slugs). A branded
+ * 404 with a path back to the catalog keeps the visitor (and their SEO
+ * equity) on the site instead of bouncing off the framework default.
+ */
+export default function NotFound() {
+  return (
+    <div className="mx-auto flex max-w-2xl flex-col items-center justify-center px-4 py-24 text-center">
+      <p className="text-sm font-medium text-muted-foreground">404</p>
+      <h1 className="mt-2 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+        <%- language === 'he' ? 'העמוד לא נמצא' : 'Page not found' %>
+      </h1>
+      <p className="mt-4 text-muted-foreground">
+        <%- language === 'he' ? 'יכול להיות שהמוצר הוסר או שהכתובת השתנתה.' : 'The product may have been removed, or the address may have changed.' %>
+      </p>
+      <div className="mt-8 flex gap-4">
+        <Link
+          href="/"
+          className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
+        >
+          <%- language === 'he' ? 'לדף הבית' : 'Go home' %>
+        </Link>
+        <Link
+          href="/products"
+          className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-muted"
+        >
+          <%- language === 'he' ? 'לכל המוצרים' : 'Browse products' %>
+        </Link>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/app/opengraph-image.tsx

@@ -0,0 +1,109 @@
+import { ImageResponse } from 'next/og';
+import { fetchStoreInfo } from '@/core/lib/brainerce';
+
+/**
+ * Default Open Graph card for every page that doesn't set its own og:image
+ * (home, /products, /faq, /contact, content pages without an OG image).
+ * Product / category / blog pages override this with their real images.
+ *
+ * Without this file, any page lacking an image gets NO social card at all —
+ * a bare-domain link in WhatsApp/Facebook/X renders as plain text.
+ */
+export const size = { width: 1200, height: 630 };
+export const contentType = 'image/png';
+export const alt = 'Store';
+
+/**
+ * Satori (the OG renderer) ships a Latin-only default font — a Hebrew or
+ * Arabic store name would render as tofu (□□□). Fetch a Noto Sans variant
+ * with the needed coverage at request time; fetching the CSS without a
+ * browser UA makes Google Fonts return TTF (which Satori accepts — it can't
+ * parse woff2). Cached by the framework; on any failure we render without
+ * text rather than shipping tofu.
+ */
+async function loadFont(text: string): Promise<ArrayBuffer | null> {
+  try {
+    const css = await fetch(
+      `https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@700&family=Noto+Sans:wght@700&display=swap&text=${encodeURIComponent(text)}`,
+      { cache: 'force-cache' }
+    ).then((r) => r.text());
+    const url = css.match(/src:\s*url\((.+?)\)\s*format\(['"](?:truetype|opentype)['"]\)/)?.[1];
+    if (!url) return null;
+    return await fetch(url, { cache: 'force-cache' }).then((r) => r.arrayBuffer());
+  } catch {
+    return null;
+  }
+}
+
+// Basic Latin through Latin Extended-B (U+0020–U+024F) plus whitespace,
+// punctuation, and digits — the coverage of Satori's bundled default font.
+const LATIN_ONLY = /^[ -ɏ\s\p{P}\p{N}]*$/u;
+
+export default async function OpenGraphImage() {
+  const info = await fetchStoreInfo();
+  const name = info?.name?.trim() || '';
+  const description = info?.metaDescription?.trim() || '';
+  const logo = info?.logo || null;
+
+  const text = `${name} ${description}`.trim();
+  const font = text ? await loadFont(text) : null;
+  // Default font covers Latin only — if the font fetch failed and the text
+  // needs more coverage, drop the text instead of rendering tofu.
+  const canRenderText = Boolean(text) && (font !== null || LATIN_ONLY.test(text));
+
+  return new ImageResponse(
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 32,
+        background: 'linear-gradient(135deg, #111113 0%, #1c1c22 55%, #26262e 100%)',
+        color: '#fafafa',
+      }}
+    >
+      {logo ? (
+        <img src={logo} alt="" style={{ maxHeight: 220, maxWidth: 520, objectFit: 'contain' }} />
+      ) : null}
+      {canRenderText && name ? (
+        <div
+          style={{
+            display: 'flex',
+            fontSize: logo ? 56 : 84,
+            fontWeight: 700,
+            textAlign: 'center',
+            maxWidth: 1000,
+          }}
+        >
+          {name}
+        </div>
+      ) : null}
+      {canRenderText && description ? (
+        <div
+          style={{
+            display: 'flex',
+            fontSize: 32,
+            color: '#a1a1aa',
+            textAlign: 'center',
+            maxWidth: 960,
+          }}
+        >
+          {description.length > 120 ? `${description.slice(0, 119)}…` : description}
+        </div>
+      ) : null}
+    </div>,
+    {
+      ...size,
+      ...(font
+        ? {
+            fonts: [
+              { name: 'Noto Sans', data: font, weight: 700 as const, style: 'normal' as const },
+            ],
+          }
+        : {}),
+    }
+  );
+}

package/templates/nextjs/base/src/app/products/[slug]/page.tsx

@@ -1,175 +1,187 @@
-import type { Metadata } from 'next';
-import { notFound } from 'next/navigation';
-import { getProductPriceInfo } from 'brainerce';
-import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce';
-import { resolveCurrency } from '@/core/lib/resolve-currency';
-import { buildMetaDescription } from '@/core/lib/seo';
-import { decodeSlug } from '@/core/lib/utils';
-import { ProductJsonLd } from '@/components/seo/product-json-ld';
-import { Breadcrumbs } from '@/components/seo/breadcrumbs';
-import { ReviewsSection } from '@/ui/product/reviews-section';
-import { ProductClientSection } from '@/ui/product/product-client-section';
-
-type Props = {
-  params: Promise<{ slug: string; locale?: string }>;
-};
-
-function buildHreflang(
-  baseUrl: string,
-  baseSlug: string,
-  localeSlugs: Record<string, string>,
-  locales: string[],
-  defaultLoc: string
-): Record<string, string> {
-  const langs: Record<string, string> = {};
-  for (const loc of locales) {
-    const locSlug = localeSlugs[loc] || baseSlug;
-    const path = loc === defaultLoc ? `/products/${locSlug}` : `/${loc}/products/${locSlug}`;
-    langs[loc] = `${baseUrl}${path}`;
-  }
-  // x-default points to the default-locale canonical (no prefix)
-  langs['x-default'] = `${baseUrl}/products/${localeSlugs[defaultLoc] || baseSlug}`;
-  return langs;
-}
-
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { slug: rawSlug, locale } = await params;
-  const slug = decodeSlug(rawSlug);
-
-  try {
-    const client = getServerClient(locale);
-    // Fetch product + store info in parallel; storeInfo gives us the live
-    // currency for OG price tags (with env-var + USD fallbacks so we never
-    // silently emit a wrong currency when the API is briefly unreachable).
-    const [product, storeInfo] = await Promise.all([
-      client.getProductBySlug(slug),
-      fetchStoreInfo(locale),
-    ]);
-    const imageUrl = product.images?.[0]?.url;
-    // Prefer merchant-authored SEO copy; fall back to a stripped+truncated
-    // version of the visible description, then product name. We must NEVER
-    // emit raw HTML or a mid-word cut into <meta name="description">.
-    const seoTitle = (product as { seoTitle?: string | null }).seoTitle || product.name;
-    const seoDescription =
-      (product as { seoDescription?: string | null }).seoDescription ||
-      buildMetaDescription(product.description) ||
-      product.name;
-
-    // OG product meta tags drive WhatsApp / Facebook / X link previews and
-    // Google Merchant Center product enrichment. Emitting the literal "0"
-    // here (the previous bug) causes price-zero link cards. Use the real
-    // effective price from the SDK helper.
-    const priceInfo = getProductPriceInfo(product);
-    const currency = resolveCurrency(storeInfo);
-    const priceAmount = priceInfo.price > 0 ? priceInfo.price.toFixed(2) : null;
-    const inStock = product.inventory?.canPurchase !== false;
-    const brandName = (product as { brand?: { name?: string } | null }).brand?.name;
-
-    // Multilingual SEO: hreflang tags + correct canonical per locale.
-    // Locales come from storeInfo.i18n — already fetched above, zero extra cost.
-    const supportedLocales = storeInfo?.i18n?.supportedLocales ?? [];
-    const defaultLoc = storeInfo?.i18n?.defaultLocale ?? storeInfo?.language ?? '';
-    const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
-    const baseSlug = product.slug || slug;
-    const localeSlugs = product.localeSlugs ?? {};
-
-    // Canonical: use the locale-specific slug for this locale when available.
-    const canonicalSlug = (locale && localeSlugs[locale]) || baseSlug;
-    const canonicalPath =
-      locale && locale !== defaultLoc
-        ? `/${locale}/products/${canonicalSlug}`
-        : `/products/${canonicalSlug}`;
-
-    const hreflangLanguages =
-      supportedLocales.length > 1
-        ? buildHreflang(baseUrl, baseSlug, localeSlugs, supportedLocales, defaultLoc)
-        : undefined;
-
-    return {
-      title: seoTitle,
-      description: seoDescription,
-      alternates: {
-        canonical: canonicalPath,
-        ...(hreflangLanguages ? { languages: hreflangLanguages } : {}),
-      },
-      openGraph: {
-        title: seoTitle,
-        description: seoDescription,
-        images: imageUrl ? [{ url: imageUrl, alt: product.name }] : [],
-        type: 'website',
-      },
-      twitter: {
-        card: 'summary_large_image',
-        title: seoTitle,
-        description: seoDescription,
-        images: imageUrl ? [imageUrl] : [],
-      },
-      // Emit the OG product extension (Facebook / WhatsApp / X link previews,
-      // Google Merchant Center). Skips the price pair entirely when the SDK
-      // can't determine a positive amount, rather than shipping "0".
-      other: {
-        ...(priceAmount
-          ? {
-              'og:price:amount': priceAmount,
-              'og:price:currency': currency,
-              'product:price:amount': priceAmount,
-              'product:price:currency': currency,
-            }
-          : {}),
-        'product:availability': inStock ? 'in stock' : 'out of stock',
-        'product:condition': 'new',
-        ...(brandName ? { 'product:brand': brandName } : {}),
-      },
-    };
-  } catch {
-    return {
-      title: 'Product not found',
-    };
-  }
-}
-
-export default async function ProductDetailPage({ params }: Props) {
-  const { slug: rawSlug, locale } = await params;
-  const slug = decodeSlug(rawSlug);
-
-  let product;
-  try {
-    const client = getServerClient(locale);
-    product = await client.getProductBySlug(slug);
-  } catch {
-    notFound();
-  }
-
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
-  const productUrl = `${baseUrl}/products/${slug}`;
-  // Reuse the cached storeInfo from generateMetadata's call — React cache()
-  // collapses both into one backend request per render. resolveCurrency owns
-  // the env-var + USD fallback chain so this stays a single source of truth.
-  const storeInfo = await fetchStoreInfo(locale);
-  const currency = resolveCurrency(storeInfo);
-  const localePrefix = locale ? `/${locale}` : '';
-  const primaryCategory = product.categories?.find((c) => c.slug);
-  const breadcrumbItems = [
-    { name: 'Home', href: `${localePrefix}/` },
-    ...(primaryCategory
-      ? [{ name: primaryCategory.name, href: `${localePrefix}/category/${primaryCategory.slug}` }]
-      : []),
-    { name: product.name },
-  ];
-
-  return (
-    <>
-      <ProductJsonLd
-        product={product}
-        url={productUrl}
-        currency={currency}
-        shipping={storeInfo?.shipping}
-      />
-      <div className="mx-auto max-w-7xl px-4 pt-6 sm:px-6 lg:px-8">
-        <Breadcrumbs items={breadcrumbItems} />
-      </div>
-      <ProductClientSection product={product} />
-      <ReviewsSection productId={product.id} />
-    </>
-  );
-}
+import type { Metadata } from 'next';
+import { notFound, permanentRedirect } from 'next/navigation';
+import { getProductPriceInfo } from 'brainerce';
+import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce';
+import { resolveCurrency } from '@/core/lib/resolve-currency';
+import { buildMetaDescription } from '@/core/lib/seo';
+import { decodeSlug } from '@/core/lib/utils';
+import { ProductJsonLd } from '@/components/seo/product-json-ld';
+import { Breadcrumbs } from '@/components/seo/breadcrumbs';
+import { ReviewsSection } from '@/ui/product/reviews-section';
+import { ProductClientSection } from '@/ui/product/product-client-section';
+
+type Props = {
+  params: Promise<{ slug: string; locale?: string }>;
+};
+
+function buildHreflang(
+  baseUrl: string,
+  baseSlug: string,
+  localeSlugs: Record<string, string>,
+  locales: string[],
+  defaultLoc: string
+): Record<string, string> {
+  const langs: Record<string, string> = {};
+  for (const loc of locales) {
+    const locSlug = localeSlugs[loc] || baseSlug;
+    const path = loc === defaultLoc ? `/products/${locSlug}` : `/${loc}/products/${locSlug}`;
+    langs[loc] = `${baseUrl}${path}`;
+  }
+  // x-default points to the default-locale canonical (no prefix)
+  langs['x-default'] = `${baseUrl}/products/${localeSlugs[defaultLoc] || baseSlug}`;
+  return langs;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug: rawSlug, locale } = await params;
+  const slug = decodeSlug(rawSlug);
+
+  try {
+    const client = getServerClient(locale);
+    // Fetch product + store info in parallel; storeInfo gives us the live
+    // currency for OG price tags (with env-var + USD fallbacks so we never
+    // silently emit a wrong currency when the API is briefly unreachable).
+    const [product, storeInfo] = await Promise.all([
+      client.getProductBySlug(slug),
+      fetchStoreInfo(locale),
+    ]);
+    const imageUrl = product.images?.[0]?.url;
+    // Prefer merchant-authored SEO copy; fall back to a stripped+truncated
+    // version of the visible description, then product name. We must NEVER
+    // emit raw HTML or a mid-word cut into <meta name="description">.
+    const seoTitle = (product as { seoTitle?: string | null }).seoTitle || product.name;
+    const seoDescription =
+      (product as { seoDescription?: string | null }).seoDescription ||
+      buildMetaDescription(product.description) ||
+      product.name;
+
+    // OG product meta tags drive WhatsApp / Facebook / X link previews and
+    // Google Merchant Center product enrichment. Emitting the literal "0"
+    // here (the previous bug) causes price-zero link cards. Use the real
+    // effective price from the SDK helper.
+    const priceInfo = getProductPriceInfo(product);
+    const currency = resolveCurrency(storeInfo);
+    const priceAmount = priceInfo.price > 0 ? priceInfo.price.toFixed(2) : null;
+    const inStock = product.inventory?.canPurchase !== false;
+    const brandName = (product as { brand?: { name?: string } | null }).brand?.name;
+
+    // Multilingual SEO: hreflang tags + correct canonical per locale.
+    // Locales come from storeInfo.i18n — already fetched above, zero extra cost.
+    const supportedLocales = storeInfo?.i18n?.supportedLocales ?? [];
+    const defaultLoc = storeInfo?.i18n?.defaultLocale ?? storeInfo?.language ?? '';
+    const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+    const baseSlug = product.slug || slug;
+    const localeSlugs = product.localeSlugs ?? {};
+
+    // Canonical: use the locale-specific slug for this locale when available.
+    const canonicalSlug = (locale && localeSlugs[locale]) || baseSlug;
+    const canonicalPath =
+      locale && locale !== defaultLoc
+        ? `/${locale}/products/${canonicalSlug}`
+        : `/products/${canonicalSlug}`;
+
+    const hreflangLanguages =
+      supportedLocales.length > 1
+        ? buildHreflang(baseUrl, baseSlug, localeSlugs, supportedLocales, defaultLoc)
+        : undefined;
+
+    return {
+      title: seoTitle,
+      description: seoDescription,
+      alternates: {
+        canonical: canonicalPath,
+        ...(hreflangLanguages ? { languages: hreflangLanguages } : {}),
+      },
+      openGraph: {
+        title: seoTitle,
+        description: seoDescription,
+        images: imageUrl ? [{ url: imageUrl, alt: product.name }] : [],
+        type: 'website',
+      },
+      twitter: {
+        card: 'summary_large_image',
+        title: seoTitle,
+        description: seoDescription,
+        images: imageUrl ? [imageUrl] : [],
+      },
+      // Emit the OG product extension (Facebook / WhatsApp / X link previews,
+      // Google Merchant Center). Skips the price pair entirely when the SDK
+      // can't determine a positive amount, rather than shipping "0".
+      other: {
+        ...(priceAmount
+          ? {
+              'og:price:amount': priceAmount,
+              'og:price:currency': currency,
+              'product:price:amount': priceAmount,
+              'product:price:currency': currency,
+            }
+          : {}),
+        'product:availability': inStock ? 'in stock' : 'out of stock',
+        'product:condition': 'new',
+        ...(brandName ? { 'product:brand': brandName } : {}),
+      },
+    };
+  } catch {
+    return {
+      title: 'Product not found',
+    };
+  }
+}
+
+export default async function ProductDetailPage({ params }: Props) {
+  const { slug: rawSlug, locale } = await params;
+  const slug = decodeSlug(rawSlug);
+
+  const client = getServerClient(locale);
+  let product;
+  try {
+    product = await client.getProductBySlug(slug);
+  } catch {
+    // The slug may have been RENAMED — the platform records every rename.
+    // 301 the old URL to the current slug so its ranking and inbound links
+    // carry over; genuine unknowns fall through to the 404 page. Default
+    // locale stays unprefixed (matches the sitemap/hreflang convention); the
+    // destination page's canonical then points crawlers at the localized URL.
+    const redirect = await client.resolveSlugRedirect('product', slug);
+    if (redirect) {
+      const info = await fetchStoreInfo(locale);
+      const defaultLoc = info?.i18n?.defaultLocale ?? info?.language ?? '';
+      const prefix = locale && locale !== defaultLoc ? `/${locale}` : '';
+      permanentRedirect(`${prefix}/products/${redirect.currentSlug}`);
+    }
+    notFound();
+  }
+
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+  const productUrl = `${baseUrl}/products/${slug}`;
+  // Reuse the cached storeInfo from generateMetadata's call — React cache()
+  // collapses both into one backend request per render. resolveCurrency owns
+  // the env-var + USD fallback chain so this stays a single source of truth.
+  const storeInfo = await fetchStoreInfo(locale);
+  const currency = resolveCurrency(storeInfo);
+  const localePrefix = locale ? `/${locale}` : '';
+  const primaryCategory = product.categories?.find((c) => c.slug);
+  const breadcrumbItems = [
+    { name: 'Home', href: `${localePrefix}/` },
+    ...(primaryCategory
+      ? [{ name: primaryCategory.name, href: `${localePrefix}/category/${primaryCategory.slug}` }]
+      : []),
+    { name: product.name },
+  ];
+
+  return (
+    <>
+      <ProductJsonLd
+        product={product}
+        url={productUrl}
+        currency={currency}
+        shipping={storeInfo?.shipping}
+      />
+      <div className="mx-auto max-w-7xl px-4 pt-6 sm:px-6 lg:px-8">
+        <Breadcrumbs items={breadcrumbItems} />
+      </div>
+      <ProductClientSection product={product} />
+      <ReviewsSection productId={product.id} />
+    </>
+  );
+}