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,79 @@
+"use client";
+
+import { useRef } from "react";
+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";
+
+export function BlogCarousel() {
+  const scroller = useRef<HTMLDivElement>(null);
+
+  const scrollByCard = (direction: number) => {
+    const node = scroller.current;
+    if (!node) return;
+    const card = node.querySelector("article");
+    const amount = card ? card.getBoundingClientRect().width + 20 : 340;
+    node.scrollBy({ left: direction * amount, behavior: "smooth" });
+  };
+
+  return (
+    <section id="blog" className="py-20 sm:py-24">
+      <Container>
+        <div className="mb-10 flex items-end justify-between gap-4">
+          <div>
+            <div className="flex items-center gap-3">
+              <span className="h-[3px] w-8 bg-brand" />
+              <p className="section-kicker">Blog</p>
+            </div>
+            <h2 className="mt-3 text-3xl font-extrabold tracking-tight sm:text-[40px]">آخرین مقالات</h2>
+            <p className="mt-2 max-w-xl text-[14px] leading-7 text-muted">
+              نکته‌هایی از تعمیرگاه و بورس قطعات — برای مصرف‌کننده و همکار.
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => scrollByCard(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={() => scrollByCard(-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="/blog" 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-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>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}