fix: Update navbar

Author: 01Barthez

src/components/custom/TopSeller.tsx

@@ -17,7 +17,7 @@ const TopSeller: React.FC = () => {
       >
         <SwiperSlide>
           <CardTopSeller
-            img="/src/assets/images/Macbook.svg"
+            img="/src/assets/images/Macboo.svg"
             name="Popular Products"
             description="iPad combines a magnificent 10.2-inch Retina display, incredible performance, multitasking and ease of use."
             url="/products/category/news"

src/components/custom/utils/NewsletterForm.tsx

@@ -56,7 +56,7 @@ const NewsletterForm: React.FC = () => {
                           minLength={5}
                           maxLength={75}
                           autoComplete="off"
-                          className="w-full max-w-[50rem] md:max-w-full px-2 md:px-4 py-1 md:py-2 border-none focus:border-none focus:outline-none focus-visible:outline-none focus-visible:border-none text-sm md:text-base placeholder:text-sm md:placeholder:text-base"
+                          className="w-full max-w-[50rem] md:max-w-full text-footer/95 px-2 md:px-4 py-1 md:py-2 border-none focus:border-none focus:outline-none focus-visible:outline-none focus-visible:border-none text-sm md:text-base placeholder:text-sm md:placeholder:text-base"
                           {...field}
                         />
                       </FormControl>

src/layouts/navbar/Navbar.tsx

@@ -4,7 +4,7 @@ import DownNavbar from './DownNavbar'
 
 const Navbar: React.FC = () => {
   return (
-    <nav className='sticky top-0 left-0 z-50'>
+    <nav className='sticky top-0 left-0 z-50 border-b border-foreground/50 md:border-none'>
       <UpNavbar />
       <DownNavbar />
     </nav>

src/layouts/navbar/UpNavbar.tsx

@@ -102,9 +102,9 @@ const UpNavbar: React.FC = () => {
         </div>
 
         {/* Menu button, for small screens */}
-        <div className="block md:hidden">
-          <Button className="w-auto h-auto shadow-none border-none text-xl p-3 hover:bg-foreground/10 rounded-full duration-200">
-            <AiOutlineMenu />
+        <div className="block md:hidden group">
+          <Button className="w-auto h-auto shadow-none border-none p-2.5 rounded-lg bg-transparent group-hover:bg-foreground/15 text-foreground/95 group-hover:text-foreground duration-200">
+            <AiOutlineMenu size={32}/>
           </Button>
         </div>
       </div>

src/pages/home/Home.tsx

@@ -23,15 +23,15 @@ const Home: React.FC = () => {
             {/* App Comoments */}
             <>
                 <Hero />
-                 <BestProducts />
-               <BrowseByCategory />
+                <BestProducts />
+                <BrowseByCategory />
                 <SomeProducts />
                 <TopSeller />
                 <DiscountProduct />
                 <HomeBanner />
                 <Testimonies />
                 <Newsletter />
-                <Benefits/>
+                <Benefits />
             </>
         </>
     )