fix:banner

components/landing/BannerHumas.tsx

@@ -1,21 +1,76 @@
+"use client";
 import { useTranslations } from "next-intl";
-import React from "react";
+import Image from "next/image";
+import React, { useEffect, useState } from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "../icons";
+
+const images = [
+  "/landing-1.jpg",
+  "/landing-2.jpg",
+  "/landing-3.jpg",
+  "/landing-4.jpg",
+];
 
 export default function BannerHumas() {
   const t = useTranslations("Banner");
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [resetTimer, setResetTimer] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+    }, 25000);
+
+    return () => clearInterval(interval);
+  }, [resetTimer]);
+  const nextImage = () => {
+    setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+    setResetTimer((prev) => prev + 1);
+  };
+
+  const prevImage = () => {
+    setCurrentIndex(
+      (prevIndex) => (prevIndex - 1 + images.length) % images.length
+    );
+    setResetTimer((prev) => prev + 1);
+  };
+
   return (
-    <div className="h-fit relative text-white lg:mt-[-130px]">
-      <img
-        src="headerbanner1.png"
-        alt="humasbanner"
-        className="w-full relative h-[78vh] lg:h-[95vh] object-cover"
-      />
+    <div className="h-fit relative text-gray-300 dark:text-white lg:mt-[-130px] overflow-hidden">
+      <div
+        className="flex w-full h-[78vh] lg:h-[95vh] transition-transform duration-700 ease-in-out"
+        style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+      >
+        {images.map((img, index) => (
+          <div key={index} className="w-full shrink-0">
+            <Image
+              src={img}
+              width={1440}
+              height={1080}
+              alt={`humasbanner-${index}`}
+              className="w-full h-full object-cover opacity-[100] dark:opacity-70"
+            />
+          </div>
+        ))}
+      </div>
       <div className="absolute lg:mt-[50px] top-1/2 left-1/2  transform -translate-x-1/2 -translate-y-1/2 text-center w-full lg:w-[75%]">
         <p className="text-[30px] lg:text-[42px] lg:leading-10 font-bold pb-1 md:pb-5">
           {t("jumbotron")}
         </p>
         <p className="text-xs md:text-medium">{`"${t("phrase")}"`}</p>
       </div>
+      <button
+        onClick={prevImage}
+        className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/50 text-white px-2 py-2 rounded-full hover:bg-black/70 transition"
+      >
+        <ChevronLeftIcon />
+      </button>
+      <button
+        onClick={nextImage}
+        className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/50 text-white px-2 py-2 rounded-full hover:bg-black/70 transition"
+      >
+        <ChevronRightIcon />
+      </button>
     </div>
   );
 }