Add replaceable images, category mega menu, and contact pages.

Give every placeholder a real img src, add FAQ and contact sections, and put categories first in the header.

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

src/components/Header.tsx

@@ -2,11 +2,21 @@
 
 import Link from "next/link";
 import { useState } from "react";
-import { navLinks } from "@/data/content";
-import { IconBag, IconClose, IconHeart, IconMenu, IconSearch, IconUser } from "./Icons";
+import { categories, navLinks } from "@/data/content";
+import { toFaDigits } from "@/lib/format";
+import { IconBag, IconChevronDown, IconClose, IconHeart, IconMenu, IconSearch, IconUser } from "./Icons";
+import { Placeholder } from "./Placeholder";
 
 export function Header() {
   const [open, setOpen] = useState(false);
+  const [mega, setMega] = useState(false);
+  const [mobileCats, setMobileCats] = useState(false);
+
+  const closeAll = () => {
+    setOpen(false);
+    setMega(false);
+    setMobileCats(false);
+  };
 
   return (
     <header className="sticky top-0 z-40 border-b border-white/60 bg-white/55 backdrop-blur-xl">
@@ -75,7 +85,23 @@ export function Header() {
           </div>
         </form>
 
-        <nav className="hidden h-12 items-center gap-6 text-sm font-medium text-ink lg:flex">
+        <nav className="relative hidden h-12 items-center gap-6 text-sm font-medium text-ink lg:flex">
+          <div
+            className="h-full"
+            onMouseEnter={() => setMega(true)}
+            onMouseLeave={() => setMega(false)}
+          >
+            <button
+              type="button"
+              className="relative flex h-full items-center gap-1 py-3 transition hover:text-purple-700"
+              aria-expanded={mega}
+              onClick={() => setMega((value) => !value)}
+            >
+              دسته‌بندی‌ها
+              <IconChevronDown className={`size-4 transition ${mega ? "rotate-180" : ""}`} />
+            </button>
+            {mega ? <MegaMenu onPick={closeAll} /> : null}
+          </div>
           {navLinks.map((link) => (
             <a
               key={link.label}
@@ -91,11 +117,33 @@ export function Header() {
       {open ? (
         <div className="border-t border-line bg-white lg:hidden">
           <nav className="container-nn flex flex-col py-2 text-sm">
+            <button
+              type="button"
+              className="flex items-center justify-between border-b border-line/70 py-3 text-ink"
+              onClick={() => setMobileCats((value) => !value)}
+            >
+              دسته‌بندی‌ها
+              <IconChevronDown className={`size-4 transition ${mobileCats ? "rotate-180" : ""}`} />
+            </button>
+            {mobileCats ? (
+              <div className="grid grid-cols-2 gap-2 border-b border-line/70 py-3">
+                {categories.map((category) => (
+                  <a
+                    key={category.id}
+                    href="#categories"
+                    onClick={closeAll}
+                    className="rounded-2xl bg-purple-50/70 px-3 py-2 text-xs font-bold"
+                  >
+                    {category.title}
+                  </a>
+                ))}
+              </div>
+            ) : null}
             {navLinks.map((link) => (
               <a
                 key={link.label}
                 href={link.href}
-                onClick={() => setOpen(false)}
+                onClick={closeAll}
                 className="border-b border-line/70 py-3 text-ink"
               >
                 {link.label}
@@ -107,3 +155,41 @@ export function Header() {
     </header>
   );
 }
+
+function MegaMenu({ onPick }: { onPick: () => void }) {
+  return (
+    <div className="absolute top-full right-0 z-50 w-[min(56rem,calc(100vw-2rem))] pt-2">
+      <div className="glass-box rounded-3xl p-5 shadow-card">
+        <div className="mb-4 flex items-end justify-between">
+          <div>
+            <p className="font-display text-xs text-cyan-600">Categories</p>
+            <p className="text-base font-bold">خرید بر اساس دسته</p>
+          </div>
+          <a href="#categories" onClick={onPick} className="text-xs font-medium text-purple-700">
+            مشاهده همه
+          </a>
+        </div>
+        <div className="grid grid-cols-4 gap-3">
+          {categories.map((category) => (
+            <a
+              key={category.id}
+              href="#categories"
+              onClick={onPick}
+              className="rounded-2xl bg-white/70 p-2 text-center transition hover:-translate-y-0.5 hover:bg-white"
+            >
+              <Placeholder
+                src={category.image}
+                alt={category.title}
+                width={160}
+                height={160}
+                rounded="rounded-xl"
+              />
+              <p className="mt-2 text-xs font-bold text-ink">{category.title}</p>
+              <p className="text-[11px] text-muted">{toFaDigits(category.count)} مدل</p>
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}