hero sllider

components/pageParts/hero.tsx

@@ -3,6 +3,39 @@
 import { motion } from "framer-motion";
 import Image from "next/image";
 import Text from "../lib_components/text";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation, Autoplay } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/navigation";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+const slider = [
+  {
+    id: 1,
+    image: "/2.jpg",
+    title:
+      "Ishonchli SpesTexnika — sizning loyihangiz uchun eng yaxshi tanlov!",
+    desc: "Biz eng so‘nggi texnikalar, maxsus transportlar va qurilish uskunalarini qulay narxda taqdim etamiz.",
+  },
+  {
+    id: 2,
+    image: "/4.jpg",
+    title:
+      "Ishonchli SpesTexnika — sizning loyihangiz uchun eng yaxshi tanlov!",
+    desc: "Biz eng so‘nggi texnikalar, maxsus transportlar va qurilish uskunalarini qulay narxda taqdim etamiz.",
+  },
+  {
+    id: 3,
+    image: "/3.webp",
+    title:
+      "Ishonchli SpesTexnika — sizning loyihangiz uchun eng yaxshi tanlov!",
+    desc: "Biz eng so‘nggi texnikalar, maxsus transportlar va qurilish uskunalarini qulay narxda taqdim etamiz.",
+  },
+];
+
+// The custom CSS selectors for navigation
+const navigationPrevEl = ".hero-swiper-prev";
+const navigationNextEl = ".hero-swiper-next";
 
 export default function HeroSection() {
   return (
@@ -10,66 +43,76 @@ export default function HeroSection() {
       dir="ltr"
       className="relative w-full md:h-[500px] max-md:py-10 max-lg:px-2 overflow-hidden flex items-center justify-between"
     >
-      {/* <Image
-        src="/hero2.jpg" // public papkaga rasm joylash (masalan, texnika rasmi)
-        alt="SpetsTexnika"
-        width={800}
-        height={400}
-        className="object-contain rounded-3xl"
-      /> */}
-
-      {/* Asosiy kontent */}
-      {/* <div className="absolute inset-0 -z-10 mx-auto w-full h-full">
-        <Image
-          src="/2.jpg" 
-          alt="SpetsTexnika"
-          fill
-          className="object-cover"
-          priority
-        />
-      </div> */}
-
-      <div className="relative z-20 max-w-7xl w-full mx-auto md:px-6 px-3 text-primary flex flex-col md:flex-row items-center gap-5 justify-between">
-        {/* Chap tomondagi matn */}
-        <motion.div
-          className="space-y-3 max-w-xl backdrop-blur-3xl bg-[#ffffff4a] rounded-xl py-6 px-4"
-          initial={{ opacity: 0, x: -60 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 0.8, ease: "easeOut" }}
+      {/* Custom buttons */}
+        <button
+          className={`${navigationPrevEl.replace(
+            ".",
+            ""
+          )} w-10 h-10 absolute z-10 left-[10%] top-50  p-0 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition`}
         >
-          <div className="text-2xl lg:text-4xl font-extrabold leading-tight text-primary">
-            <Text txt="hero_title"/>
-          </div>
-
-          <div className="text-xl font-medium text-secondary">
-            <Text txt="hero_desc"/>
-          </div>
-        </motion.div>
-
-        {/* O‘ng tomondagi texnika rasmi */}
-        <motion.div
-          className="hidden md:block"
-          initial={{ opacity: 0, x: 80 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 0.8, delay: 0.3, ease: "easeOut" }}
+          <ArrowLeft />
+        </button>
+        <button
+          className={`${navigationNextEl.replace(
+            ".",
+            ""
+          )} w-10 h-10 absolute z-10 right-[10%] top-50  bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition `}
         >
-          <Image
-            src="/2.jpg" // texnika rasmi (public/truck.png)
-            alt="SpetsTexnika yuk mashinasi"
-            width={420}
-            height={300}
-            className="drop-shadow-2xl rounded-xl"
-          />
-        </motion.div>
-      </div>
+          <ArrowRight />
+        </button>
+      <Swiper
+        modules={[Navigation, Autoplay]}
+        slidesPerView={1}
+        spaceBetween={30}
+        loop={true}
+        navigation={{
+          // Pass the class selectors here
+          prevEl: navigationPrevEl,
+          nextEl: navigationNextEl,
+        }}
+        autoplay={{
+          delay: 5000,
+          disableOnInteraction: false,
+        }}
+      >
+        {slider.map((item, index) => (
+          <SwiperSlide key={index}>
+            <div className="relative z-20 max-w-7xl w-full mx-auto md:px-6 px-3 text-primary flex flex-col md:flex-row items-center gap-5 justify-between">
+              {/* Chap tomondagi matn */}
+              <motion.div
+                className="space-y-3 max-w-xl backdrop-blur-3xl rounded-xl py-6 px-4"
+                initial={{ opacity: 0, x: -60 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.8, ease: "easeOut" }}
+              >
+                <div className="text-2xl lg:text-4xl font-extrabold leading-tight text-primary">
+                  <Text txt="hero_title" />
+                </div>
 
-      {/* Pastdagi to‘lqinli animatsiya (dekor) */}
-      {/* <motion.div
-        className="absolute bottom-0 left-0 w-full h-[100px]"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 1.2 }}
-      /> */}
+                <div className="text-xl font-medium text-secondary">
+                  <Text txt="hero_desc" />
+                </div>
+              </motion.div>
+
+              {/* O‘ng tomondagi texnika rasmi */}
+              <motion.div
+                className="hidden md:block"
+                initial={{ opacity: 0, x: 80 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.8, delay: 0.3, ease: "easeOut" }}
+              >
+                <Image
+                  src={item.image} // texnika rasmi (public/truck.png)
+                  alt="SpetsTexnika yuk mashinasi"
+                  width={620}
+                  height={300}
+                  className="drop-shadow-2xl rounded-xl"
+                />
+              </motion.div>
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
     </section>
   );
 }

package-lock.json

@@ -25,7 +25,7 @@
         "react-icons": "^5.5.0",
         "react-leaflet": "^5.0.0",
         "react-scroll": "^1.9.3",
-        "swiper": "^12.0.2"
+        "swiper": "^12.0.3"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4.1.14",
@@ -3414,9 +3414,9 @@
       "license": "MIT"
     },
     "node_modules/swiper": {
-      "version": "12.0.2",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.0.2.tgz",
-      "integrity": "sha512-y8F6fDGXmTVVgwqJj6I00l4FdGuhpFJn0U/9Ucn1MwWOw3NdLV8aH88pZOjyhBgU/6PyBlUx+JuAQ5KMWz906Q==",
+      "version": "12.0.3",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.0.3.tgz",
+      "integrity": "sha512-BHd6U1VPEIksrXlyXjMmRWO0onmdNPaTAFduzqR3pgjvi7KfmUCAm/0cj49u2D7B0zNjMw02TSeXfinC1hDCXg==",
       "funding": [
         {
           "type": "patreon",

package.json

@@ -25,7 +25,7 @@
     "react-icons": "^5.5.0",
     "react-leaflet": "^5.0.0",
     "react-scroll": "^1.9.3",
-    "swiper": "^12.0.2"
+    "swiper": "^12.0.3"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.14",