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,9 @@
+export function Container({
+  children,
+  className = "",
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return <div className={`mx-auto w-full max-w-[1280px] px-4 sm:px-6 ${className}`}>{children}</div>;
+}
@@ -0,0 +1,30 @@
+export function GlassBox({
+  children,
+  className = "",
+  frostSrc,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  frostSrc: string;
+}) {
+  return (
+    <div
+      className={`glass-box overflow-hidden ${className}`}
+      style={{
+        WebkitBackdropFilter: "blur(18px) saturate(160%)",
+        backdropFilter: "blur(18px) saturate(160%)",
+      }}
+    >
+      <span
+        aria-hidden
+        className="pointer-events-none absolute inset-0 scale-125 bg-cover bg-center"
+        style={{
+          backgroundImage: `url("${frostSrc}")`,
+          filter: "blur(18px)",
+        }}
+      />
+      <span className="pointer-events-none absolute inset-0 bg-white/30" />
+      <div className="relative z-10">{children}</div>
+    </div>
+  );
+}
@@ -0,0 +1,34 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+type PlaceholderProps = {
+  src: string;
+  fallbackSrc?: string;
+  alt?: string;
+  className?: string;
+};
+
+export function Placeholder({ src, fallbackSrc, alt = "", className }: PlaceholderProps) {
+  const [current, setCurrent] = useState(src);
+  const failed = useRef(false);
+
+  useEffect(() => {
+    failed.current = false;
+    setCurrent(src);
+  }, [src]);
+
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={current}
+      alt={alt}
+      className={className}
+      onError={() => {
+        if (failed.current || !fallbackSrc || fallbackSrc === current) return;
+        failed.current = true;
+        setCurrent(fallbackSrc);
+      }}
+    />
+  );
+}
@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import Link from "next/link";
+
+export function SlotLink({
+  href,
+  className,
+  children,
+}: {
+  href?: string;
+  className?: string;
+  children: ReactNode;
+}) {
+  if (!href) return <div className={className}>{children}</div>;
+  if (href.startsWith("/") || href.startsWith("#")) {
+    return (
+      <Link href={href} className={className}>
+        {children}
+      </Link>
+    );
+  }
+  return (
+    <a href={href} className={className}>
+      {children}
+    </a>
+  );
+}
@@ -0,0 +1,55 @@
+"use client";
+
+import { FormEvent, useState } from "react";
+import { site } from "@/lib/data";
+
+export function ContactForm() {
+  const [sent, setSent] = useState(false);
+
+  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    const name = String(data.get("name") || "");
+    const phone = String(data.get("phone") || "");
+    const message = String(data.get("message") || "");
+    const body = encodeURIComponent(`نام: ${name}\nتلفن: ${phone}\n\n${message}`);
+    window.location.href = `mailto:${site.email}?subject=${encodeURIComponent("پیام از وبسایت BRB")}&body=${body}`;
+    setSent(true);
+  };
+
+  if (sent) {
+    return (
+      <p className="rounded-2xl bg-paper p-6 text-[14px] leading-7 text-muted">
+        پیام شما آماده ارسال از طریق ایمیل شد. اگر برنامه ایمیل باز نشد، با شماره‌های فروشگاه تماس بگیرید.
+      </p>
+    );
+  }
+
+  return (
+    <form onSubmit={onSubmit} className="space-y-3">
+      <input
+        name="name"
+        required
+        placeholder="نام و نام خانوادگی"
+        className="w-full rounded-xl border border-line bg-paper px-4 py-3.5 text-[14px] outline-none focus:border-brand focus:bg-white"
+      />
+      <input
+        name="phone"
+        required
+        dir="ltr"
+        placeholder="شماره همراه"
+        className="w-full rounded-xl border border-line bg-paper px-4 py-3.5 text-[14px] outline-none focus:border-brand focus:bg-white"
+      />
+      <textarea
+        name="message"
+        required
+        rows={6}
+        placeholder="پیام شما"
+        className="w-full resize-y rounded-xl border border-line bg-paper px-4 py-3.5 text-[14px] outline-none focus:border-brand focus:bg-white"
+      />
+      <button type="submit" className="rounded-xl bg-brand px-8 py-3.5 text-[14px] font-medium text-white hover:bg-brand-dark">
+        ارسال پیام
+      </button>
+    </form>
+  );
+}
@@ -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>
+  );
+}
@@ -0,0 +1,74 @@
+import Link from "next/link";
+import { Send } from "lucide-react";
+import { Container } from "@/components/Container";
+import { Placeholder } from "@/components/Placeholder";
+import { branches, navLinks, phones, site } from "@/lib/data";
+
+export function Footer() {
+  return (
+    <footer className="bg-ink text-white">
+      <Container className="grid gap-12 py-16 sm:grid-cols-2 lg:grid-cols-12">
+        <div className="lg:col-span-4">
+          <div className="inline-block rounded-xl bg-white px-3 py-2">
+            <Placeholder src={site.logo} alt={site.name} className="h-14 w-auto object-contain" />
+          </div>
+          <p className="mt-5 max-w-sm text-[14px] leading-8 text-white/65">{site.description}</p>
+          <a
+            href={site.telegram}
+            target="_blank"
+            rel="noreferrer"
+            className="mt-5 inline-flex items-center gap-2 text-[13px] hover:text-brand"
+          >
+            <Send className="size-4" />
+            ما را دنبال کنید
+          </a>
+        </div>
+
+        <div className="lg:col-span-2">
+          <h3 className="mb-4 text-[13px] font-bold text-white/50">صفحات</h3>
+          <ul className="space-y-2.5 text-[14px] text-white/75">
+            {navLinks.map((item) => (
+              <li key={item.href}>
+                <Link href={item.href} className="hover:text-white">
+                  {item.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="lg:col-span-3">
+          <h3 className="mb-4 text-[13px] font-bold text-white/50">مکان ما</h3>
+          <ul className="space-y-4 text-[14px] leading-7 text-white/75">
+            {branches.map((branch) => (
+              <li key={branch.id}>
+                <strong className="text-white">{branch.title}</strong>
+                <p className="mt-1">{branch.address}</p>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="lg:col-span-3">
+          <h3 className="mb-4 text-[13px] font-bold text-white/50">تماس با ما</h3>
+          <ul className="space-y-2 font-latin text-[20px] tracking-wide">
+            {phones.slice(0, 4).map((phone) => (
+              <li key={phone.value}>
+                <a href={phone.href} className="hover:text-brand" dir="ltr">
+                  {phone.value}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </Container>
+
+      <div className="border-t border-white/10 bg-black/30">
+        <Container className="flex flex-col gap-2 py-4 text-[12px] text-white/45 sm:flex-row sm:items-center sm:justify-between">
+          <p>© {new Date().getFullYear()} {site.name}. تمامی حقوق محفوظ است.</p>
+          <p className="font-latin tracking-[0.18em] uppercase">{site.nameEn}</p>
+        </Container>
+      </div>
+    </footer>
+  );
+}
@@ -0,0 +1,177 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { ChevronDown, Menu, UserRound, X } from "lucide-react";
+import { Container } from "@/components/Container";
+import { Placeholder } from "@/components/Placeholder";
+import { HeaderSearch } from "@/components/layout/HeaderSearch";
+import { customerPortalUrl } from "@/lib/config";
+import { applianceGroups, categories, navLinks, site } from "@/lib/data";
+
+export function Header() {
+  const [open, setOpen] = useState(false);
+  const [partsOpen, setPartsOpen] = useState(false);
+  const [appliancesOpen, setAppliancesOpen] = useState(false);
+  const [mobileParts, setMobileParts] = useState(false);
+
+  return (
+    <header className="sticky top-0 z-40 border-b border-line bg-white/95 backdrop-blur">
+      <Container className="flex h-[84px] items-center gap-4">
+        <button
+          type="button"
+          className="grid size-10 place-items-center lg:hidden"
+          onClick={() => setOpen(true)}
+          aria-label="منو"
+        >
+          <Menu className="size-5" />
+        </button>
+
+        <Link href="/" className="flex h-14 shrink-0 items-center">
+          <Placeholder src={site.logo} alt={site.name} className="h-14 w-auto object-contain" />
+        </Link>
+
+        <nav className="mx-2 hidden items-center lg:flex">
+          <Link href="/" className="px-3 py-2 text-[14px] hover:text-brand">
+            خانه
+          </Link>
+
+          <div
+            className="relative"
+            onMouseEnter={() => setAppliancesOpen(true)}
+            onMouseLeave={() => setAppliancesOpen(false)}
+          >
+            <button type="button" className="flex items-center gap-1 px-3 py-2 text-[14px] hover:text-brand">
+              لوازم برقی
+              <ChevronDown className="size-3.5" />
+            </button>
+            {appliancesOpen ? (
+              <div className="absolute right-0 top-full w-[560px] border border-line bg-white p-6 shadow-[0_20px_50px_rgba(0,0,0,0.08)]">
+                <div className="grid grid-cols-2 gap-8">
+                  {applianceGroups.map((group) => (
+                    <div key={group.title}>
+                      <p className="mb-3 border-r-2 border-brand pr-2 text-[13px] font-bold">{group.title}</p>
+                      <ul className="space-y-1.5 text-[13px] text-muted">
+                        {group.items.map((item) => (
+                          <li key={item}>
+                            <Link href="/#parts" className="hover:text-brand">
+                              {item}
+                            </Link>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+          </div>
+
+          <div
+            className="relative"
+            onMouseEnter={() => setPartsOpen(true)}
+            onMouseLeave={() => setPartsOpen(false)}
+          >
+            <Link href="/#parts" className="flex items-center gap-1 px-3 py-2 text-[14px] hover:text-brand">
+              قطعات
+              <ChevronDown className="size-3.5" />
+            </Link>
+            {partsOpen ? (
+              <div className="absolute right-0 top-full w-[720px] border border-line bg-white p-5 shadow-[0_20px_50px_rgba(0,0,0,0.08)]">
+                <div className="grid grid-cols-4 gap-3">
+                  {categories.map((category) => (
+                    <Link key={category.id} href="/#parts" className="group flex items-center gap-2 p-1.5 hover:bg-paper">
+                      <Placeholder
+                        src={category.image}
+                        alt=""
+                        className="size-11 shrink-0 object-cover"
+                      />
+                      <span className="min-w-0">
+                        <span className="block truncate text-[12px] font-medium leading-5 group-hover:text-brand">
+                          {category.title.replace("قطعات ", "")}
+                        </span>
+                        <span className="font-latin block text-[9px] tracking-[0.16em] text-muted uppercase">
+                          {category.english}
+                        </span>
+                      </span>
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+          </div>
+
+          {navLinks
+            .filter((link) => link.href !== "/" && link.href !== "/#parts")
+            .map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className="px-3 py-2 text-[14px] hover:text-brand"
+              >
+                {link.label}
+              </Link>
+            ))}
+        </nav>
+
+        <HeaderSearch className="ms-auto hidden max-w-xs flex-1 md:block" />
+
+        <a
+          href={customerPortalUrl}
+          className="flex items-center gap-2 px-2 py-2 text-[13px] hover:text-brand"
+          aria-label="ورود به حساب کاربری"
+        >
+          <UserRound className="size-5" />
+          <span className="hidden xl:inline">ورود / ثبت‌نام</span>
+        </a>
+      </Container>
+
+      {open ? (
+        <div className="fixed inset-0 z-50 bg-ink/50 lg:hidden" onClick={() => setOpen(false)}>
+          <div
+            className="absolute inset-y-0 right-0 flex w-[min(100%,340px)] flex-col bg-white"
+            onClick={(event) => event.stopPropagation()}
+          >
+            <div className="flex h-[84px] items-center justify-between border-b border-line px-4">
+              <Placeholder src={site.logo} alt={site.name} className="h-12 w-auto object-contain" />
+              <button type="button" onClick={() => setOpen(false)} aria-label="بستن">
+                <X className="size-5" />
+              </button>
+            </div>
+            <div className="flex flex-1 flex-col gap-1 overflow-y-auto p-4 text-[15px]">
+              <HeaderSearch className="mb-3" />
+              {navLinks.map((link) => (
+                <Link key={link.href} href={link.href} className="py-2" onClick={() => setOpen(false)}>
+                  {link.label}
+                </Link>
+              ))}
+              <button
+                type="button"
+                className="flex items-center justify-between py-2"
+                onClick={() => setMobileParts((value) => !value)}
+              >
+                دسته‌بندی قطعات
+                <ChevronDown className={`size-4 transition ${mobileParts ? "rotate-180" : ""}`} />
+              </button>
+              {mobileParts
+                ? categories.map((category) => (
+                    <Link
+                      key={category.id}
+                      href="/#parts"
+                      className="py-1.5 pe-2 text-[13px] text-muted"
+                      onClick={() => setOpen(false)}
+                    >
+                      {category.title}
+                    </Link>
+                  ))
+                : null}
+              <a href={customerPortalUrl} className="mt-4 rounded-xl bg-brand px-4 py-3 text-center text-white">
+                ورود / ثبت‌نام
+              </a>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </header>
+  );
+}
@@ -0,0 +1,25 @@
+"use client";
+
+import { FormEvent } from "react";
+import { Search } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+export function HeaderSearch({ className = "" }: { className?: string }) {
+  const router = useRouter();
+
+  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    router.push("/#parts");
+  };
+
+  return (
+    <form onSubmit={onSubmit} className={`relative ${className}`}>
+      <input
+        name="q"
+        placeholder="جستجوی قطعه..."
+        className="h-11 w-full rounded-xl bg-paper pe-4 ps-10 text-[13px] outline-none placeholder:text-muted/70 focus:bg-white focus:ring-1 focus:ring-brand"
+      />
+      <Search className="pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted" />
+    </form>
+  );
+}
@@ -0,0 +1,28 @@
+import { GlassBox } from "@/components/GlassBox";
+import { Placeholder } from "@/components/Placeholder";
+import { Container } from "@/components/Container";
+
+export function PageHero({
+  kicker,
+  title,
+  image,
+}: {
+  kicker: string;
+  title: string;
+  image: string;
+}) {
+  return (
+    <section className="relative h-[42vh] min-h-[280px] overflow-hidden bg-ink">
+      <Placeholder src={image} alt="" className="absolute inset-0 h-full w-full object-cover" />
+      <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-black/10" />
+      <div className="absolute inset-x-0 bottom-0">
+        <Container className="px-4 sm:px-6">
+          <GlassBox frostSrc={image} className="relative mb-6 inline-block max-w-lg px-8 py-7">
+            <p className="section-kicker">{kicker}</p>
+            <h1 className="mt-2 text-3xl font-extrabold sm:text-5xl">{title}</h1>
+          </GlassBox>
+        </Container>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,38 @@
+import { Phone, Send } from "lucide-react";
+import { Container } from "@/components/Container";
+import { phones, site } from "@/lib/data";
+
+export function TopBar() {
+  const primary = phones[0];
+  const landline = phones[2];
+
+  return (
+    <div className="bg-ink text-white">
+      <Container className="flex h-11 items-center justify-between gap-4 text-[12px]">
+        <p className="truncate">
+          <span className="text-brand">بورس قطعات لوازم خانگی</span>
+          <span className="mx-2 text-white/30">|</span>
+          <span className="text-white/70">قم · خرد و عمده · تعمیرگاه</span>
+        </p>
+        <div className="flex items-center gap-4">
+          <a href={primary.href} className="hidden items-center gap-1.5 font-latin hover:text-brand sm:flex" dir="ltr">
+            <Phone className="size-3.5" />
+            {primary.value}
+          </a>
+          <a href={landline.href} className="hidden font-latin hover:text-brand md:flex" dir="ltr">
+            {landline.value}
+          </a>
+          <a
+            href={site.telegram}
+            target="_blank"
+            rel="noreferrer"
+            className="flex items-center gap-1.5 hover:text-brand"
+          >
+            <Send className="size-3.5" />
+            تلگرام
+          </a>
+        </div>
+      </Container>
+    </div>
+  );
+}