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>
+  );
+}
@@ -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>
+  );
+}
@@ -0,0 +1,79 @@
+"use client";
+
+import { useRef } from "react";
+import Link from "next/link";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Container } from "@/components/Container";
+import { Placeholder } from "@/components/Placeholder";
+import { blogPosts } from "@/lib/data";
+
+export function BlogCarousel() {
+  const scroller = useRef<HTMLDivElement>(null);
+
+  const scrollByCard = (direction: number) => {
+    const node = scroller.current;
+    if (!node) return;
+    const card = node.querySelector("article");
+    const amount = card ? card.getBoundingClientRect().width + 20 : 340;
+    node.scrollBy({ left: direction * amount, behavior: "smooth" });
+  };
+
+  return (
+    <section id="blog" className="py-20 sm:py-24">
+      <Container>
+        <div className="mb-10 flex items-end justify-between gap-4">
+          <div>
+            <div className="flex items-center gap-3">
+              <span className="h-[3px] w-8 bg-brand" />
+              <p className="section-kicker">Blog</p>
+            </div>
+            <h2 className="mt-3 text-3xl font-extrabold tracking-tight sm:text-[40px]">آخرین مقالات</h2>
+            <p className="mt-2 max-w-xl text-[14px] leading-7 text-muted">
+              نکته‌هایی از تعمیرگاه و بورس قطعات — برای مصرف‌کننده و همکار.
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => scrollByCard(1)}
+              className="grid size-10 place-items-center rounded-full border border-line bg-white text-ink hover:border-brand"
+              aria-label="قبلی"
+            >
+              <ChevronRight className="size-4" />
+            </button>
+            <button
+              type="button"
+              onClick={() => scrollByCard(-1)}
+              className="grid size-10 place-items-center rounded-full border border-line bg-white text-ink hover:border-brand"
+              aria-label="بعدی"
+            >
+              <ChevronLeft className="size-4" />
+            </button>
+            <Link href="/blog" className="hidden rounded-xl bg-ink px-5 py-2.5 text-[13px] text-white hover:bg-brand sm:inline-flex">
+              مشاهده همه
+            </Link>
+          </div>
+        </div>
+
+        <div ref={scroller} className="no-scrollbar flex snap-x snap-mandatory gap-5 overflow-x-auto">
+          {blogPosts.map((post) => (
+            <article key={post.slug} className="w-[min(85vw,340px)] shrink-0 snap-start">
+              <Link href={`/blog/${post.slug}`} className="group block">
+                <div className="overflow-hidden rounded-2xl">
+                  <Placeholder
+                    src={post.image}
+                    alt={post.title}
+                    className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
+                  />
+                </div>
+                <p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">{post.date}</p>
+                <h3 className="mt-2 text-[16px] font-bold leading-7 group-hover:text-brand">{post.title}</h3>
+                <p className="mt-2 line-clamp-2 text-[13px] leading-7 text-muted">{post.excerpt}</p>
+              </Link>
+            </article>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}
@@ -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>
+  );
+}
@@ -0,0 +1,101 @@
+"use client";
+
+import { useRef } from "react";
+import { ArrowUpLeft, ChevronLeft, ChevronRight } from "lucide-react";
+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 CategoryShowcase({ items, aspectRatio }: { items: SlotMediaItem[]; aspectRatio?: string }) {
+  const scroller = useRef<HTMLDivElement>(null);
+  const ratio = parseAspectRatio(aspectRatio);
+
+  const scrollByCard = (direction: number) => {
+    const node = scroller.current;
+    if (!node) return;
+    const card = node.querySelector("article");
+    const amount = card ? card.getBoundingClientRect().width + 20 : 300;
+    node.scrollBy({ left: direction * amount, behavior: "smooth" });
+  };
+
+  return (
+    <section id="parts" className="scroll-mt-28 bg-paper py-16 sm:py-20">
+      <Container>
+        <div className="mb-10 text-center">
+          <div className="flex items-center justify-center gap-3">
+            <span className="h-px w-10 bg-brand" />
+            <p className="text-[13px] font-medium text-brand">دسته بندی ها</p>
+            <span className="h-px w-10 bg-brand" />
+          </div>
+          <h2 className="mt-3 text-[22px] font-extrabold leading-snug sm:text-[28px]">
+            دسته بندی فروشگاه لوازم خانگی برادران برقعی
+          </h2>
+        </div>
+      </Container>
+
+      <div className="relative">
+        <button
+          type="button"
+          onClick={() => scrollByCard(1)}
+          className="absolute top-1/2 right-3 z-10 hidden size-10 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-sm sm:grid lg:right-6"
+          aria-label="قبلی"
+        >
+          <ChevronRight className="size-4" />
+        </button>
+        <button
+          type="button"
+          onClick={() => scrollByCard(-1)}
+          className="absolute top-1/2 left-3 z-10 hidden size-10 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-sm sm:grid lg:left-6"
+          aria-label="بعدی"
+        >
+          <ChevronLeft className="size-4" />
+        </button>
+
+        <div
+          ref={scroller}
+          className="no-scrollbar flex snap-x snap-mandatory gap-5 overflow-x-auto px-4 sm:px-6 lg:px-[max(1.5rem,calc((100vw-1280px)/2+1.5rem))]"
+        >
+          {items.map((item) => (
+            <article
+              key={item.id}
+              className="group relative w-[min(78vw,280px)] shrink-0 snap-start overflow-hidden rounded-2xl"
+              style={ratio ? { aspectRatio: ratio } : { height: 460 }}
+            >
+              <SlotLink href={item.href} className="block h-full">
+                <Placeholder
+                  src={item.image}
+                  fallbackSrc={item.fallbackSrc}
+                  alt={item.title ?? ""}
+                  className="h-full w-full object-cover"
+                />
+                <div
+                  className="absolute right-3 bottom-3 left-3 overflow-hidden rounded-2xl px-4 py-3.5"
+                  style={glossyBar}
+                >
+                  <div className="flex h-8 items-center justify-between gap-3" dir="ltr">
+                    <span className="grid size-8 shrink-0 place-items-center rounded-full border border-white/45 text-white">
+                      <ArrowUpLeft className="size-3.5" />
+                    </span>
+                    <h3 className="truncate text-[14px] font-bold text-white" dir="rtl">
+                      {item.title}
+                    </h3>
+                  </div>
+                  {item.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-3 text-right text-[13px] leading-7 text-white/75">{item.text}</p>
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+              </SlotLink>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,156 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Placeholder } from "@/components/Placeholder";
+import { SlotLink } from "@/components/SlotLink";
+import { parseAspectRatio } from "@/lib/static-images";
+import type { SlotMediaItem } from "@/lib/static-images";
+
+function circularOffset(index: number, active: number, length: number) {
+  let diff = index - active;
+  if (diff > length / 2) diff -= length;
+  if (diff < -length / 2) diff += length;
+  return diff;
+}
+
+const slideWidth = "min(1280px, calc(100vw - 5rem))";
+
+export function Hero({ slides, aspectRatio }: { slides: SlotMediaItem[]; aspectRatio?: string }) {
+  const [active, setActive] = useState(0);
+  const [paused, setPaused] = useState(false);
+  const ratio = parseAspectRatio(aspectRatio);
+
+  useEffect(() => {
+    setActive(0);
+  }, [slides.length]);
+
+  useEffect(() => {
+    if (slides.length < 2 || paused) return;
+    const timer = setInterval(() => {
+      setActive((current) => (current + 1) % slides.length);
+    }, 6000);
+    return () => clearInterval(timer);
+  }, [paused, slides.length]);
+
+  const go = (direction: number) => {
+    if (slides.length < 2) return;
+    setActive((current) => (current + direction + slides.length) % slides.length);
+  };
+
+  if (slides.length === 0) return null;
+
+  return (
+    <section className="relative overflow-x-clip bg-white pt-5 pb-8">
+      <div
+        className={ratio ? "relative min-h-[340px]" : "relative h-[min(62vh,640px)] min-h-[340px]"}
+        style={ratio ? { aspectRatio: ratio, maxHeight: 640 } : undefined}
+        dir="ltr"
+        onMouseEnter={() => setPaused(true)}
+        onMouseLeave={() => setPaused(false)}
+      >
+        {slides.map((item, i) => {
+          const offset = circularOffset(i, active, slides.length);
+          const isCenter = offset === 0;
+          const isPeek = Math.abs(offset) === 1;
+
+          return (
+            <article
+              key={item.id}
+              className="absolute top-0 h-full w-[min(1280px,calc(100vw-5rem))]"
+              style={{
+                left: `calc(50% - (${slideWidth}) / 2 + ${offset} * ((${slideWidth}) + 1rem))`,
+                zIndex: isCenter ? 3 : isPeek ? 2 : 1,
+                opacity: isCenter || isPeek ? 1 : 0,
+                pointerEvents: isCenter || isPeek ? "auto" : "none",
+                transition: "left 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms ease",
+              }}
+            >
+              {isCenter ? (
+                <SlotLink href={item.href} className="relative block h-full overflow-hidden rounded-2xl">
+                  <Placeholder
+                    src={item.image}
+                    fallbackSrc={item.fallbackSrc}
+                    alt={item.title ?? ""}
+                    className="h-full w-full object-cover"
+                  />
+                  <div
+                    className="absolute inset-x-4 bottom-4 z-10 rounded-2xl px-5 py-3.5 sm:inset-x-5 sm:bottom-5 sm:px-7 sm:py-4"
+                    style={{
+                      background:
+                        "linear-gradient(180deg, rgb(48 52 56 / 0.72) 0%, rgb(18 20 22 / 0.82) 100%)",
+                      backdropFilter: "blur(22px) saturate(180%)",
+                      WebkitBackdropFilter: "blur(22px) saturate(180%)",
+                      border: "1px solid rgb(255 255 255 / 0.22)",
+                      boxShadow:
+                        "inset 0 1px 0 rgb(255 255 255 / 0.28), 0 10px 28px rgb(0 0 0 / 0.28)",
+                    }}
+                  >
+                    <div dir="rtl" className="flex items-center justify-between gap-4">
+                      <div className="flex min-w-0 items-center gap-3 sm:gap-5">
+                        <h1 className="truncate text-[16px] font-extrabold text-white sm:text-[22px]">
+                          {item.title}
+                        </h1>
+                        <span className="hidden h-[3px] w-10 shrink-0 rounded-full bg-brand sm:block" />
+                        <span className="hidden h-6 w-px shrink-0 bg-white/20 sm:block" />
+                        {item.kicker ? (
+                          <p className="font-latin hidden shrink-0 text-[11px] tracking-[0.2em] text-white/60 uppercase sm:block">
+                            {item.kicker}
+                          </p>
+                        ) : null}
+                      </div>
+                      <span className="inline-flex shrink-0 rounded-xl bg-brand px-5 py-2.5 text-[13px] font-medium text-white sm:px-6 sm:py-3 sm:text-[14px]">
+                        مشاهده قطعات
+                      </span>
+                    </div>
+                  </div>
+                </SlotLink>
+              ) : (
+                <button
+                  type="button"
+                  className="relative block h-full w-full overflow-hidden rounded-2xl"
+                  onClick={() => setActive(i)}
+                  aria-label={item.title}
+                >
+                  <Placeholder src={item.image} fallbackSrc={item.fallbackSrc} alt="" className="h-full w-full object-cover" />
+                  <span className="absolute inset-0 bg-white/35" />
+                </button>
+              )}
+            </article>
+          );
+        })}
+
+        <div className="pointer-events-none absolute inset-y-0 left-1/2 z-10 w-[min(1280px,calc(100vw-5rem))] -translate-x-1/2">
+          <button
+            type="button"
+            onClick={() => go(1)}
+            className="pointer-events-auto absolute top-1/2 right-3 grid size-11 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-sm"
+            aria-label="اسلاید راست"
+          >
+            <ChevronRight className="size-5" />
+          </button>
+          <button
+            type="button"
+            onClick={() => go(-1)}
+            className="pointer-events-auto absolute top-1/2 left-3 grid size-11 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-sm"
+            aria-label="اسلاید چپ"
+          >
+            <ChevronLeft className="size-5" />
+          </button>
+        </div>
+      </div>
+
+      <div className="relative z-10 mt-5 flex justify-center gap-2">
+        {slides.map((item, i) => (
+          <button
+            key={item.id}
+            type="button"
+            onClick={() => setActive(i)}
+            className={`h-1.5 rounded-full transition-all ${i === active ? "w-8 bg-brand" : "w-3 bg-ink/20"}`}
+            aria-label={`اسلاید ${i + 1}`}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
@@ -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>
+  );
+}
@@ -0,0 +1,46 @@
+import { Wrench, Package, Store } from "lucide-react";
+import { Container } from "@/components/Container";
+import { Placeholder } from "@/components/Placeholder";
+import { SlotLink } from "@/components/SlotLink";
+import type { SlotMediaItem } from "@/lib/static-images";
+
+const icons = [Store, Package, Wrench];
+
+export function Services({ items }: { items: SlotMediaItem[] }) {
+  return (
+    <section className="relative z-10 -mt-px bg-white">
+      <Container>
+        <div className="grid border-x border-line lg:grid-cols-3">
+          {items.map((service, index) => {
+            const Icon = icons[index] ?? Store;
+            return (
+              <SlotLink
+                key={service.id}
+                href={service.href}
+                className={`group flex items-start gap-5 px-6 py-8 sm:px-8 ${index < items.length - 1 ? "border-b border-line lg:border-b-0 lg:border-l" : ""}`}
+              >
+                {service.image ? (
+                  <Placeholder
+                    src={service.image}
+                    fallbackSrc={service.fallbackSrc}
+                    alt=""
+                    className="mt-1 size-16 shrink-0 object-contain sm:size-[4.5rem]"
+                  />
+                ) : (
+                  <Icon className="mt-1 size-16 shrink-0 text-brand sm:size-[4.5rem]" strokeWidth={1.25} aria-hidden />
+                )}
+                <span>
+                  <span className="font-latin block text-[10px] tracking-[0.22em] text-muted uppercase">
+                    0{index + 1}
+                  </span>
+                  <h2 className="text-[18px] leading-7 font-bold group-hover:text-brand">{service.title}</h2>
+                  {service.text ? <p className="text-[13px] leading-6 text-muted">{service.text}</p> : null}
+                </span>
+              </SlotLink>
+            );
+          })}
+        </div>
+      </Container>
+    </section>
+  );
+}
@@ -0,0 +1,20 @@
+import { Container } from "@/components/Container";
+import { stats } from "@/lib/data";
+
+export function Stats() {
+  return (
+    <section className="bg-paper">
+      <Container className="grid grid-cols-2 lg:grid-cols-4">
+        {stats.map((stat, index) => (
+          <div
+            key={stat.label}
+            className={`px-4 py-8 sm:px-6 ${index % 2 === 1 ? "border-r border-line" : ""} lg:border-r lg:last:border-0`}
+          >
+            <p className="text-3xl font-extrabold text-brand sm:text-4xl">{stat.value}</p>
+            <p className="mt-2 text-[13px] leading-6 text-muted">{stat.label}</p>
+          </div>
+        ))}
+      </Container>
+    </section>
+  );
+}
@@ -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>
+  );
+}