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,47 @@
+import { Container } from "@/components/Container";
+import { GlassBox } from "@/components/GlassBox";
+import { Placeholder } from "@/components/Placeholder";
+import { customerPortalUrl } from "@/lib/config";
+import { sampleProducts } from "@/lib/data";
+
+export function ProductStrip() {
+  return (
+    <section className="py-20 sm:py-24">
+      <Container>
+        <div className="mb-10 flex items-end justify-between gap-4">
+          <div>
+            <p className="section-kicker">Catalog</p>
+            <h2 className="mt-3 text-3xl font-extrabold">نمونه‌ قطعات</h2>
+            <p className="mt-2 max-w-xl text-[14px] leading-7 text-muted">
+              تصاویر فروشگاه روی پس‌زمینه سفید از بک‌اند خوانده می‌شوند. تا اتصال، همین گروه‌ها به‌عنوان نمونه آمده‌اند.
+            </p>
+          </div>
+          <a href={customerPortalUrl} className="hidden rounded-xl bg-ink px-5 py-3 text-[13px] text-white hover:bg-brand sm:inline-flex">
+            ورود به فروشگاه
+          </a>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 lg:gap-5">
+          {sampleProducts.map((product) => (
+            <a key={product.id} href={customerPortalUrl} className="group relative block">
+              <div className="relative aspect-[4/5] overflow-hidden rounded-2xl">
+                <Placeholder
+                  src={product.image}
+                  alt={product.title}
+                  className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
+                />
+                <GlassBox
+                  frostSrc={product.image}
+                  className="absolute inset-x-0 bottom-0 z-10 !rounded-none !rounded-b-2xl px-3 py-2.5 text-right"
+                >
+                  <h3 className="truncate text-[12px] font-bold leading-5 sm:text-[13px]">{product.title}</h3>
+                  <p className="mt-0.5 font-latin text-[9px] tracking-[0.2em] text-muted uppercase">Coming soon</p>
+                </GlassBox>
+              </div>
+            </a>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}