119 lines
4.1 KiB
TypeScript
119 lines
4.1 KiB
TypeScript
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import Image from "next/image";
|
||
import Text from "../lib_components/text";
|
||
import { Swiper, SwiperSlide } from "swiper/react";
|
||
import { Navigation, Autoplay } from "swiper/modules";
|
||
import "swiper/css";
|
||
import "swiper/css/navigation";
|
||
import { ArrowLeft, ArrowRight } from "lucide-react";
|
||
|
||
const slider = [
|
||
{
|
||
id: 1,
|
||
image: "/2.jpg",
|
||
title:
|
||
"Ishonchli SpesTexnika — sizning loyihangiz uchun eng yaxshi tanlov!",
|
||
desc: "Biz eng so‘nggi texnikalar, maxsus transportlar va qurilish uskunalarini qulay narxda taqdim etamiz.",
|
||
},
|
||
{
|
||
id: 2,
|
||
image: "/4.jpg",
|
||
title:
|
||
"Ishonchli SpesTexnika — sizning loyihangiz uchun eng yaxshi tanlov!",
|
||
desc: "Biz eng so‘nggi texnikalar, maxsus transportlar va qurilish uskunalarini qulay narxda taqdim etamiz.",
|
||
},
|
||
{
|
||
id: 3,
|
||
image: "/3.webp",
|
||
title:
|
||
"Ishonchli SpesTexnika — sizning loyihangiz uchun eng yaxshi tanlov!",
|
||
desc: "Biz eng so‘nggi texnikalar, maxsus transportlar va qurilish uskunalarini qulay narxda taqdim etamiz.",
|
||
},
|
||
];
|
||
|
||
// The custom CSS selectors for navigation
|
||
const navigationPrevEl = ".hero-swiper-prev";
|
||
const navigationNextEl = ".hero-swiper-next";
|
||
|
||
export default function HeroSection() {
|
||
return (
|
||
<section
|
||
dir="ltr"
|
||
className="relative w-full md:h-[500px] max-md:py-10 max-lg:px-2 overflow-hidden flex items-center justify-between"
|
||
>
|
||
{/* Custom buttons */}
|
||
<button
|
||
className={`${navigationPrevEl.replace(
|
||
".",
|
||
""
|
||
)} w-10 h-10 absolute z-10 left-[10%] top-50 p-0 bg-primary text-[30px] text-center text-white lg:flex hidden items-center justify-center hover:bg-secondary hover:cursor-pointer transition`}
|
||
>
|
||
<ArrowLeft />
|
||
</button>
|
||
<button
|
||
className={`${navigationNextEl.replace(
|
||
".",
|
||
""
|
||
)} w-10 h-10 absolute z-10 right-[10%] top-50 bg-primary text-[30px] text-center text-white lg:flex hidden items-center justify-center hover:bg-secondary hover:cursor-pointer transition `}
|
||
>
|
||
<ArrowRight />
|
||
</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,
|
||
}}
|
||
>
|
||
{slider.map((item, index) => (
|
||
<SwiperSlide key={index}>
|
||
<div className="relative z-20 max-w-7xl w-full mx-auto md:px-6 px-3 text-primary flex flex-col md:flex-row items-center gap-5 justify-between">
|
||
{/* Chap tomondagi matn */}
|
||
<motion.div
|
||
className="space-y-3 max-w-xl backdrop-blur-3xl rounded-xl py-6 px-4"
|
||
initial={{ opacity: 0, x: -60 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||
>
|
||
<div className="text-2xl lg:text-4xl font-extrabold leading-tight text-primary">
|
||
<Text txt="hero_title" />
|
||
</div>
|
||
|
||
<div className="text-xl font-medium text-secondary">
|
||
<Text txt="hero_desc" />
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* O‘ng tomondagi texnika rasmi */}
|
||
<motion.div
|
||
className="hidden md:block"
|
||
initial={{ opacity: 0, x: 80 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.3, ease: "easeOut" }}
|
||
>
|
||
<Image
|
||
src={item.image} // texnika rasmi (public/truck.png)
|
||
alt="SpetsTexnika yuk mashinasi"
|
||
width={620}
|
||
height={300}
|
||
className="drop-shadow-2xl rounded-xl"
|
||
/>
|
||
</motion.div>
|
||
</div>
|
||
</SwiperSlide>
|
||
))}
|
||
</Swiper>
|
||
</section>
|
||
);
|
||
}
|