responsive home page and layout

app/shared/components/HeaderMenu.tsx

@@ -36,21 +36,21 @@ const HeaderMenu: FC = () => {
   }, [isAllProductsOpen]);
 
   return (
-    <div ref={containerRef} className="relative h-[72px] w-full flex-1 px-[120px]">
-      <div className="flex h-full items-center justify-center gap-8">
+    <div ref={containerRef} className="relative h-14 sm:h-[72px] w-full flex-1 px-4 sm:px-8 lg:px-[120px]">
+      <div className="flex h-full items-center gap-4 sm:gap-6 lg:gap-8 overflow-x-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden lg:justify-center">
         <button
           type="button"
-          className={cn("flex items-center gap-2 font-bold transition-colors", isAllProductsOpen && "text-primary")}
+          className={cn("flex items-center gap-2 font-bold transition-colors shrink-0 text-sm sm:text-base", isAllProductsOpen && "text-primary")}
           onClick={() => setIsAllProductsOpen((open) => !open)}
           aria-expanded={isAllProductsOpen}
           aria-haspopup="true"
         >
-          <HamburgerMenu size={24} color="currentColor" />
+          <HamburgerMenu size={22} color="currentColor" />
           <span>همه محصولات</span>
         </button>
 
         {menuItems.map((item) => (
-          <div key={item} className="font-bold">
+          <div key={item} className="font-bold shrink-0 whitespace-nowrap text-sm sm:text-base">
             {item}
           </div>
         ))}