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,51 @@
+import Link from "next/link";
+import { Container } from "@/components/Container";
+import { Placeholder } from "@/components/Placeholder";
+import { SlotLink } from "@/components/SlotLink";
+import { about } from "@/lib/data";
+import { parseAspectRatio } from "@/lib/static-images";
+import type { SlotMediaItem } from "@/lib/static-images";
+
+export function AboutPreview({ image, aspectRatio }: { image?: SlotMediaItem; aspectRatio?: string }) {
+  const src = image?.image ?? about.image;
+  const ratio = parseAspectRatio(aspectRatio);
+
+  return (
+    <section className="py-20 sm:py-28">
+      <Container className="grid items-center gap-12 lg:grid-cols-12 lg:gap-16">
+        <div className="lg:col-span-5">
+          <p className="section-kicker">About us</p>
+          <h2 className="mt-4 text-3xl font-extrabold leading-snug sm:text-[34px]">{about.title}</h2>
+          <p className="mt-6 text-[17px] leading-9 text-muted">{about.paragraphs[0]}</p>
+          <p className="mt-4 text-[17px] leading-9 text-muted">{about.paragraphs[1]}</p>
+          <Link
+            href="/about"
+            className="mt-8 inline-flex items-center gap-3 text-[14px] font-bold text-brand"
+          >
+            ادامه داستان مجموعه
+            <span className="h-px w-10 bg-brand" />
+          </Link>
+        </div>
+        <div className="relative lg:col-span-7">
+          <SlotLink
+            href={image?.href}
+            className="relative z-[1] block overflow-hidden rounded-2xl"
+          >
+            <span className="relative block w-full" style={ratio ? { aspectRatio: ratio } : undefined}>
+              <Placeholder
+                src={src}
+                fallbackSrc={image?.fallbackSrc ?? about.image}
+                alt={about.title}
+                className={`w-full object-cover ${ratio ? "absolute inset-0 h-full" : "relative h-auto"}`}
+              />
+            </span>
+          </SlotLink>
+          <div className="absolute -bottom-6 left-0 z-[2] rounded-2xl bg-brand px-8 py-6 text-white sm:-bottom-8 sm:left-8">
+            <p className="text-5xl font-extrabold leading-none sm:text-6xl">۳۰+</p>
+            <p className="mt-1 text-[13px] text-white/85">سال خدمت در قم</p>
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}