Initial commit: BRB Store Next.js storefront with Meshkee image slots.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-21 12:13:41 +03:30
commit cfa21cbee9
79 changed files with 9482 additions and 0 deletions
@@ -0,0 +1,101 @@
+"use client";
+
+import { useRef } from "react";
+import { ArrowUpLeft, ChevronLeft, ChevronRight } from "lucide-react";
+import { Container } from "@/components/Container";
+import { Placeholder } from "@/components/Placeholder";
+import { SlotLink } from "@/components/SlotLink";
+import { glossyBar } from "@/lib/glossy";
+import { parseAspectRatio } from "@/lib/static-images";
+import type { SlotMediaItem } from "@/lib/static-images";
+
+export function CategoryShowcase({ items, aspectRatio }: { items: SlotMediaItem[]; aspectRatio?: string }) {
+  const scroller = useRef<HTMLDivElement>(null);
+  const ratio = parseAspectRatio(aspectRatio);
+
+  const scrollByCard = (direction: number) => {
+    const node = scroller.current;
+    if (!node) return;
+    const card = node.querySelector("article");
+    const amount = card ? card.getBoundingClientRect().width + 20 : 300;
+    node.scrollBy({ left: direction * amount, behavior: "smooth" });
+  };
+
+  return (
+    <section id="parts" className="scroll-mt-28 bg-paper py-16 sm:py-20">
+      <Container>
+        <div className="mb-10 text-center">
+          <div className="flex items-center justify-center gap-3">
+            <span className="h-px w-10 bg-brand" />
+            <p className="text-[13px] font-medium text-brand">دسته بندی ها</p>
+            <span className="h-px w-10 bg-brand" />
+          </div>
+          <h2 className="mt-3 text-[22px] font-extrabold leading-snug sm:text-[28px]">
+            دسته بندی فروشگاه لوازم خانگی برادران برقعی
+          </h2>
+        </div>
+      </Container>
+
+      <div className="relative">
+        <button
+          type="button"
+          onClick={() => scrollByCard(1)}
+          className="absolute top-1/2 right-3 z-10 hidden size-10 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-sm sm:grid lg:right-6"
+          aria-label="قبلی"
+        >
+          <ChevronRight className="size-4" />
+        </button>
+        <button
+          type="button"
+          onClick={() => scrollByCard(-1)}
+          className="absolute top-1/2 left-3 z-10 hidden size-10 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-sm sm:grid lg:left-6"
+          aria-label="بعدی"
+        >
+          <ChevronLeft className="size-4" />
+        </button>
+
+        <div
+          ref={scroller}
+          className="no-scrollbar flex snap-x snap-mandatory gap-5 overflow-x-auto px-4 sm:px-6 lg:px-[max(1.5rem,calc((100vw-1280px)/2+1.5rem))]"
+        >
+          {items.map((item) => (
+            <article
+              key={item.id}
+              className="group relative w-[min(78vw,280px)] shrink-0 snap-start overflow-hidden rounded-2xl"
+              style={ratio ? { aspectRatio: ratio } : { height: 460 }}
+            >
+              <SlotLink href={item.href} className="block h-full">
+                <Placeholder
+                  src={item.image}
+                  fallbackSrc={item.fallbackSrc}
+                  alt={item.title ?? ""}
+                  className="h-full w-full object-cover"
+                />
+                <div
+                  className="absolute right-3 bottom-3 left-3 overflow-hidden rounded-2xl px-4 py-3.5"
+                  style={glossyBar}
+                >
+                  <div className="flex h-8 items-center justify-between gap-3" dir="ltr">
+                    <span className="grid size-8 shrink-0 place-items-center rounded-full border border-white/45 text-white">
+                      <ArrowUpLeft className="size-3.5" />
+                    </span>
+                    <h3 className="truncate text-[14px] font-bold text-white" dir="rtl">
+                      {item.title}
+                    </h3>
+                  </div>
+                  {item.text ? (
+                    <div className="grid grid-rows-[0fr] transition-[grid-template-rows] duration-500 ease-out group-hover:grid-rows-[1fr]">
+                      <div className="min-h-0 overflow-hidden">
+                        <p className="pt-3 text-right text-[13px] leading-7 text-white/75">{item.text}</p>
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+              </SlotLink>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}