hero section banner change to slider

app/[locale]/services/detail/loading.tsx

@@ -0,0 +1,5 @@
+import { InitialLoading } from "@/components/initialLoading/initialLoading";
+
+export default function Loading() {
+  return <InitialLoading />;
+}

app/[locale]/services/detail/page.tsx

@@ -2,10 +2,8 @@
 
 import Image from "next/image";
 import { motion } from "framer-motion";
-import { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
 import {
-  getOperationalSystems,
   SystemFeature,
 } from "@/lib/api/demoapi/operationalSystems";
 import { Breadcrumb } from "@/components/breadCrumb";
@@ -157,28 +155,6 @@ export default function OperationalSystemsPage() {
               >
                 {data?.description}
               </motion.p>
-
-              {/* <div className="space-y-4">
-                <ul className="space-y-3">
-                  {system.features.map((feature, featureIndex) => (
-                    <motion.li
-                      key={featureIndex}
-                      initial={{ opacity: 0, x: index % 2 === 0 ? -20 : 20 }}
-                      whileInView={{ opacity: 1, x: 0 }}
-                      viewport={{ once: true }}
-                      transition={{
-                        duration: 0.5,
-                        delay: 0.3 + featureIndex * 0.1,
-                      }}
-                      className="flex items-start gap-3 text-gray-300"
-                    >
-                      <span className="text-sm md:text-base font-unbounded">
-                        {feature}
-                      </span>
-                    </motion.li>
-                  ))}
-                </ul>
-              </div> */}
             </div>
           </motion.div>
         </motion.div>

app/[locale]/services/loading.tsx

@@ -0,0 +1,5 @@
+import { InitialLoading } from "@/components/initialLoading/initialLoading";
+
+export default function Loading() {
+  return <InitialLoading />;
+}

components/pages/about/whyChooseUs.tsx

@@ -3,10 +3,12 @@
 import Image from "next/image";
 import { Check } from "lucide-react";
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
-import { useTranslations } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
+import Link from "next/link";
 
 export function WhyChooseUs() {
   const t = useTranslations();
+  const locale = useLocale();
   const features = [
     { title: t("about.whyChoose.features.fastResponse") },
     { title: t("about.whyChoose.features.ready24") },
@@ -56,9 +58,12 @@ export function WhyChooseUs() {
 
           {/* CTA Button */}
           <div>
-            <button className="font-almarai shadow-[0px_0px_2px_8px_#ff01015c] rounded-full bg-red-600 px-6 py-3 font-bold text-white transition-all hover:bg-red-700 sm:px-8 sm:py-4">
+            <Link
+              href={`/${locale}/contact`}
+              className="font-almarai shadow-[0px_0px_2px_8px_#ff01015c] rounded-full bg-red-600 px-6 py-3 font-bold text-white transition-all hover:bg-red-700 sm:px-8 sm:py-4"
+            >
               {t("about.whyChoose.contact")}
-            </button>
+            </Link>
           </div>
         </div>
 

components/pages/home/banner.tsx

@@ -1,107 +0,0 @@
-import { useLocale, useTranslations } from "next-intl";
-import DotAnimatsiya from "../../dot/DotAnimatsiya";
-import Link from "next/link";
-
-export function Banner() {
-  const t = useTranslations();
-  const locale = useLocale();
-  return (
-    <section className="relative w-full lg:h-[86vh] h-screen min-h-150 overflow-hidden pt-20">
-      {/* Background Image */}
-      <div
-        className="absolute inset-0 z-0"
-        style={{
-          backgroundImage: "url(/images/home/banner.jpg)",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-        }}
-      />
-
-      {/* Gradient Overlay - Bottom-left to top-right */}
-      <div
-        className="absolute inset-0 z-10"
-        style={{
-          background: `linear-gradient(to top right, #c75c08 0%, #1e1d1ce3 28%, #1e1d1ce3 100%)`,
-        }}
-      />
-
-      {/* Content Container */}
-      <div className="relative z-20 h-full flex items-center lg:mt-0 sm:mt-[10vh] mt-[5vh]">
-        <div className="max-w-400 mx-auto px-4 sm:px-6 lg:px-8 w-full">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center h-full">
-            {/* Right side - Text Content */}
-            <div className="lg:hidden inline-block space-y-6 text-white">
-              {/* Badge */}
-              <div className="flex items-center gap-2 w-fit">
-                <DotAnimatsiya />
-                <span className="text-sm font-semibold tracking-wide font-almarai">
-                  {t("home.banner.title1")}
-                </span>
-              </div>
-
-              {/* Main Heading */}
-              <h1
-                className="bg-linear-to-br from-white via-white to-black
-  text-transparent bg-clip-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty font-unbounded"
-              >
-                {t("home.banner.title2")}
-              </h1>
-
-              {/* Description */}
-              <p className="text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
-                {t("home.banner.description")}
-              </p>
-
-              {/* CTA Button */}
-              <button className="shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
-                {t("home.banner.cta")}
-              </button>
-            </div>
-
-            {/* Left side - Firefighters Image */}
-            <div className="flex items-end justify-center  ">
-              <img
-                src="/images/homeBanner3.png"
-                alt="Firefighters"
-                loading="lazy"
-                className="lg:w-150 w-100 lg:h-150 max-[300px]:w-[80vw] object-contain object-right rounded-xl drop-shadow-2xl"
-              />
-            </div>
-
-            {/* Right side - Text Content */}
-            <div className="lg:inline-block hidden space-y-6 mb-20">
-              {/* Badge */}
-              <div className="flex items-center gap-2 w-fit">
-                <DotAnimatsiya />
-                <span className="text-sm font-semibold text-white tracking-wide font-almarai">
-                  {t("home.banner.title1")}
-                </span>
-              </div>
-
-              {/* Main Heading */}
-              <h1
-                className="font-unbounded uppercase text-4xl bg-linear-to-br from-white via-white to-black
-  text-transparent bg-clip-text sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty"
-              >
-                {t("home.banner.title2")}
-              </h1>
-
-              {/* Description */}
-              <p className="font-almarai text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
-                {t("home.banner.description")}
-              </p>
-
-              {/* CTA Button */}
-              <Link
-                href={`/${locale}/contact`}
-                className="font-almarai shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit"
-              >
-                {t("home.banner.cta")}
-              </Link>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}

components/pages/home/banner/banner.tsx

@@ -0,0 +1,33 @@
+import { useLocale, useTranslations } from "next-intl";
+import DotAnimatsiya from "../../../dot/DotAnimatsiya";
+import Link from "next/link";
+import { BannerSlider } from "./slider";
+
+export function Banner() {
+  const t = useTranslations();
+  const locale = useLocale();
+  return (
+    <section className="relative w-full lg:h-[86vh] h-screen min-h-150 overflow-hidden pt-20">
+      {/* Background Image */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: "url(/images/home/banner.jpg)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+        }}
+      />
+
+      {/* Gradient Overlay - Bottom-left to top-right */}
+      <div
+        className="absolute inset-0 z-10"
+        style={{
+          background: `linear-gradient(to top right, #c75c08 0%, #1e1d1ce3 28%, #1e1d1ce3 100%)`,
+        }}
+      />
+
+      {/* Content Container */}
+      <BannerSlider />
+    </section>
+  );
+}

components/pages/home/banner/slider.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation, Autoplay } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/navigation";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useLocale, useTranslations } from "next-intl";
+import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+// The custom CSS selectors for navigation
+const navigationPrevEl = ".hero-swiper-prev";
+const navigationNextEl = ".hero-swiper-next";
+
+export function BannerSlider() {
+  const t = useTranslations();
+  const locale = useLocale();
+  const BANNER_DATA = [
+    {
+      image: "/images/homeBanner3.png",
+      title: "YONG'INGA QARSHI HIMOYA",
+      description:
+        "Biz yong‘in xavfsizligi tizimlarini o‘rnatish va sertifikatlangan himoya vositalari savdosi bo‘yicha professional xizmatlar ko‘rsatamiz.",
+    },
+    {
+      image: "/images/homeBanner2.png",
+      title: "YONG'INGA QARSHI HIMOYA",
+      description:
+        "Biz yong‘in xavfsizligi tizimlarini o‘rnatish va sertifikatlangan himoya vositalari savdosi bo‘yicha professional xizmatlar ko‘rsatamiz.",
+    },
+  ];
+  return (
+    <div className="relative z-30 h-full mt-20">
+      {/* Custom buttons */}
+      <button
+        className={`${navigationPrevEl.replace(
+          ".",
+          "",
+        )} w-10 h-10 absolute z-10 left-[10%] top-50 rounded-full p-0 bg-primary text-center text-white lg:flex hidden items-center justify-center hover:bg-red-600 hover:cursor-pointer transition`}
+      >
+        <ChevronLeft size={30} />
+      </button>
+      <button
+        className={`${navigationNextEl.replace(
+          ".",
+          "",
+        )} w-10 h-10 absolute z-10 right-[10%] top-50 rounded-full bg-primary text-center text-white lg:flex hidden items-center justify-center hover:bg-red-600 hover:cursor-pointer transition `}
+      >
+        <ChevronRight size={30} />
+      </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,
+        }}
+      >
+        {BANNER_DATA.map((item, index) => (
+          <SwiperSlide key={index}>
+            <div className="relative z-20 h-full flex items-center lg:mt-0 sm:mt-[10vh] mt-[5vh]">
+              <div className="max-w-400 mx-auto px-4 sm:px-6 lg:px-8 w-full">
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center h-full">
+                  {/* Right side - Text Content */}
+                  <div className="lg:hidden inline-block space-y-6 text-white">
+                    {/* Badge */}
+                    <div className="flex items-center gap-2 w-fit">
+                      <DotAnimatsiya />
+                      <span className="text-sm font-semibold tracking-wide font-almarai">
+                        {t("home.banner.title1")}
+                      </span>
+                    </div>
+
+                    {/* Main Heading */}
+                    <h1
+                      className="bg-linear-to-br from-white via-white to-black
+  text-transparent bg-clip-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty font-unbounded"
+                    >
+                      {item.title}
+                    </h1>
+
+                    {/* Description */}
+                    <p className="text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
+                      {item.description}
+                    </p>
+
+                    {/* CTA Button */}
+                    <button className="shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
+                      {t("home.banner.cta")}
+                    </button>
+                  </div>
+
+                  {/* Left side - Firefighters Image */}
+                  <div className="flex items-end justify-center  ">
+                    <img
+                      src={item.image}
+                      alt="Firefighters"
+                      loading="lazy"
+                      className="lg:w-150 w-100 lg:h-150 max-[300px]:w-[80vw] object-contain object-right rounded-xl drop-shadow-2xl"
+                    />
+                  </div>
+
+                  {/* Right side - Text Content */}
+                  <div className="lg:inline-block hidden space-y-6 mb-20">
+                    {/* Badge */}
+                    <div className="flex items-center gap-2 w-fit">
+                      <DotAnimatsiya />
+                      <span className="text-sm font-semibold text-white tracking-wide font-almarai">
+                        {t("home.banner.title1")}
+                      </span>
+                    </div>
+
+                    {/* Main Heading */}
+                    <h1
+                      className="font-unbounded uppercase text-4xl bg-linear-to-br from-white via-white to-black
+  text-transparent bg-clip-text sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty"
+                    >
+                      {t("home.banner.title2")}
+                    </h1>
+
+                    {/* Description */}
+                    <p className="font-almarai text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
+                      {t("home.banner.description")}
+                    </p>
+
+                    {/* CTA Button */}
+                    <Link
+                      href={`/${locale}/contact`}
+                      className="font-almarai shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit"
+                    >
+                      {t("home.banner.cta")}
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+  );
+}

components/pages/home/index.ts

@@ -1,4 +1,4 @@
-export { Banner } from "./banner";
+export { Banner } from "./banner/banner";
 export { Statistics } from "./statistics";
 export { AboutUs } from "./about";
 export { Video } from "./video";