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,73 @@
+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 BannerRow({
+  banners,
+  columns,
+  aspectRatio,
+}: {
+  banners: SlotMediaItem[];
+  columns: 2 | 3;
+  aspectRatio?: string;
+}) {
+  const ratio = parseAspectRatio(aspectRatio);
+
+  return (
+    <section className="pb-4">
+      <Container>
+        <div className={`grid gap-5 ${columns === 3 ? "md:grid-cols-3" : "md:grid-cols-2"}`}>
+          {banners.map((banner) => (
+            <SlotLink key={banner.id} href={banner.href} className="group relative block">
+              <div
+                className={`relative overflow-hidden rounded-2xl ${
+                  ratio ? "min-h-[180px]" : columns === 3 ? "aspect-[4/3]" : "aspect-[16/8] min-h-[220px]"
+                }`}
+                style={ratio ? { aspectRatio: ratio } : undefined}
+              >
+                <Placeholder
+                  src={banner.image}
+                  fallbackSrc={banner.fallbackSrc}
+                  alt={banner.title ?? ""}
+                  className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
+                />
+                {(banner.title || banner.kicker || banner.text) && (
+                  <div
+                    className="absolute inset-x-3 bottom-3 z-10 overflow-hidden rounded-2xl px-4 py-3 sm:px-5"
+                    style={glossyBar}
+                  >
+                    <div dir="rtl" className="flex min-h-[2.5rem] items-center gap-3">
+                      {banner.title ? (
+                        <h3 className="min-w-0 truncate text-[14px] font-bold text-white sm:text-[16px]">
+                          {banner.title}
+                        </h3>
+                      ) : null}
+                      {banner.kicker ? (
+                        <>
+                          <span className="h-5 w-px shrink-0 bg-white/20" />
+                          <p className="font-latin shrink-0 text-[10px] tracking-[0.22em] text-white/60 uppercase">
+                            {banner.kicker}
+                          </p>
+                        </>
+                      ) : null}
+                    </div>
+                    {banner.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-1 pb-1 text-right text-[13px] leading-7 text-white/75">{banner.text}</p>
+                        </div>
+                      </div>
+                    ) : null}
+                  </div>
+                )}
+              </div>
+            </SlotLink>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}