updated compoennt file structure

components/pages/home/banner/banner.tsx

@@ -0,0 +1,28 @@
+import { BannerSlider } from "./slider";
+
+export function Banner() {
+  return (
+    <section className="relative w-full lg:h-[86vh] h-screen min-h-150 overflow-hidden min-[450px]:pt-10 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/loading.tsx

@@ -0,0 +1,68 @@
+export function BannerSliderSkeleton() {
+  return (
+    <div className="max-w-7xl mx-auto relative z-30 h-full mt-20 flex items-center justify-center">
+      {/* Fake nav buttons */}
+      <div className="w-10 h-10 absolute z-10 left-[5%] top-[40vh] rounded-full bg-gray-700/50 lg:flex hidden animate-pulse" />
+      <div className="w-10 h-10 absolute z-10 right-[5%] top-[40vh] rounded-full bg-gray-700/50 lg:flex hidden animate-pulse" />
+
+      {/* Slide content */}
+      <div className="relative z-20 h-full flex items-center lg:mt-0 sm:mt-[10vh] mt-[5vh] w-full">
+        <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">
+
+            {/* Mobile text skeleton (hidden on lg) */}
+            <div className="lg:hidden space-y-6">
+              {/* Badge */}
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 rounded-full bg-gray-600 animate-pulse" />
+                <div className="h-4 w-32 rounded-full bg-gray-600 animate-pulse" />
+              </div>
+              {/* Heading */}
+              <div className="space-y-3">
+                <div className="h-8 w-4/5 rounded-lg bg-gray-600 animate-pulse" />
+                <div className="h-8 w-3/5 rounded-lg bg-gray-600 animate-pulse" />
+              </div>
+              {/* Description */}
+              <div className="space-y-2">
+                <div className="h-4 w-full rounded bg-gray-700 animate-pulse" />
+                <div className="h-4 w-11/12 rounded bg-gray-700 animate-pulse" />
+                <div className="h-4 w-3/4 rounded bg-gray-700 animate-pulse" />
+              </div>
+              {/* CTA */}
+              <div className="h-12 w-40 rounded-full bg-red-900/40 animate-pulse" />
+            </div>
+
+            {/* Image skeleton */}
+            <div className="flex items-end justify-center">
+              <div className="lg:w-[375px] w-[250px] lg:h-[375px] h-[250px] max-[300px]:w-[80vw] rounded-xl bg-gray-700/50 animate-pulse shimmer" />
+            </div>
+
+            {/* Desktop text skeleton (hidden on mobile) */}
+            <div className="lg:inline-block hidden space-y-6 mb-20">
+              {/* Badge */}
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 rounded-full bg-gray-600 animate-pulse" />
+                <div className="h-4 w-36 rounded-full bg-gray-600 animate-pulse" />
+              </div>
+              {/* Heading */}
+              <div className="space-y-3">
+                <div className="h-10 w-4/5 rounded-lg bg-gray-600 animate-pulse" />
+                <div className="h-10 w-3/5 rounded-lg bg-gray-600 animate-pulse" />
+                <div className="h-10 w-2/5 rounded-lg bg-gray-600 animate-pulse" />
+              </div>
+              {/* Description */}
+              <div className="space-y-2 max-w-md">
+                <div className="h-4 w-full rounded bg-gray-700 animate-pulse" />
+                <div className="h-4 w-11/12 rounded bg-gray-700 animate-pulse" />
+                <div className="h-4 w-3/4 rounded bg-gray-700 animate-pulse" />
+              </div>
+              {/* CTA */}
+              <div className="h-12 w-40 rounded-full bg-red-900/40 animate-pulse" />
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/pages/home/banner/slider.tsx

@@ -0,0 +1,163 @@
+"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";
+import { useQuery } from "@tanstack/react-query";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { BannerType } from "@/lib/types";
+import { BannerSliderSkeleton } from "./loading";
+// 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 { data, isLoading } = useQuery({
+    queryKey: ["banner"],
+    queryFn: () => httpClient(endPoints.banner),
+    select: (data: any): BannerType[] => data?.data?.results,
+  });
+  const BANNER_DATA = [
+    {
+      image: "/images/homeBanner3.png",
+      title: t("home.banner.title2"),
+      description: t("home.banner.description"),
+    },
+    {
+      image: "/images/homeBanner4.png",
+      title: t("home.banner.title2"),
+      description: t("home.banner.description"),
+    },
+  ];
+
+  const bannerData = data ?? BANNER_DATA;
+
+  if (isLoading) return <BannerSliderSkeleton />;
+
+  return (
+    <div className="max-w-7xl mx-auto relative z-30 h-full mt-20 flex items-center justify-center ">
+      {/* Custom buttons */}
+      <button
+        className={`${navigationPrevEl.replace(
+          ".",
+          "",
+        )} w-10 h-10 absolute z-10 left-0 top-[40vh] 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-0 top-[40vh] 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,
+        }}
+      >
+        {bannerData.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>
+  );
+}