Polish storefront SEO, specials, and homepage UX.

Publish Meshkee sitemap-config, map product-source specials without variants, restore hero autoplay, and tighten page heroes, product images, and section order.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/products/page.tsx

@@ -1,10 +1,16 @@
 import type { Metadata } from "next";
 import Link from "next/link";
 import { Container } from "@/components/Container";
+import { PageHero } from "@/components/layout/PageHero";
 import { ProductCard } from "@/components/ui/ProductCard";
-import { fetchStoreItems, variantToProduct } from "@/lib/store";
 import { getNavCategories } from "@/lib/categories";
 import { faDigits } from "@/lib/format";
+import {
+  catalogProductToCard,
+  fetchCatalogProducts,
+  fetchStoreItems,
+  variantToProduct,
+} from "@/lib/store";
 
 export const revalidate = 60;
 
@@ -22,67 +28,70 @@ export default async function ProductsPage({
   const page = Math.max(1, Number(params.page) || 1);
   const categoryId = params.categoryId;
   const q = params.q?.trim();
-  const [result, nav] = await Promise.all([
-    fetchStoreItems({ page, pageSize: 20, categoryId, name: q && q.length > 2 ? q : undefined }),
+  const name = q && q.length > 2 ? q : undefined;
+
+  const [storeResult, catalogResult, nav] = await Promise.all([
+    fetchStoreItems({ page, pageSize: 20, categoryId, name }),
+    fetchCatalogProducts({ page, pageSize: 20, categoryId, name }),
     getNavCategories(),
   ]);
-  const products = result.items.map(variantToProduct);
-  const pageCount = Math.max(1, Math.ceil((result.total || products.length) / (result.pageSize || 20)));
+
+  const fromStore = storeResult.items.map(variantToProduct);
+  const products = fromStore.length ? fromStore : catalogResult.items.map(catalogProductToCard);
+  const total = fromStore.length ? storeResult.total : catalogResult.total;
+  const pageSize = fromStore.length ? storeResult.pageSize : catalogResult.pageSize;
+  const pageCount = Math.max(1, Math.ceil((total || products.length) / (pageSize || 20)));
   const categoryTitle = nav
     .flatMap((item) => [item, ...item.children.map((child) => ({ ...child, children: [] as never[] }))])
     .find((item) => item.id === categoryId)?.title;
+  const heroTitle = categoryTitle || (q ? `جستجو: ${q}` : "محصولات");
 
   return (
-    <section className="py-10 sm:py-14">
-      <Container>
-        <div className="mb-6">
-          <p className="text-[13px] text-muted">
-            <Link href="/" className="hover:text-brand">
-              خانه
-            </Link>
-            <span className="mx-2">/</span>
-            محصولات
-          </p>
-          <h1 className="mt-2 text-[22px] font-extrabold text-ink">
-            {categoryTitle || (q ? `جستجو: ${q}` : "همه محصولات")}
-          </h1>
-          {result.total ? <p className="mt-1 text-[13px] text-muted">{faDigits(result.total)} کالا</p> : null}
-        </div>
+    <>
+      <PageHero
+        kicker="Products"
+        title={heroTitle}
+        image="/images/lifestyle/franco-debartolo-AXC2vD7y_ho-unsplash.jpg"
+      />
+      <section className="py-10 sm:py-14">
+        <Container>
+          {total ? <p className="mb-6 text-[13px] text-muted">{faDigits(total)} کالا</p> : null}
 
-        {products.length === 0 ? (
-          <div className="rounded-2xl border border-line bg-white px-6 py-16 text-center">
-            <p className="text-[15px] font-bold text-ink">محصولی برای نمایش وجود ندارد</p>
-            <p className="mt-2 text-[13px] text-muted">به‌زودی موجودی فروشگاه از پنل Meshkee اینجا دیده می‌شود.</p>
-          </div>
-        ) : (
-          <div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
-            {products.map((product) => (
-              <ProductCard key={product.id} product={product} />
-            ))}
-          </div>
-        )}
+          {products.length === 0 ? (
+            <div className="rounded-2xl border border-line bg-white px-6 py-16 text-center">
+              <p className="text-[15px] font-bold text-ink">محصولی برای نمایش وجود ندارد</p>
+              <p className="mt-2 text-[13px] text-muted">به‌زودی موجودی فروشگاه از پنل Meshkee اینجا دیده می‌شود.</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+              {products.map((product) => (
+                <ProductCard key={product.id} product={product} />
+              ))}
+            </div>
+          )}
 
-        {pageCount > 1 ? (
-          <div className="mt-8 flex justify-center gap-2">
-            {Array.from({ length: pageCount }, (_, index) => {
-              const number = index + 1;
-              const query = new URLSearchParams();
-              if (categoryId) query.set("categoryId", categoryId);
-              if (q) query.set("q", q);
-              query.set("page", String(number));
-              return (
-                <Link
-                  key={number}
-                  href={`/products?${query.toString()}`}
-                  className={`grid size-10 place-items-center rounded-xl text-[13px] ${number === page ? "bg-brand text-white" : "border border-line bg-white text-ink"}`}
-                >
-                  {faDigits(number)}
-                </Link>
-              );
-            })}
-          </div>
-        ) : null}
-      </Container>
-    </section>
+          {pageCount > 1 ? (
+            <div className="mt-8 flex justify-center gap-2">
+              {Array.from({ length: pageCount }, (_, index) => {
+                const number = index + 1;
+                const query = new URLSearchParams();
+                if (categoryId) query.set("categoryId", categoryId);
+                if (q) query.set("q", q);
+                query.set("page", String(number));
+                return (
+                  <Link
+                    key={number}
+                    href={`/products?${query.toString()}`}
+                    className={`grid size-10 place-items-center rounded-xl text-[13px] ${number === page ? "bg-brand text-white" : "border border-line bg-white text-ink"}`}
+                  >
+                    {faDigits(number)}
+                  </Link>
+                );
+              })}
+            </div>
+          ) : null}
+        </Container>
+      </section>
+    </>
   );
 }