Initial commit: BRB Store Next.js storefront with Meshkee image slots.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/layout/Footer.tsx

@@ -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>
+  );
+}

components/layout/Header.tsx

@@ -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>
+  );
+}

components/layout/HeaderSearch.tsx

@@ -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>
+  );
+}

components/layout/PageHero.tsx

@@ -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>
+  );
+}

components/layout/TopBar.tsx

@@ -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>
+  );
+}