From 1b3b79c21716339788c8031327b88cbfb0e429ad Mon Sep 17 00:00:00 2001
From: Davron Chetin <nabijonovdavronbek619@gmail.com>
Date: Wed, 8 Oct 2025 11:48:37 +0500
Subject: [PATCH] swiper slider

---
 app/page.tsx                      |  2 +
 components/pageParts/partners.tsx | 61 ++++++++++++++++++++++++++++++
 components/pageParts/texnika.tsx  | 62 ++++++++++++++++++++-----------
 package-lock.json                 | 22 ++++++++++-
 package.json                      |  3 +-
 5 files changed, 127 insertions(+), 23 deletions(-)
 create mode 100644 components/pageParts/partners.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 113a88e..c64354e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,6 +5,7 @@ import Products from "@/components/pageParts/products";
 import Texnika from "@/components/pageParts/texnika";
 import Offer from "@/components/pageParts/offer";
 import Faq from "@/components/pageParts/faq";
+import Partners from "@/components/pageParts/partners";
 
 export default function Home() {
   return (
@@ -17,6 +18,7 @@ export default function Home() {
       <Texnika/>
       <Offer/>
       <Faq/>
+      <Partners/>
     </div>
   );
 }
diff --git a/components/pageParts/partners.tsx b/components/pageParts/partners.tsx
new file mode 100644
index 0000000..a2435e8
--- /dev/null
+++ b/components/pageParts/partners.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import Title from "../tools/title";
+
+import React from "react";
+// Import Swiper React components
+import { Swiper, SwiperSlide } from "swiper/react";
+
+// import required modules
+import { Autoplay } from "swiper/modules";
+
+// Import Swiper styles
+import "swiper/css";
+
+//all images
+import { Ezgu, Fidokor, Kohota, Minerva, NRG, ToshCity } from "@/assets";
+import Image, { StaticImageData } from "next/image";
+
+const images: StaticImageData[] = [
+  Ezgu,
+  Fidokor,
+  Kohota,
+  Minerva,
+  NRG,
+  ToshCity,
+];
+
+export default function Partners() {
+  return (
+    <div className="my-5 max-w-[1200px] w-full mx-auto ">
+      {/* title */}
+      <div className="mb-4">
+        <Title text="partner-h2" />
+      </div>
+
+      {/* slider */}
+      <div className="my-10">
+        <Swiper
+          autoplay={{
+            reverseDirection:true,
+            delay: 2500,
+            disableOnInteraction: false,
+          }}
+          modules={[Autoplay]}
+          slidesPerView={4}
+          className="mySwiper flex items-center justify-center"
+        >
+          {images.map((item, index) => (
+            <SwiperSlide key={index}>
+              <Image
+                src={item}
+                alt="Partner images"
+                className="w-[200px] h-[200px] object-contain"
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  );
+}
diff --git a/components/pageParts/texnika.tsx b/components/pageParts/texnika.tsx
index aaee0b9..684f538 100644
--- a/components/pageParts/texnika.tsx
+++ b/components/pageParts/texnika.tsx
@@ -1,10 +1,22 @@
 "use client";
 
-import Marquee from "react-fast-marquee";
 import Title from "../tools/title";
 import { Gehl, Hyundai, JCB, Lonking, Mitsubishi, XCMG } from "@/assets";
 import Image, { StaticImageData } from "next/image";
 
+// ========== React Swiper ============ ///
+
+// Import Swiper React components
+import { Swiper, SwiperSlide } from "swiper/react";
+
+// import required modules
+import { Autoplay } from "swiper/modules";
+
+// Import Swiper styles
+import "swiper/css";
+
+// ========== React Swiper ============ ///
+
 const slideImage: StaticImageData[] = [
   Lonking,
   Hyundai,
@@ -17,26 +29,34 @@ const slideImage: StaticImageData[] = [
 export default function Texnika() {
   return (
     <div className="flex flex-col items-center justify-center gap-20 mt-20 max-w-[1200px] w-full mx-auto">
-      <Title text="brand-h2" />
-      <Marquee
-        direction="left"
-        className="ml-20"
-      >
-        {slideImage.map((item, index) => (
-          <div
-            key={index}
-            className="mx-10 min-w-[200px] flex items-center justify-center"
-          >
-            <Image
-              src={item}
-              alt={`Brand ${index}`}
-              width={200}
-              height={200}
-              className="object-contain"
-            />
-          </div>
-        ))}
-      </Marquee>
+      {/* title */}
+      <div className="mb-4">
+        <Title text="brand-h2" />
+      </div>
+
+      {/* slider */}
+      <div className="my-10">
+        <Swiper
+          autoplay={{
+            reverseDirection: true,
+            delay: 2500,
+            disableOnInteraction: false,
+          }}
+          modules={[Autoplay]}
+          slidesPerView={4}
+          className="mySwiper flex items-center justify-center"
+        >
+          {slideImage.map((item, index) => (
+            <SwiperSlide key={index}>
+              <Image
+                src={item}
+                alt="Partner images"
+                className="w-[200px] h-[200px] object-contain"
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
     </div>
   );
 }
diff --git a/package-lock.json b/package-lock.json
index 60a1a35..7725479 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,8 @@
         "react-fast-marquee": "^1.6.5",
         "react-i18next": "^16.0.0",
         "react-icons": "^5.5.0",
-        "react-scroll": "^1.9.3"
+        "react-scroll": "^1.9.3",
+        "swiper": "^12.0.2"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4.1.14",
@@ -3031,6 +3032,25 @@
       "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
       "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==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.14",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.14.tgz",
diff --git a/package.json b/package.json
index c6dd9ad..e1f8da4 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "react-fast-marquee": "^1.6.5",
     "react-i18next": "^16.0.0",
     "react-icons": "^5.5.0",
-    "react-scroll": "^1.9.3"
+    "react-scroll": "^1.9.3",
+    "swiper": "^12.0.2"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.14",