Add Nini Naderi Persian RTL homepage.

Build the kids clothing store landing page with sample content, placeholders, and the purple-cyan-red light theme. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-13 14:04:45 +03:30
parent 4b3d9dede8
commit 78ef438f9d
21 changed files with 1559 additions and 86 deletions
@@ -0,0 +1,109 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import { navLinks } from "@/data/content";
+import { IconBag, IconClose, IconHeart, IconMenu, IconSearch, IconUser } from "./Icons";
+
+export function Header() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <header className="sticky top-0 z-40 border-b border-white/60 bg-white/55 backdrop-blur-xl">
+      <div className="container-nn">
+        <div className="flex h-[72px] items-center gap-3">
+          <button
+            type="button"
+            className="text-ink lg:hidden"
+            onClick={() => setOpen((value) => !value)}
+            aria-label={open ? "بستن منو" : "باز کردن منو"}
+          >
+            {open ? <IconClose /> : <IconMenu />}
+          </button>
+
+          <Link href="/" className="flex items-center gap-2.5">
+            <span className="grid size-11 place-items-center rounded-2xl bg-linear-to-br from-purple-600 via-cyan-500 to-rose-500 text-white shadow-card">
+              <span className="font-display text-lg leading-none">NN</span>
+            </span>
+            <span className="leading-tight">
+              <span className="font-display block text-[15px] text-purple-700">Nini Naderi</span>
+              <span className="block text-sm font-bold text-ink">نینی نادری</span>
+            </span>
+          </Link>
+
+          <form className="relative mx-auto hidden min-w-0 flex-1 max-w-xl md:block">
+            <input
+              type="search"
+              placeholder="جستجوی لباس نوزاد، دخترانه، یگانه..."
+              className="h-11 w-full rounded-full border border-line bg-purple-50/60 pr-4 pl-11 text-sm outline-none transition focus:border-purple-500 focus:bg-white"
+            />
+            <span className="pointer-events-none absolute top-1/2 left-3.5 -translate-y-1/2 text-muted">
+              <IconSearch />
+            </span>
+          </form>
+
+          <div className="ms-auto flex items-center gap-1 sm:gap-2">
+            <a href="#" className="hidden items-center gap-1.5 rounded-full px-3 py-2 text-sm text-ink hover:bg-purple-50 lg:inline-flex">
+              <IconUser />
+              ورود
+            </a>
+            <a href="#" className="relative grid size-10 place-items-center rounded-full text-ink hover:bg-purple-50" aria-label="علاقه‌مندی">
+              <IconHeart />
+              <span className="absolute top-1 left-1 grid size-4 place-items-center rounded-full bg-rose-500 text-[10px] text-white">
+                ۲
+              </span>
+            </a>
+            <a href="#" className="relative grid size-10 place-items-center rounded-full text-ink hover:bg-purple-50" aria-label="سبد خرید">
+              <IconBag />
+              <span className="absolute top-1 left-1 grid size-4 place-items-center rounded-full bg-cyan-500 text-[10px] text-white">
+                ۳
+              </span>
+            </a>
+          </div>
+        </div>
+
+        <form className="pb-3 md:hidden">
+          <div className="relative">
+            <input
+              type="search"
+              placeholder="جستجو در نینی نادری"
+              className="h-10 w-full rounded-full border border-line bg-purple-50/60 pr-4 pl-10 text-sm outline-none"
+            />
+            <span className="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-muted">
+              <IconSearch className="size-4" />
+            </span>
+          </div>
+        </form>
+
+        <nav className="hidden h-12 items-center gap-6 text-sm font-medium text-ink lg:flex">
+          {navLinks.map((link) => (
+            <a
+              key={link.label}
+              href={link.href}
+              className="relative py-3 transition hover:text-purple-700 after:absolute after:right-0 after:bottom-1 after:h-0.5 after:w-0 after:bg-linear-to-l after:from-purple-600 after:to-cyan-500 after:transition-all hover:after:w-full"
+            >
+              {link.label}
+            </a>
+          ))}
+        </nav>
+      </div>
+
+      {open ? (
+        <div className="border-t border-line bg-white lg:hidden">
+          <nav className="container-nn flex flex-col py-2 text-sm">
+            {navLinks.map((link) => (
+              <a
+                key={link.label}
+                href={link.href}
+                onClick={() => setOpen(false)}
+                className="border-b border-line/70 py-3 text-ink"
+              >
+                {link.label}
+              </a>
+            ))}
+          </nav>
+        </div>
+      ) : null}
+    </header>
+  );
+}