112 lines
3.7 KiB
JavaScript
112 lines
3.7 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import Image from "next/image";
|
|
import ban1 from "@img/ban1.jpg";
|
|
import ban2 from "@img/ban2.jpg";
|
|
import ban3 from "@img/ban3.jpg";
|
|
import ban1res from "@img/ban1res.jpg";
|
|
import ban2res from "@img/ban2res.jpg";
|
|
import ban3res from "@img/ban3res.jpg";
|
|
import Link from "next/link";
|
|
|
|
const slides = [
|
|
{
|
|
id: 1,
|
|
image: ban1,
|
|
imageResponsive: ban1res,
|
|
title: "محصولات هیدرودرم",
|
|
description: "Slide 1 Description",
|
|
url: "/categories/0/%D9%87%D9%85%D9%87%20%D9%85%D8%AD%D8%B5%D9%88%D9%84%D8%A7%D8%AA?page=0&brandIds=677cfbc5-2aa0-42f2-90ec-69073058e76e",
|
|
},
|
|
{
|
|
id: 2,
|
|
image: ban2,
|
|
imageResponsive: ban2res,
|
|
title: "محصولات فولیکا",
|
|
description: "Slide 2 Description",
|
|
url: "/categories/0/%D9%87%D9%85%D9%87%20%D9%85%D8%AD%D8%B5%D9%88%D9%84%D8%A7%D8%AA?brandIds=30be42fe-633b-4c43-886b-c946a68dddcc&page=0",
|
|
},
|
|
{
|
|
id: 3,
|
|
image: ban3,
|
|
imageResponsive: ban3res,
|
|
title: "محصولات بیول",
|
|
description: "Slide 3 Description",
|
|
url: "/categories/0/%D9%87%D9%85%D9%87%20%D9%85%D8%AD%D8%B5%D9%88%D9%84%D8%A7%D8%AA?page=0&brandIds=93a2a376-5a18-49f3-b29c-a3c8ef2ff133",
|
|
},
|
|
// Add more slides as needed
|
|
];
|
|
|
|
const HeroSection = () => {
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setCurrentIndex((prevIndex) => (prevIndex + 1) % slides.length);
|
|
}, 8000); // 8 seconds interval
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const goToSlide = (index) => {
|
|
setCurrentIndex(index);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="relative w-full xs:h-[200px] md:h-[400px] lg:h-[400px] xl:h-[650px] overflow-hidden lg:mt-[-18px] xs:mt-5 xs:rounded-2xl lg:rounded-none ">
|
|
<div
|
|
className="absolute flex transition-transform duration-500"
|
|
style={{ transform: `translateX(-${currentIndex * 100}%)` }}
|
|
>
|
|
{slides.map((slide) => (
|
|
<Link
|
|
href={slide.url}
|
|
key={slide.id}
|
|
className="flex-shrink-0 w-full"
|
|
>
|
|
<div className="block lg:hidden xs:mx-2 lg:mx-0">
|
|
<Image
|
|
src={slide?.imageResponsive}
|
|
alt={slide?.title}
|
|
className="!w-full xs:h-[200px] md:h-[400px] lg:h-[400px] xl:h-[650px] rounded-2xl lg:rounded-none object-cover"
|
|
layout="responsive"
|
|
width={800}
|
|
height={600}
|
|
/>
|
|
</div>
|
|
<div className="hidden lg:block">
|
|
<Image
|
|
src={slide?.image}
|
|
alt={slide?.title}
|
|
className="!w-full xs:h-[200px] md:h-[400px] lg:h-[400px] xl:h-[650px] rounded-2xl lg:rounded-none object-cover "
|
|
layout="responsive"
|
|
width={800}
|
|
height={600}
|
|
/>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
<div className="absolute xs:bottom-3 md:bottom-10 lg:bottom-4 xl:bottom-[70px] 2xl:bottom-[70px] left-1/2 transform -translate-x-1/2 flex space-x-2">
|
|
{slides.map((e, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => goToSlide(index)}
|
|
className={`rounded-full xs:text-[11px] md:text-sm ${
|
|
index === currentIndex
|
|
? "bg-white w-fit xs:h-4 md:h-6 px-2 "
|
|
: "bg-gray-100 opacity-40 xs:w-4 md:w-6 xs:h-4 md:h-6"
|
|
}`}
|
|
>
|
|
{index === currentIndex && e.title}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default HeroSection;
|