fix landing

components/LandingPage/CategoriesHero/page.jsx

@@ -54,7 +54,7 @@ const CategoriesHero = () => {
   ];
   return (
     <>
-      <div className="grid xs:grid-cols-2 lg:grid-cols-5 gap-4 xs:px-2 lg:px-20">
+      <div className="grid xs:grid-cols-2 lg:grid-cols-5 gap-4 xs:px-2 lg:px-20 mt-10">
         {categories.map((category, index) => (
           <Link
             href={category.url}

components/LandingPage/HeroSection/page.jsx

@@ -96,23 +96,23 @@ const HeroSection = () => {
             </Link>
           ))}
         </div>
+      </div>
 
-        <div className="absolute xs:bottom-3 md:bottom-10 lg:bottom-4 xl:bottom-[70px] 2xl:bottom-[70px]  left-1/2 transform -translate-x-1/2 flex space-x-2">
+      <div className=" mt-4 px-4">
         {slides.map((e, index) => (
           <button
             key={index}
             onClick={() => goToSlide(index)}
-              className={`rounded-full xs:text-[11px] md:text-sm ${
+            className={`rounded-full xs:text-[11px] md:text-sm mt-3 mx-1 ${
               index === currentIndex
-                  ? "bg-white w-fit xs:h-4 md:h-6 px-2 "
+                ? "bg-gray-100 w-fit  xs:h-4 md:h-6 px-2 relative top-[-6px]  "
-                  : "bg-gray-100 opacity-40 xs:w-4 md:w-6 xs:h-4 md:h-6"
+                : "bg-gray-400 opacity-40 xs:w-4 md:w-6 xs:h-4 md:h-6 "
             }`}
           >
             {index === currentIndex && e.title}
           </button>
         ))}
       </div>
-      </div>
     </>
   );
 };