file name and location updayed for better be
This commit is contained in:
nabijonovdavronbek619@gmail.com
@@ -1,28 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,163 +0,0 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user