Merge pull request #150 from anasfarock/update/#12-improved-the-hover-effect-of-main-header

updated/#12 - added hover effect on buttons in the main header

Author: Alexandrbig1

src/components/Header/MainHeader.jsx

@@ -10,7 +10,7 @@ import {
   ShoppingCart,
 } from 'lucide-react';
 import SearchBox from '../Search/SearchBox';
-import TopHeader from "../TopHeader/TopHeader";
+import TopHeader from '../TopHeader/TopHeader';
 import ShopMenu from '../ShopMenu';
 
 export default function Header() {
@@ -46,30 +46,45 @@ export default function Header() {
                 <img
                   src="/images/official-logo-core-x.svg"
                   alt="CoreX Logo"
-                  className="h-8 w-auto"
+                  className="h-10 w-auto"
                 />
               </Link>
             </div>
 
             {/* Center: Desktop Navigation */}
-            <nav className="hidden md:flex space-x-8 items-center">
+            <nav className="hidden md:flex space-x-6 items-center">
               <div className="relative">
-                <ShopMenu 
+                <ShopMenu
                   shopOpen={shopOpen}
                   setShopOpen={setShopOpen}
                   onShopClick={handleShopClick}
                   onShopKeyDown={handleShopButtonKeyDown}
                 />
               </div>
-              
-              <Link to="/garage-sale" className="text-gray-700 hover:text-black font-medium">
+              {/* Garage Sale */}
+              <Link
+                to="/garage-sale"
+                className="px-5 py-2 rounded-full font-medium text-gray-700 transition-all duration-300 hover:bg-[#0D1B2A] hover:text-white"
+              >
                 GARAGE SALE
               </Link>
-              <Link to="/products" className="text-gray-700 hover:text-black font-medium">
+
+              {/* All Products */}
+              <Link
+                to="/products"
+                className="px-5 py-2 rounded-full font-medium text-gray-700 transition-all duration-300 hover:bg-[#0D1B2A] hover:text-white"
+              >
                 ALL PRODUCTS
               </Link>
-              <Link to="/about-corex" className="text-gray-700 hover:text-black font-medium">
-                ABOUT COREX
+              {/* About CoreX */}
+              <Link
+                to="/about-corex"
+                className="group px-5 py-2 rounded-full font-medium text-gray-700 transition-all duration-300 hover:bg-[#0D1B2A] hover:text-white"
+              >
+                ABOUT CORE
+                <span className="text-red-600 group-hover:text-red-600 transition-colors duration-300">
+                  X
+                </span>
               </Link>
             </nav>
 
@@ -92,15 +107,15 @@ export default function Header() {
                 >
                   <Heart className="h-5 w-5" />
                 </a>
-                
+
                 <Link
                   to="/login"
                   aria-label="User Account"
                   className="transform transition-transform duration-200 hover:scale-110 hover:text-black"
                 >
                   <User className="h-5 w-5" />
                 </Link>
-                
+
                 <a
                   href="#"
                   aria-label="Shopping Cart"
@@ -122,7 +137,7 @@ export default function Header() {
                 <button
                   onClick={() => setMobileOpen(!mobileOpen)}
                   className="text-gray-700 hover:text-black"
-                  aria-label={mobileOpen ? "Close menu" : "Open menu"}
+                  aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
                 >
                   {mobileOpen ? (
                     <X className="h-6 w-6" />
@@ -171,14 +186,14 @@ export default function Header() {
               >
                 Garage Sale
               </Link>
-              
+
               <Link
                 to="/products"
                 className="text-gray-700 hover:text-black transition"
               >
                 All Products
               </Link>
-              
+
               <Link
                 to="/about-corex"
                 className="text-gray-700 hover:text-black transition"
@@ -193,20 +208,24 @@ export default function Header() {
       {/* Overlay for Mobile Menu */}
       <div
         className={`fixed inset-0 bg-black/30 backdrop-blur-sm transition-opacity duration-300 ${
-          mobileOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
+          mobileOpen
+            ? 'opacity-100 pointer-events-auto'
+            : 'opacity-0 pointer-events-none'
         } z-[998]`}
       />
 
       {/* Mobile Menu Drawer */}
       <div
         ref={mobileMenuRef}
         className={`fixed top-0 right-0 w-full sm:w-[280px] h-full bg-white shadow-2xl border-l border-gray-200 z-[999] transform transition-all duration-300 ease-in-out ${
-          mobileOpen ? "translate-x-0 scale-100" : "translate-x-full scale-95"
+          mobileOpen ? 'translate-x-0 scale-100' : 'translate-x-full scale-95'
         } flex flex-col`}
       >
         {/* Mobile Menu Header */}
         <div className="flex justify-between items-center px-6 py-4 border-b border-gray-200">
-          <h2 className="font-bold text-lg text-[#023E8A] tracking-wide">MENU</h2>
+          <h2 className="font-bold text-lg text-[#023E8A] tracking-wide">
+            MENU
+          </h2>
           <button
             onClick={() => setMobileOpen(false)}
             className="p-2 rounded-full hover:bg-gray-100 transition-colors duration-200 cursor-pointer"
@@ -226,7 +245,7 @@ export default function Header() {
               Shop
               <ChevronDown
                 className={`h-4 w-4 transition-transform duration-200 ${
-                  shopOpen ? "rotate-180" : ""
+                  shopOpen ? 'rotate-180' : ''
                 }`}
               />
             </button>
@@ -311,12 +330,7 @@ export default function Header() {
       </div>
 
       {/* Search Drawer */}
-      {search && (
-        <SearchBox
-          isOpen={search}
-          onClose={() => setSearch(false)}
-        />
-      )}
+      {search && <SearchBox isOpen={search} onClose={() => setSearch(false)} />}
     </>
   );
-}
+}