77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
"use client";
|
|
import { useTranslations } from "next-intl";
|
|
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-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>
|
|
);
|
|
}
|