Make the category mega menu text-only and fully frosted.

Hide page content behind the menu with a near-solid blur panel.

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

src/components/Header.tsx

@@ -5,7 +5,6 @@ import { useState } from "react";
 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);
@@ -19,7 +18,7 @@ export function Header() {
   };
 
   return (
-    <header className="sticky top-0 z-40 border-b border-white/60 bg-white/55 backdrop-blur-xl">
+    <header className="sticky top-0 z-40 border-b border-white/50 bg-white/40 backdrop-blur-2xl">
       <div className="container-nn">
         <div className="flex h-[72px] items-center gap-3">
           <button
@@ -158,8 +157,8 @@ export function 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="absolute top-full right-0 z-50 w-[min(40rem,calc(100vw-2rem))] pt-2">
+      <div className="rounded-3xl border border-white/80 bg-white/95 p-5 shadow-card backdrop-blur-[80px]">
         <div className="mb-4 flex items-end justify-between">
           <div>
             <p className="font-display text-xs text-cyan-600">Categories</p>
@@ -169,23 +168,16 @@ function MegaMenu({ onPick }: { onPick: () => void }) {
             مشاهده همه
           </a>
         </div>
-        <div className="grid grid-cols-4 gap-3">
+        <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
           {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"
+              className="rounded-2xl px-3 py-3 text-right transition hover:bg-white/45"
             >
-              <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>
+              <p className="text-sm font-bold text-ink">{category.title}</p>
+              <p className="mt-1 text-[11px] text-muted">{toFaDigits(category.count)} مدل</p>
             </a>
           ))}
         </div>