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,22 +96,22 @@ 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">
-          {slides.map((e, index) => (
-            <button
-              key={index}
-              onClick={() => goToSlide(index)}
-              className={`rounded-full xs:text-[11px] md:text-sm ${
-                index === currentIndex
-                  ? "bg-white w-fit xs:h-4 md:h-6 px-2 "
-                  : "bg-gray-100 opacity-40 xs:w-4 md:w-6 xs:h-4 md:h-6"
-              }`}
-            >
-              {index === currentIndex && e.title}
-            </button>
-          ))}
-        </div>
+      <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 mt-3 mx-1 ${
+              index === currentIndex
+                ? "bg-gray-100 w-fit  xs:h-4 md:h-6 px-2 relative top-[-6px]  "
+                : "bg-gray-400 opacity-40 xs:w-4 md:w-6 xs:h-4 md:h-6 "
+            }`}
+          >
+            {index === currentIndex && e.title}
+          </button>
+        ))}
       </div>
     </>
   );