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,52 @@
+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";
+
+const fallbackCopy = {
+  kicker: "Contact us",
+  title: "اگر به دنبال قطعه ی خاصی هستید، با ما تماس بگیرید.",
+  href: "/contact",
+};
+
+export function WideBanner({ image, aspectRatio }: { image?: SlotMediaItem; aspectRatio?: string }) {
+  const src = image?.image ?? "/images/banners/wide.jpg";
+  const href = image?.href || fallbackCopy.href;
+  const ratio = parseAspectRatio(aspectRatio);
+
+  return (
+    <section
+      className={`relative overflow-hidden ${ratio ? "min-h-[280px]" : "h-[280px] sm:h-[360px]"}`}
+      style={ratio ? { aspectRatio: ratio } : undefined}
+    >
+      <SlotLink href={href} className="absolute inset-0">
+        <Placeholder
+          src={src}
+          fallbackSrc={image?.fallbackSrc ?? "/images/banners/wide.jpg"}
+          alt=""
+          className="h-full w-full object-cover"
+        />
+        <span className="absolute inset-0 bg-ink/20" />
+      </SlotLink>
+      <Container className="relative flex h-full items-center">
+        <div className="max-w-xl rounded-2xl px-8 py-7" style={glossyBar}>
+          <p className="font-latin text-[10px] font-bold tracking-[0.32em] text-white/60 uppercase">
+            {image?.kicker || fallbackCopy.kicker}
+          </p>
+          <p className="mt-3 text-[22px] font-bold leading-9 text-white sm:text-[26px]">
+            {image?.title || fallbackCopy.title}
+          </p>
+          {image?.text ? <p className="mt-2 text-[14px] leading-7 text-white/75">{image.text}</p> : null}
+          <SlotLink
+            href={href}
+            className="mt-5 inline-flex rounded-xl bg-brand px-6 py-3 text-[14px] font-medium text-white hover:bg-brand-dark"
+          >
+            تماس با ما
+          </SlotLink>
+        </div>
+      </Container>
+    </section>
+  );
+}