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,57 @@
+import Link from "next/link";
+import { MapPin } from "lucide-react";
+import { Container } from "@/components/Container";
+import { Placeholder } from "@/components/Placeholder";
+import { SlotLink } from "@/components/SlotLink";
+import { branches } from "@/lib/data";
+import { parseAspectRatio } from "@/lib/static-images";
+import type { SlotMediaItem } from "@/lib/static-images";
+
+export function Branches({ images, aspectRatio }: { images?: SlotMediaItem[]; aspectRatio?: string }) {
+  const ratio = parseAspectRatio(aspectRatio);
+
+  return (
+    <section className="bg-paper py-20">
+      <Container>
+        <div className="mb-10 flex items-end justify-between gap-4">
+          <div>
+            <p className="section-kicker">Locations</p>
+            <h2 className="mt-3 text-3xl font-extrabold">دو شعبه در قم</h2>
+          </div>
+          <Link href="/contact" className="hidden text-[13px] font-bold text-brand sm:inline-flex">
+            مسیر و تلفن‌ها
+          </Link>
+        </div>
+        <div className="grid gap-5 md:grid-cols-2">
+          {branches.map((branch, index) => {
+            const media = images?.[index];
+            const src = media?.image || branch.image;
+            const href = media?.href || "/contact";
+            return (
+              <SlotLink key={branch.id} href={href} className="group overflow-hidden rounded-2xl bg-white">
+                <div
+                  className={`relative overflow-hidden ${ratio ? "" : "aspect-[16/8]"}`}
+                  style={ratio ? { aspectRatio: ratio } : undefined}
+                >
+                  <Placeholder
+                    src={src}
+                    fallbackSrc={media?.fallbackSrc ?? branch.image}
+                    alt={media?.title || branch.title}
+                    className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
+                  />
+                </div>
+                <div className="flex gap-3 p-6">
+                  <MapPin className="mt-1 size-5 shrink-0 text-brand" />
+                  <div>
+                    <h3 className="text-[18px] font-bold">{media?.title || branch.title}</h3>
+                    <p className="mt-2 text-[14px] leading-7 text-muted">{media?.text || branch.address}</p>
+                  </div>
+                </div>
+              </SlotLink>
+            );
+          })}
+        </div>
+      </Container>
+    </section>
+  );
+}