Add Arjmand Pharmacy Next.js homepage.

Initial RTL storefront with header, slider, product sections, and local image assets. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-16 17:15:14 +03:30
commit cd2f9dfc9d
80 changed files with 8604 additions and 0 deletions
@@ -0,0 +1,13 @@
+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,12 @@
+type PlaceholderProps = {
+  src: string;
+  alt?: string;
+  className?: string;
+};
+
+export function Placeholder({ src, alt = "", className }: PlaceholderProps) {
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img src={src} alt={alt} className={className} />
+  );
+}
@@ -0,0 +1,34 @@
+import { Container } from "@/components/Container";
+import { Placeholder } from "@/components/Placeholder";
+import { about } from "@/lib/data";
+
+export function AboutDoctor() {
+  return (
+    <section id="about" className="pt-10">
+      <Container>
+        <div className="grid items-center gap-8 overflow-hidden rounded-2xl bg-white p-5 sm:p-8 lg:grid-cols-[0.9fr_1.1fr]">
+          <div className="overflow-hidden rounded-2xl bg-sky">
+            <Placeholder src="/placeholders/doctor.svg" className="aspect-[4/5] w-full object-cover lg:aspect-[4/4.4]" />
+          </div>
+          <div>
+            <p className="text-[13px] font-medium text-primary">{about.subtitle}</p>
+            <h2 className="mt-2 text-[22px] font-bold text-navy">{about.title}</h2>
+            {about.body.map((paragraph) => (
+              <p key={paragraph} className="mt-4 text-[14px] leading-8 text-muted">
+                {paragraph}
+              </p>
+            ))}
+            <div className="mt-7 grid grid-cols-3 gap-3">
+              {about.stats.map((stat) => (
+                <div key={stat.label} className="rounded-xl bg-sky px-3 py-4 text-center">
+                  <p className="font-latin text-[18px] font-bold text-navy">{stat.value}</p>
+                  <p className="mt-1 text-[12px] text-muted">{stat.label}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}
@@ -0,0 +1,21 @@
+import Link from "next/link";
+import { Container } from "@/components/Container";
+import { Placeholder } from "@/components/Placeholder";
+
+type Banner = { id: string; image: string; href: string };
+
+export function BannerRow({ banners, columns }: { banners: Banner[]; columns: 2 | 3 }) {
+  return (
+    <section className="pt-8">
+      <Container>
+        <div className={`grid gap-3 ${columns === 3 ? "sm:grid-cols-3" : "sm:grid-cols-2"}`}>
+          {banners.map((banner) => (
+            <Link key={banner.id} href={banner.href} className="overflow-hidden rounded-xl bg-sky">
+              <Placeholder src={banner.image} className="h-[100px] w-full object-cover sm:h-[118px]" />
+            </Link>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}
@@ -0,0 +1,59 @@
+"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 { blogs } from "@/lib/data";
+
+export function BlogCarousel() {
+  const scroller = useRef<HTMLDivElement>(null);
+
+  return (
+    <section id="blog" className="pt-10">
+      <Container>
+        <div className="mb-4 flex items-center justify-between">
+          <div>
+            <h2 className="text-[18px] font-bold text-navy">آخرین مطالب مجله سلامت</h2>
+            <p className="mt-1 text-[13px] text-muted">نکته‌های کاربردی از داروسازان داروخانه</p>
+          </div>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={() => scroller.current?.scrollBy({ left: 320, behavior: "smooth" })}
+              className="grid size-9 place-items-center rounded-full border border-line bg-white"
+              aria-label="قبلی"
+            >
+              <ChevronRight className="size-4" />
+            </button>
+            <button
+              type="button"
+              onClick={() => scroller.current?.scrollBy({ left: -320, behavior: "smooth" })}
+              className="grid size-9 place-items-center rounded-full border border-line bg-white"
+              aria-label="بعدی"
+            >
+              <ChevronLeft className="size-4" />
+            </button>
+          </div>
+        </div>
+        <div ref={scroller} className="no-scrollbar flex snap-x gap-4 overflow-x-auto">
+          {blogs.map((post) => (
+            <article key={post.id} className="w-[280px] shrink-0 snap-start overflow-hidden rounded-2xl bg-white sm:w-[320px]">
+              <Link href="#" className="block overflow-hidden bg-sky">
+                <Placeholder src={post.image} className="aspect-[16/10] w-full object-cover" />
+              </Link>
+              <div className="p-4">
+                <p className="text-[12px] text-muted">{post.date}</p>
+                <h3 className="mt-2 text-[14px] font-bold leading-7 text-navy">
+                  <Link href="#">{post.title}</Link>
+                </h3>
+                <p className="mt-2 line-clamp-2 text-[12.5px] leading-6 text-muted">{post.excerpt}</p>
+              </div>
+            </article>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}
@@ -0,0 +1,22 @@
+import { Container } from "@/components/Container";
+import { faqs } from "@/lib/data";
+
+export function FaqPreview() {
+  return (
+    <section id="faq" className="pt-10">
+      <Container>
+        <h2 className="mb-4 text-[18px] font-bold text-navy">سوالات متداول</h2>
+        <div className="space-y-3">
+          {faqs.map((item) => (
+            <details key={item.q} className="rounded-2xl bg-white px-5 py-4">
+              <summary className="cursor-pointer list-none text-[14px] font-bold text-navy">
+                {item.q}
+              </summary>
+              <p className="mt-3 text-[13px] leading-7 text-muted">{item.a}</p>
+            </details>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}
@@ -0,0 +1,35 @@
+import Link from "next/link";
+import { Container } from "@/components/Container";
+import { Placeholder } from "@/components/Placeholder";
+import { categories } from "@/lib/data";
+
+export function FeaturedCategories() {
+  return (
+    <section id="categories" className="pt-10">
+      <Container>
+        <div className="mb-5 flex items-end justify-between">
+          <div>
+            <h2 className="text-[18px] font-bold text-navy">دسته‌بندی‌های منتخب</h2>
+            <p className="mt-1 text-[13px] text-muted">خرید سریع از دسته‌های پرمخاطب داروخانه</p>
+          </div>
+        </div>
+        <div className="grid grid-cols-4 gap-3 md:grid-cols-8">
+          {categories.map((category) => (
+            <Link
+              key={category.id}
+              href={category.href}
+              className="group flex flex-col items-center gap-2 rounded-2xl bg-white p-3 text-center transition hover:-translate-y-0.5"
+            >
+              <span className="grid size-[72px] place-items-center overflow-hidden rounded-2xl bg-sky sm:size-[84px]">
+                <Placeholder src={category.image} className="size-full object-cover" />
+              </span>
+              <span className="text-[12px] font-medium text-ink group-hover:text-primary sm:text-[13px]">
+                {category.title}
+              </span>
+            </Link>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}
@@ -0,0 +1,85 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Container } from "@/components/Container";
+import { Placeholder } from "@/components/Placeholder";
+import { heroBanners } from "@/lib/data";
+import type { Slide } from "@/lib/media";
+
+export function Hero({ slides }: { slides: Slide[] }) {
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    if (slides.length <= 1) return;
+    const timer = setInterval(() => {
+      setIndex((current) => (current + 1) % slides.length);
+    }, 5000);
+    return () => clearInterval(timer);
+  }, [slides.length]);
+
+  const go = (direction: number) => {
+    if (slides.length <= 1) return;
+    setIndex((current) => (current + direction + slides.length) % slides.length);
+  };
+
+  return (
+    <section className="pt-5">
+      <Container>
+        <div className="relative overflow-hidden rounded-2xl bg-sky">
+          <div className="relative aspect-[16/6] sm:aspect-[16/5.2]">
+            {slides.map((slide, i) => (
+              <Link
+                key={slide.id}
+                href={slide.href}
+                className={`absolute inset-0 transition-opacity duration-500 ${i === index ? "opacity-100" : "pointer-events-none opacity-0"}`}
+              >
+                <Placeholder src={slide.image} className="h-full w-full object-cover" />
+              </Link>
+            ))}
+          </div>
+          {slides.length > 1 ? (
+            <>
+              <button
+                type="button"
+                onClick={() => go(-1)}
+                className="absolute top-1/2 right-3 grid size-9 -translate-y-1/2 place-items-center rounded-full bg-white/90 text-navy"
+                aria-label="اسلاید قبلی"
+              >
+                <ChevronRight className="size-5" />
+              </button>
+              <button
+                type="button"
+                onClick={() => go(1)}
+                className="absolute top-1/2 left-3 grid size-9 -translate-y-1/2 place-items-center rounded-full bg-white/90 text-navy"
+                aria-label="اسلاید بعدی"
+              >
+                <ChevronLeft className="size-5" />
+              </button>
+              <div className="absolute bottom-3 left-1/2 flex -translate-x-1/2 gap-1.5">
+                {slides.map((slide, i) => (
+                  <button
+                    key={slide.id}
+                    type="button"
+                    onClick={() => setIndex(i)}
+                    className={`h-1.5 rounded-full transition-all ${i === index ? "w-6 bg-primary" : "w-2 bg-white/80"}`}
+                    aria-label={`اسلاید ${i + 1}`}
+                  />
+                ))}
+              </div>
+            </>
+          ) : null}
+        </div>
+
+        <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
+          {heroBanners.map((banner) => (
+            <Link key={banner.id} href={banner.href} className="overflow-hidden rounded-xl bg-sky">
+              <Placeholder src={banner.image} className="h-[92px] w-full object-cover sm:h-[110px]" />
+            </Link>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}
@@ -0,0 +1,82 @@
+"use client";
+
+import { useRef } from "react";
+import Link from "next/link";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Container } from "@/components/Container";
+import { ProductCard } from "@/components/ui/ProductCard";
+import type { Product } from "@/lib/data";
+
+type Props = {
+  id?: string;
+  title: string;
+  subtitle?: string;
+  href?: string;
+  products: Product[];
+  accent?: "default" | "sale";
+};
+
+export function ProductCarousel({
+  id,
+  title,
+  subtitle,
+  href = "#",
+  products,
+  accent = "default",
+}: Props) {
+  const scroller = useRef<HTMLDivElement>(null);
+
+  const scrollBy = (dir: number) => {
+    scroller.current?.scrollBy({ left: dir * -280, behavior: "smooth" });
+  };
+
+  return (
+    <section id={id} className="pt-10">
+      <Container>
+        <div
+          className={`rounded-2xl p-4 sm:p-5 ${accent === "sale" ? "bg-[#fff1f4]" : "bg-transparent"}`}
+        >
+          <div className="mb-4 flex items-center justify-between gap-3">
+            <div>
+              <h2 className={`text-[18px] font-bold ${accent === "sale" ? "text-sale" : "text-navy"}`}>
+                {title}
+              </h2>
+              {subtitle ? <p className="mt-1 text-[13px] text-muted">{subtitle}</p> : null}
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={() => scrollBy(-1)}
+                className="grid size-9 place-items-center rounded-full border border-line bg-white text-navy"
+                aria-label="قبلی"
+              >
+                <ChevronRight className="size-4" />
+              </button>
+              <button
+                type="button"
+                onClick={() => scrollBy(1)}
+                className="grid size-9 place-items-center rounded-full border border-line bg-white text-navy"
+                aria-label="بعدی"
+              >
+                <ChevronLeft className="size-4" />
+              </button>
+              <Link href={href} className="hidden text-[13px] text-primary sm:block">
+                مشاهده همه
+              </Link>
+            </div>
+          </div>
+          <div
+            ref={scroller}
+            className="no-scrollbar flex snap-x snap-mandatory gap-3 overflow-x-auto pb-1"
+          >
+            {products.map((product) => (
+              <div key={product.id} className="w-[210px] shrink-0 snap-start sm:w-[230px]">
+                <ProductCard product={product} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}
@@ -0,0 +1,37 @@
+import { Headphones, RefreshCw, ShieldCheck, Truck } from "lucide-react";
+import { Container } from "@/components/Container";
+import { siteFeatures } from "@/lib/data";
+
+const icons = {
+  headset: Headphones,
+  shield: ShieldCheck,
+  refresh: RefreshCw,
+  truck: Truck,
+};
+
+export function SiteFeatures() {
+  return (
+    <section className="pt-8">
+      <Container>
+        <div className="overflow-hidden rounded-2xl border border-line bg-white">
+          <div className="grid grid-cols-2 divide-x divide-x-reverse divide-line lg:grid-cols-4">
+            {siteFeatures.map((feature) => {
+              const Icon = icons[feature.icon];
+              return (
+                <div key={feature.title} className="flex items-center gap-3 px-5 py-5">
+                  <span className="grid size-12 shrink-0 place-items-center rounded-xl bg-sky text-primary">
+                    <Icon className="size-6" strokeWidth={1.75} />
+                  </span>
+                  <div>
+                    <h3 className="text-[13.5px] font-bold text-navy">{feature.title}</h3>
+                    <p className="mt-0.5 text-[12px] leading-5 text-muted">{feature.text}</p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}
@@ -0,0 +1,80 @@
+import Link from "next/link";
+import { Instagram, MapPin, Phone, Send } from "lucide-react";
+import { Container } from "@/components/Container";
+import { Placeholder } from "@/components/Placeholder";
+import { footerLinks, site } from "@/lib/data";
+
+export function Footer({ logoSrc }: { logoSrc: string }) {
+  return (
+    <footer id="contact" className="mt-6 bg-navy-deep text-white">
+      <Container className="grid gap-10 py-12 sm:grid-cols-2 lg:grid-cols-4">
+        <div>
+          <Placeholder src={logoSrc} alt={site.name} className="h-10 w-auto object-contain" />
+          <p className="mt-4 text-[13px] leading-7 text-white/75">{site.tagline}. مشاوره دارویی، اصالت کالا و ارسال سریع از سالاریه قم.</p>
+          <div className="mt-5 flex gap-2">
+            <a href={site.instagram} className="grid size-9 place-items-center rounded-lg bg-white/10" aria-label="اینستاگرام">
+              <Instagram className="size-4" />
+            </a>
+            <a href={site.eitaa} className="grid size-9 place-items-center rounded-lg bg-white/10" aria-label="ایتا">
+              <Send className="size-4" />
+            </a>
+            <a href={site.whatsapp} className="grid size-9 place-items-center rounded-lg bg-white/10" aria-label="واتساپ">
+              <Phone className="size-4" />
+            </a>
+          </div>
+        </div>
+
+        <div>
+          <h3 className="mb-4 text-[14px] font-bold">فروشگاه</h3>
+          <ul className="space-y-2.5 text-[13px] text-white/75">
+            {footerLinks.shop.map((item) => (
+              <li key={item.title}>
+                <Link href={item.href} className="hover:text-white">
+                  {item.title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div>
+          <h3 className="mb-4 text-[14px] font-bold">صفحات</h3>
+          <ul className="space-y-2.5 text-[13px] text-white/75">
+            {footerLinks.pages.map((item) => (
+              <li key={item.title}>
+                <Link href={item.href} className="hover:text-white">
+                  {item.title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div>
+          <h3 className="mb-4 text-[14px] font-bold">تماس با ما</h3>
+          <p className="flex items-start gap-2 text-[13px] leading-7 text-white/75">
+            <MapPin className="mt-1 size-4 shrink-0" />
+            {site.address}
+          </p>
+          <a href={site.phoneHref} className="font-latin mt-3 flex items-center gap-2 text-[13px] text-white/90" dir="ltr">
+            <Phone className="size-4" />
+            {site.phone}
+          </a>
+          <div className="mt-5 flex gap-3">
+            <span className="overflow-hidden rounded-lg bg-white">
+              <Placeholder src="/placeholders/enamad.svg" className="size-16 object-cover" />
+            </span>
+            <span className="overflow-hidden rounded-lg bg-white">
+              <Placeholder src="/placeholders/samandehi.svg" className="size-16 object-cover" />
+            </span>
+          </div>
+        </div>
+      </Container>
+      <div className="border-t border-white/10">
+        <Container className="flex h-12 items-center justify-center text-[12px] text-white/55">
+          کلیه حقوق این فروشگاه متعلق به {site.name} است.
+        </Container>
+      </div>
+    </footer>
+  );
+}
@@ -0,0 +1,157 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import {
+  ChevronDown,
+  Heart,
+  Menu,
+  Search,
+  ShoppingBag,
+  UserRound,
+  X,
+} from "lucide-react";
+import { Container } from "@/components/Container";
+import { Placeholder } from "@/components/Placeholder";
+import { MegaMenu } from "@/components/layout/MegaMenu";
+import { categories, navLinks, site } from "@/lib/data";
+
+export function Header({ logoSrc }: { logoSrc: string }) {
+  const [megaOpen, setMegaOpen] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [mobileCats, setMobileCats] = useState(false);
+
+  return (
+    <header className="sticky top-0 z-40 border-b border-line bg-white">
+      <Container className="flex h-[72px] items-center gap-4">
+        <button
+          type="button"
+          className="grid size-10 place-items-center rounded-xl text-navy lg:hidden"
+          onClick={() => setMobileOpen(true)}
+          aria-label="منو"
+        >
+          <Menu className="size-5" />
+        </button>
+
+        <Link href="/" className="flex h-11 shrink-0 items-center">
+          <Placeholder src={logoSrc} alt={site.name} className="h-11 w-auto object-contain" />
+        </Link>
+
+        <form className="relative hidden min-w-0 flex-1 md:block">
+          <input
+            type="search"
+            placeholder="جستجوی دارو، مکمل و محصولات بهداشتی..."
+            className="h-11 w-full rounded-xl border border-line bg-mist pr-4 pl-11 text-[13px] outline-none transition focus:border-primary focus:bg-white"
+          />
+          <Search className="pointer-events-none absolute top-1/2 left-3.5 size-4 -translate-y-1/2 text-muted" />
+        </form>
+
+        <div className="ms-auto flex items-center gap-1">
+          <Link
+            href="#"
+            className="hidden items-center gap-2 rounded-xl px-3 py-2 text-[13px] text-ink hover:bg-mist lg:flex"
+          >
+            <UserRound className="size-5 text-navy" />
+            ورود / ثبت‌نام
+          </Link>
+          <Link href="#" className="grid size-10 place-items-center rounded-xl hover:bg-mist" aria-label="علاقه‌مندی">
+            <Heart className="size-5 text-navy" />
+          </Link>
+          <Link href="#" className="relative grid size-10 place-items-center rounded-xl hover:bg-mist" aria-label="سبد خرید">
+            <ShoppingBag className="size-5 text-navy" />
+            <span className="absolute top-1.5 left-1.5 grid size-4 place-items-center rounded-full bg-primary text-[10px] text-white">
+              ۰
+            </span>
+          </Link>
+        </div>
+      </Container>
+
+      <div className="hidden border-t border-line lg:block">
+        <Container className="flex h-12 items-center gap-1">
+          <div
+            className="relative"
+            onMouseEnter={() => setMegaOpen(true)}
+            onMouseLeave={() => setMegaOpen(false)}
+          >
+            <button
+              type="button"
+              className="flex h-9 items-center gap-2 rounded-lg bg-navy px-3.5 text-[13px] font-medium text-white"
+            >
+              <Menu className="size-4" />
+              دسته‌بندی‌ها
+              <ChevronDown className={`size-4 transition ${megaOpen ? "rotate-180" : ""}`} />
+            </button>
+            <MegaMenu open={megaOpen} />
+          </div>
+
+          {navLinks.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className="rounded-lg px-3 py-2 text-[13px] text-ink transition hover:bg-sky hover:text-primary"
+            >
+              {link.title}
+            </Link>
+          ))}
+        </Container>
+      </div>
+
+      {mobileOpen && (
+        <div className="fixed inset-0 z-50 lg:hidden">
+          <button
+            type="button"
+            className="absolute inset-0 bg-navy/40"
+            aria-label="بستن"
+            onClick={() => setMobileOpen(false)}
+          />
+          <aside className="absolute inset-y-0 right-0 flex w-[86%] max-w-sm flex-col bg-white">
+            <div className="flex items-center justify-between border-b border-line px-4 py-3">
+              <Placeholder src={logoSrc} alt={site.name} className="h-9 w-auto object-contain" />
+              <button type="button" onClick={() => setMobileOpen(false)} aria-label="بستن">
+                <X className="size-5" />
+              </button>
+            </div>
+            <form className="px-4 pt-4">
+              <input
+                type="search"
+                placeholder="جستجو..."
+                className="h-11 w-full rounded-xl border border-line bg-mist px-3 text-[13px] outline-none"
+              />
+            </form>
+            <nav className="flex-1 overflow-y-auto px-2 py-3">
+              <button
+                type="button"
+                className="flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-right text-[14px] font-medium text-navy"
+                onClick={() => setMobileCats((v) => !v)}
+              >
+                دسته‌بندی‌ها
+                <ChevronDown className={`size-4 ${mobileCats ? "rotate-180" : ""}`} />
+              </button>
+              {mobileCats && (
+                <ul className="mb-2 space-y-1 pr-3">
+                  {categories.map((cat) => (
+                    <li key={cat.id}>
+                      <Link href={cat.href} className="block rounded-lg px-3 py-1.5 text-[13px] text-muted">
+                        {cat.title}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              )}
+              {navLinks.map((link) => (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  className="block rounded-xl px-3 py-2.5 text-[14px]"
+                  onClick={() => setMobileOpen(false)}
+                >
+                  {link.title}
+                </Link>
+              ))}
+            </nav>
+          </aside>
+        </div>
+      )}
+    </header>
+  );
+}
@@ -0,0 +1,41 @@
+"use client";
+
+import Link from "next/link";
+import { categories } from "@/lib/data";
+import { Placeholder } from "@/components/Placeholder";
+
+export function MegaMenu({ open }: { open: boolean }) {
+  if (!open) return null;
+
+  return (
+    <div className="absolute top-full right-0 z-50 mt-2 w-[min(920px,calc(100vw-2rem))] rounded-2xl border border-line bg-white p-5 shadow-[0_16px_40px_rgba(0,38,133,0.12)]">
+      <div className="grid grid-cols-2 gap-5 md:grid-cols-4">
+        {categories.map((category) => (
+          <div key={category.id}>
+            <Link
+              href={category.href}
+              className="mb-3 flex items-center gap-2 text-[13.5px] font-semibold text-navy"
+            >
+              <span className="grid size-9 place-items-center overflow-hidden rounded-xl bg-sky">
+                <Placeholder src={category.image} className="size-full object-cover" />
+              </span>
+              {category.title}
+            </Link>
+            <ul className="space-y-1.5 pr-1">
+              {category.children.map((child) => (
+                <li key={child.title}>
+                  <Link
+                    href={child.href}
+                    className="block rounded-lg px-2 py-1 text-[12.5px] text-muted transition hover:bg-sky hover:text-primary"
+                  >
+                    {child.title}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,31 @@
+import { Headphones, MapPin, Truck } from "lucide-react";
+import { Container } from "@/components/Container";
+import { site } from "@/lib/data";
+
+export function TopBar() {
+  return (
+    <div className="bg-navy text-white">
+      <Container className="flex h-10 items-center justify-between gap-4 text-[12px]">
+        <div className="flex min-w-0 items-center gap-4">
+          <span className="hidden items-center gap-1.5 sm:flex">
+            <Truck className="size-3.5 shrink-0" />
+            ارسال رایگان سفارش‌های بالای ۵۰۰ هزار تومان
+          </span>
+          <span className="flex items-center gap-1.5">
+            <Headphones className="size-3.5 shrink-0" />
+            {site.hours}
+          </span>
+        </div>
+        <div className="flex shrink-0 items-center gap-4">
+          <span className="hidden items-center gap-1.5 md:flex">
+            <MapPin className="size-3.5" />
+            قم، سالاریه
+          </span>
+          <a href={site.phoneHref} className="font-latin tracking-wide" dir="ltr">
+            {site.phone}
+          </a>
+        </div>
+      </Container>
+    </div>
+  );
+}
@@ -0,0 +1,44 @@
+import Link from "next/link";
+import { ShoppingBag } from "lucide-react";
+import { Placeholder } from "@/components/Placeholder";
+import { faDigits, formatPrice } from "@/lib/format";
+import type { Product } from "@/lib/data";
+
+export function ProductCard({ product }: { product: Product }) {
+  return (
+    <article className="group flex h-full flex-col rounded-2xl bg-white p-3">
+      <Link href="#" className="relative overflow-hidden rounded-xl bg-sky">
+        {product.discount ? (
+          <span className="absolute top-2 right-2 z-10 rounded-md bg-sale px-1.5 py-0.5 text-[11px] font-bold text-white">
+            {faDigits(product.discount)}٪
+          </span>
+        ) : null}
+        <Placeholder src={product.image} className="aspect-square w-full object-cover transition group-hover:scale-[1.03]" />
+      </Link>
+      <p className="font-latin mt-3 text-[11px] tracking-wide text-primary">{product.brand}</p>
+      <h3 className="mt-1 line-clamp-2 min-h-[40px] text-[13px] leading-5 text-ink">
+        <Link href="#">{product.title}</Link>
+      </h3>
+      <div className="mt-auto pt-3">
+        {product.oldPrice ? (
+          <p className="text-[11px] text-muted line-through">{formatPrice(product.oldPrice)} تومان</p>
+        ) : (
+          <p className="h-[16px]" />
+        )}
+        <div className="mt-1 flex items-end justify-between gap-2">
+          <p className="text-[14px] font-bold text-navy">
+            {formatPrice(product.price)}
+            <span className="mr-1 text-[11px] font-medium text-muted">تومان</span>
+          </p>
+          <button
+            type="button"
+            className="grid size-9 place-items-center rounded-xl bg-primary text-white transition hover:bg-primary-hover"
+            aria-label="افزودن به سبد خرید"
+          >
+            <ShoppingBag className="size-4" />
+          </button>
+        </div>
+      </div>
+    </article>
+  );
+}