Wire Meshkee catalog: products, blog, mega menu, and product search.

Catalog-only (no cart); search targets store items and products pages.

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

components/home/BlogCarousel.tsx

@@ -5,10 +5,26 @@ import Link from "next/link";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Container } from "@/components/Container";
 import { Placeholder } from "@/components/Placeholder";
-import { blogPosts } from "@/lib/data";
+import { blogHref, blogImage, type BlogPost } from "@/lib/blog";
+import { formatFaDate } from "@/lib/format";
 
-export function BlogCarousel() {
+type LocalPost = {
+  slug: string;
+  title: string;
+  excerpt: string;
+  date: string;
+  image: string;
+};
+
+export function BlogCarousel({
+  posts = [],
+  fallback = [],
+}: {
+  posts?: BlogPost[];
+  fallback?: LocalPost[];
+}) {
   const scroller = useRef<HTMLDivElement>(null);
+  const usingApi = posts.length > 0;
 
   const scrollByCard = (direction: number) => {
     const node = scroller.current;
@@ -56,22 +72,43 @@ export function BlogCarousel() {
         </div>
 
         <div ref={scroller} className="no-scrollbar flex snap-x snap-mandatory gap-5 overflow-x-auto">
-          {blogPosts.map((post) => (
-            <article key={post.slug} className="w-[min(85vw,340px)] shrink-0 snap-start">
-              <Link href={`/blog/${post.slug}`} className="group block">
-                <div className="overflow-hidden rounded-2xl">
-                  <Placeholder
-                    src={post.image}
-                    alt={post.title}
-                    className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
-                  />
-                </div>
-                <p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">{post.date}</p>
-                <h3 className="mt-2 text-[16px] font-bold leading-7 group-hover:text-brand">{post.title}</h3>
-                <p className="mt-2 line-clamp-2 text-[13px] leading-7 text-muted">{post.excerpt}</p>
-              </Link>
-            </article>
-          ))}
+          {usingApi
+            ? posts.map((post) => (
+                <article key={post.id} className="w-[min(85vw,340px)] shrink-0 snap-start">
+                  <Link href={blogHref(post)} className="group block">
+                    <div className="overflow-hidden rounded-2xl">
+                      <Placeholder
+                        src={blogImage(post)}
+                        alt={post.title}
+                        className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
+                      />
+                    </div>
+                    <p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">
+                      {formatFaDate(post.publishedAt || post.createdAt)}
+                    </p>
+                    <h3 className="mt-2 text-[16px] font-bold leading-7 group-hover:text-brand">{post.title}</h3>
+                    {post.abstract ? (
+                      <p className="mt-2 line-clamp-2 text-[13px] leading-7 text-muted">{post.abstract}</p>
+                    ) : null}
+                  </Link>
+                </article>
+              ))
+            : fallback.map((post) => (
+                <article key={post.slug} className="w-[min(85vw,340px)] shrink-0 snap-start">
+                  <Link href={`/blog/${post.slug}`} className="group block">
+                    <div className="overflow-hidden rounded-2xl">
+                      <Placeholder
+                        src={post.image}
+                        alt={post.title}
+                        className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
+                      />
+                    </div>
+                    <p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">{post.date}</p>
+                    <h3 className="mt-2 text-[16px] font-bold leading-7 group-hover:text-brand">{post.title}</h3>
+                    <p className="mt-2 line-clamp-2 text-[13px] leading-7 text-muted">{post.excerpt}</p>
+                  </Link>
+                </article>
+              ))}
         </div>
       </Container>
     </section>

components/home/ProductCarousel.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useRef } from "react";
+import Link from "next/link";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Container } from "@/components/Container";
+import { ProductCard } from "@/components/ui/ProductCard";
+import type { Product } from "@/lib/data";
+
+type Props = {
+  id?: string;
+  title: string;
+  subtitle?: string;
+  href?: string;
+  products: Product[];
+};
+
+export function ProductCarousel({ id, title, subtitle, href = "/products", products }: Props) {
+  const scroller = useRef<HTMLDivElement>(null);
+
+  const scrollBy = (dir: number) => {
+    scroller.current?.scrollBy({ left: dir * -280, behavior: "smooth" });
+  };
+
+  if (!products.length) return null;
+
+  return (
+    <section id={id} className="py-10">
+      <Container>
+        <div className="mb-5 flex items-end justify-between gap-3">
+          <div>
+            <div className="flex items-center gap-3">
+              <span className="h-[3px] w-8 bg-brand" />
+              <p className="section-kicker">Parts</p>
+            </div>
+            <h2 className="mt-3 text-[22px] font-extrabold sm:text-[28px]">{title}</h2>
+            {subtitle ? <p className="mt-1 text-[13px] text-muted">{subtitle}</p> : null}
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => scrollBy(-1)}
+              className="grid size-10 place-items-center rounded-full border border-line bg-white text-ink hover:border-brand"
+              aria-label="قبلی"
+            >
+              <ChevronRight className="size-4" />
+            </button>
+            <button
+              type="button"
+              onClick={() => scrollBy(1)}
+              className="grid size-10 place-items-center rounded-full border border-line bg-white text-ink hover:border-brand"
+              aria-label="بعدی"
+            >
+              <ChevronLeft className="size-4" />
+            </button>
+            <Link href={href} className="hidden rounded-xl bg-ink px-5 py-2.5 text-[13px] text-white hover:bg-brand sm:inline-flex">
+              مشاهده همه
+            </Link>
+          </div>
+        </div>
+        <div ref={scroller} className="no-scrollbar flex snap-x snap-mandatory gap-4 overflow-x-auto pb-1">
+          {products.map((product) => (
+            <div key={product.id} className="w-[210px] shrink-0 snap-start sm:w-[230px]">
+              <ProductCard product={product} />
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}