file name and location updayed for better be
This commit is contained in:
nabijonovdavronbek619@gmail.com
@@ -1,121 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import { Flame, Building2, Ambulance } from "lucide-react";
|
||||
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import Link from "next/link";
|
||||
|
||||
interface ServiceItem {
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export function AboutUs() {
|
||||
const t = useTranslations();
|
||||
const locale = useLocale();
|
||||
const services: ServiceItem[] = [
|
||||
{
|
||||
icon: <Flame width={40} height={40} className="text-red-500" />,
|
||||
title: t("home.about.prevention.title"),
|
||||
description: t("home.about.prevention.description"),
|
||||
},
|
||||
{
|
||||
icon: <Building2 width={40} height={40} className="text-red-500" />,
|
||||
title: t("home.about.accidents.title"),
|
||||
description: t("home.about.accidents.description"),
|
||||
},
|
||||
{
|
||||
icon: <Ambulance width={40} height={40} className="text-red-500" />,
|
||||
title: t("home.about.service.title"),
|
||||
description: t("home.about.service.description"),
|
||||
},
|
||||
];
|
||||
return (
|
||||
<section className="bg-[#1e1d1c] py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
|
||||
{/* Left Content */}
|
||||
<div className="space-y-8">
|
||||
{/* Header */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<DotAnimatsiya />
|
||||
<span className="font-almarai text-white font-bold text-sm tracking-wide">
|
||||
{t("home.about.title")}
|
||||
</span>
|
||||
</div>
|
||||
<h2
|
||||
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"
|
||||
>
|
||||
{t("home.about.subtitle")}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Services */}
|
||||
<div className="space-y-6">
|
||||
{services.map((service, index) => (
|
||||
<div key={index} className="flex items-center gap-4">
|
||||
<div className="rounded-lg p-3 inline-block bg-[#282828]">
|
||||
{service.icon}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="uppercase font-unbounded text-white font-bold text-base sm:text-lg mb-2">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="font-almarai text-gray-400 text-sm sm:text-base leading-relaxed">
|
||||
{service.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Button */}
|
||||
<div>
|
||||
<Link href={`/${locale}/about`} className="font-almarai bg-red-600 hover:bg-red-700 text-white font-bold px-8 py-3 rounded-full transition-colors duration-300 shadow-[0px_0px_2px_8px_#ff01015c]">
|
||||
{t("home.about.title")}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Image */}
|
||||
<div className="relative flex justify-center lg:justify-end">
|
||||
<div className="relative w-full max-w-md">
|
||||
{/* Main Image */}
|
||||
<div className="relative rounded-lg overflow-hidden bg-gray-900">
|
||||
<Image
|
||||
src="/images/img8.jpg"
|
||||
alt="Firefighter at ready"
|
||||
width={400}
|
||||
height={600}
|
||||
className="w-full h-150 object-cover"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Badge Overlay */}
|
||||
<div className="absolute bottom-4 right-4 sm:bottom-6 sm:left-6 flex items-center justify-start gap-3">
|
||||
<Image
|
||||
src="/images/home/emblem.png"
|
||||
alt="Best Award Badge"
|
||||
width={100}
|
||||
height={100}
|
||||
className="w-20 h-20 sm:w-24 sm:h-34 drop-shadow-lg"
|
||||
/>
|
||||
<div className="text-center">
|
||||
<p className="text-white font-bold text-sm sm:text-base">
|
||||
{t("home.about.award")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Catalog from "./catalog";
|
||||
|
||||
export function Blog() {
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<section className="bg-[#1f1f1f] py-30">
|
||||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<div className="mb-12 text-center">
|
||||
<div className="mb-4 flex items-center justify-center gap-2">
|
||||
<DotAnimatsiya />
|
||||
<span className="font-almarai text-sm font-semibold tracking-wider text-white uppercase">
|
||||
{t("products.banner.title")}
|
||||
</span>
|
||||
</div>
|
||||
<h2
|
||||
className="font-unbounded bg-linear-to-br from-white py-2 via-white to-black
|
||||
text-transparent bg-clip-text text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl"
|
||||
>
|
||||
{t("products.ourproducts")}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Blog Cards Grid */}
|
||||
<Catalog />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
"use client";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import httpClient from "@/request/api";
|
||||
import { endPoints } from "@/request/links";
|
||||
import CatalogCard from "../../products/catalog";
|
||||
import CatalogCardSkeleton from "@/components/loadingSkleton";
|
||||
import EmptyData from "@/components/EmptyData";
|
||||
import { getRouteLang } from "@/request/getLang";
|
||||
import { CategoryType } from "@/lib/types";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export default function Catalog() {
|
||||
const language = getRouteLang();
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ["category", language],
|
||||
queryFn: () => httpClient(endPoints.category.all),
|
||||
select: (data): CategoryType[] => data?.data?.results,
|
||||
});
|
||||
const t = useTranslations();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[...Array(3)].map((_, index) => (
|
||||
<CatalogCardSkeleton key={index} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Ma'lumot yo'q holati
|
||||
if (!data || data.length === 0) {
|
||||
return (
|
||||
<EmptyData
|
||||
title={t("products.noData.title")}
|
||||
description={t("products.noData.description")}
|
||||
icon="shopping"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3 place-items-center">
|
||||
{data.map((item, index) => (
|
||||
<CatalogCard
|
||||
key={index}
|
||||
id={item.id}
|
||||
title={item.name}
|
||||
description={item.description}
|
||||
image={item.image}
|
||||
have_sub_category={item.have_sub_category}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
export { Banner } from "./banner/banner";
|
||||
export { Statistics } from "./statistics";
|
||||
export { AboutUs } from "./about";
|
||||
export { Video } from "./video";
|
||||
export { OurService } from "./ourService";
|
||||
export { Testimonial } from "./testimonal";
|
||||
export { Line } from "./line";
|
||||
export { Blog } from "./blog/blog";
|
||||
@@ -1,35 +0,0 @@
|
||||
import { Phone } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
|
||||
export function Line() {
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<div className="bg-black py-10 px-4">
|
||||
<div className="max-w-280 w-full mx-auto relative py-10 flex items-center justify-between ">
|
||||
<div className="text-white flex flex-col items-start justify-start gap-5 ">
|
||||
<h2 className="font-almarai lg:text-5xl sm:text-3xl text-2xl max-w-[80%] w-full font-semibold">
|
||||
{t("home.contactLine.text")}
|
||||
</h2>
|
||||
<p className="flex items-center justify-center gap-4 font-semibold sm:text-xl text-lg">
|
||||
<span
|
||||
className="shrink-0 w-10 h-10 bg-red-600 rounded-full flex items-center justify-center
|
||||
shadow-[0_0_0px_4px_rgba(239,68,68,0.1)]"
|
||||
>
|
||||
<Phone className="text-white w-5 h-5" />
|
||||
</span>
|
||||
+998-55-055-21-21
|
||||
</p>
|
||||
</div>
|
||||
<Image
|
||||
src="/images/home/balon.png"
|
||||
alt="image"
|
||||
width={60}
|
||||
height={60}
|
||||
priority
|
||||
className=" sm:flex hidden object-contain w-80 h-80 absolute -bottom-25 right-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,205 +0,0 @@
|
||||
"use client";
|
||||
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
|
||||
import httpClient from "@/request/api";
|
||||
import { endPoints } from "@/request/links";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { motion } from "framer-motion";
|
||||
import { ServicesLoading } from "../services/loading";
|
||||
import { EmptyServices } from "../services/empty";
|
||||
import { useServiceDetail } from "@/store/useService";
|
||||
import { cardVariants, containerVariants } from "@/lib/animations";
|
||||
|
||||
export function OurService() {
|
||||
const t = useTranslations();
|
||||
const locale = useLocale();
|
||||
const setServiceId = useServiceDetail((state) => state.setServiceId);
|
||||
|
||||
// get request
|
||||
const { data, isLoading, isError } = useQuery({
|
||||
queryKey: ["firesafety"],
|
||||
queryFn: () => httpClient(endPoints.services.all),
|
||||
select: (data) => data?.data?.data?.results.slice(0, 4),
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="bg-[#1e1d1c] py-10 md:py-16 lg:py-20 mb-30">
|
||||
<div className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header for github */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="space-y-4 md:space-y-6"
|
||||
>
|
||||
<div className="font-almarai flex items-center justify-center gap-2 text-base sm:text-lg md:text-xl text-white font-bold">
|
||||
<DotAnimatsiya />
|
||||
{t("home.services.title")}
|
||||
</div>
|
||||
<h1 className="uppercase font-unbounded text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl tracking-wider lg:tracking-[5px] font-bold bg-linear-to-br from-white via-white to-gray-400 text-transparent bg-clip-text text-center w-full">
|
||||
{t("home.services.subtitle")}
|
||||
</h1>
|
||||
<p className="font-almarai text-center text-sm sm:text-base md:text-lg text-gray-400 max-w-4xl mx-auto px-4">
|
||||
{t("home.services.description")}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Conditional Rendering */}
|
||||
{isLoading ? (
|
||||
<div className="my-10">
|
||||
<ServicesLoading />
|
||||
</div>
|
||||
) : !data || (Array.isArray(data) && data.length === 0) ? (
|
||||
<div className="my-10">
|
||||
<EmptyServices />
|
||||
</div>
|
||||
) : (
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{/* cards */}
|
||||
<div className="max-w-250 w-full mx-auto overflow-hidden flex sm:flex-row flex-col items-center gap-5 my-10">
|
||||
<motion.div
|
||||
variants={cardVariants}
|
||||
className="sm:w-[55%] overflow-hidden w-full"
|
||||
onClick={() => setServiceId(data[0].id)}
|
||||
>
|
||||
<Link
|
||||
href={`/${locale}/services/detail`}
|
||||
className="overflow-hidden block hover:cursor-pointer relative space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300"
|
||||
>
|
||||
<p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
|
||||
{data[0].title}
|
||||
</p>
|
||||
<p className="font-almarai text-gray-400 max-w-80 w-full">
|
||||
{data[0].subtitle}
|
||||
</p>
|
||||
<button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
|
||||
{t("home.services.learnmore")} <ChevronRight size={20} />
|
||||
</button>
|
||||
<Image
|
||||
src={data[0].main_image}
|
||||
alt="images"
|
||||
width={200}
|
||||
height={100}
|
||||
className="object-contain sm:absolute bottom-0 -right-2 z-10"
|
||||
/>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<Link
|
||||
href={`/${locale}/services/detail`}
|
||||
className="sm:w-[45%] w-full"
|
||||
>
|
||||
<motion.div
|
||||
onClick={() => setServiceId(data[1].id)}
|
||||
variants={cardVariants}
|
||||
>
|
||||
<div className="hover:cursor-pointer relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300">
|
||||
<p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
|
||||
{data[1].title}
|
||||
</p>
|
||||
<p className="font-almarai text-gray-400 max-w-70 w-full">
|
||||
{data[1].subtitle}
|
||||
</p>
|
||||
<button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
|
||||
{t("home.services.learnmore")} <ChevronRight size={20} />
|
||||
</button>
|
||||
<Image
|
||||
src={data[1].main_image}
|
||||
alt="images"
|
||||
width={200}
|
||||
height={100}
|
||||
className="object-contain sm:absolute -bottom-4 -right-4 z-10"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="max-w-250 flex sm:flex-row flex-col items-start justify-between gap-5 mt- w-full mx-auto">
|
||||
<motion.div
|
||||
variants={cardVariants}
|
||||
onClick={() => setServiceId(data[2].id)}
|
||||
className="sm:w-[40%] w-full -mt-5"
|
||||
>
|
||||
<Link
|
||||
href={`/${locale}/services/detail`}
|
||||
className="block hover:cursor-pointer relative rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300"
|
||||
>
|
||||
<Image
|
||||
src={data[2].main_image}
|
||||
alt="images"
|
||||
width={300}
|
||||
height={200}
|
||||
className="object-contain mt-5"
|
||||
/>
|
||||
<div className="space-y-4 py-6 px-8">
|
||||
<p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
|
||||
{data[2].title}
|
||||
</p>
|
||||
<p className="font-almarai text-gray-400 max-w-80 w-full">
|
||||
{data[2].subtitle}
|
||||
</p>
|
||||
<button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
|
||||
{t("home.services.learnmore")} <ChevronRight size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<div className="sm:w-[60%] w-full">
|
||||
<motion.div
|
||||
onClick={() => setServiceId(data[3].id)}
|
||||
variants={cardVariants}
|
||||
>
|
||||
<Link href={`/${locale}/services/detail`}>
|
||||
<div className="hover:cursor-pointer relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300">
|
||||
<p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
|
||||
{data[3].title}
|
||||
</p>
|
||||
<p className="font-almarai text-gray-400 max-w-70 w-full">
|
||||
{data[3].subtitle}
|
||||
</p>
|
||||
<button className="font-almarai sm:mt-37 mt-0 text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
|
||||
{t("home.services.learnmore")}{" "}
|
||||
<ChevronRight size={20} />
|
||||
</button>
|
||||
<Image
|
||||
src={data[3].main_image}
|
||||
alt="images"
|
||||
width={200}
|
||||
height={100}
|
||||
className="object-contain sm:absolute -bottom-20 -right-4 max-sm:-mb-20 z-10"
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={cardVariants}
|
||||
className="py-6 px-8 rounded-xl mt-5 w-full p-5 bg-[linear-gradient(to_top_right,#000000,#190b00,#542604,#8f4308)] flex sm:flex-row flex-col gap-5 items-center justify-between hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300"
|
||||
>
|
||||
<h2 className="font-unbounded sm:text-3xl text-xl font-semibold font-armanai text-white">
|
||||
{t("home.services.viewMoreServices")}
|
||||
</h2>
|
||||
<Link
|
||||
href={`/${locale}/services`}
|
||||
className="font-almarai shadow-[0px_0px_2px_6px_#a60404ad] bg-red-600 hover:bg-red-700 text-white font-bold sm:py-3 sm:px-8 px-8 py-2 rounded-full transition duration-300 transform hover:scale-105 w-fit"
|
||||
>
|
||||
{t("home.services.viewMore")}
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
"use client";
|
||||
import { Counter } from "@/components/Counter";
|
||||
import httpClient from "@/request/api";
|
||||
import { endPoints } from "@/request/links";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
interface Statistics {
|
||||
id: number;
|
||||
number: number;
|
||||
hint: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export function Statistics() {
|
||||
const t = useTranslations();
|
||||
const stats = [
|
||||
{
|
||||
id: 1,
|
||||
number: 25,
|
||||
hint: "+",
|
||||
description: t("home.statistics.experience"),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
number: 450,
|
||||
hint: "+",
|
||||
description: t("home.statistics.projectsCompleted"),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
number: 99,
|
||||
hint: "+",
|
||||
description: t("home.statistics.trainedSpecialists"),
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
number: 93,
|
||||
hint: "%",
|
||||
description: t("home.statistics.trustedClients"),
|
||||
},
|
||||
];
|
||||
const [stat, setStat] = useState<Statistics[]>(stats);
|
||||
|
||||
const { data } = useQuery({
|
||||
queryKey: ["statistics"],
|
||||
queryFn: () => httpClient(endPoints.statistics),
|
||||
select: (data) => data?.data?.results,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
data && setStat(data);
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<section className="w-full bg-black">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 lg:gap-12">
|
||||
{stat.map((stat, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex flex-col items-center justify-center py-10 sm:py-20 lg:py-15 border-b-red-600 border-b"
|
||||
>
|
||||
{/* Number and Symbol */}
|
||||
<div className="flex items-baseline gap-2 font-almarai">
|
||||
<span className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white">
|
||||
<Counter countNum={Number(stat.number)} />
|
||||
</span>
|
||||
<span className="text-4xl sm:text-5xl lg:text-6xl font-bold text-red-600">
|
||||
{stat.hint}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Label */}
|
||||
<p className="font-almarai text-sm sm:text-base text-gray-300 mt-4 text-center font-medium">
|
||||
{stat.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,144 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Autoplay } from "swiper/modules";
|
||||
import Image from "next/image";
|
||||
import "swiper/css";
|
||||
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
function StarRating({ rating }: { rating: number }) {
|
||||
return (
|
||||
<div className="flex gap-1">
|
||||
{[...Array(rating)].map((_, i) => (
|
||||
<svg
|
||||
key={i}
|
||||
className="w-4 h-4 md:w-5 md:h-5 text-yellow-400 fill-current"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Testimonial() {
|
||||
const t = useTranslations();
|
||||
const testimonials = [
|
||||
{
|
||||
id: 1,
|
||||
quote:t("home.testimonials.clients.john.text"),
|
||||
name: t("home.testimonials.clients.john.name"),
|
||||
role: t("home.testimonials.clients.john.position"),
|
||||
avatar: "/images/home/avatar.jpg",
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
quote:t("home.testimonials.clients.sarah.text"),
|
||||
name: t("home.testimonials.clients.sarah.name"),
|
||||
role: t("home.testimonials.clients.sarah.position"),
|
||||
avatar: "/images/home/avatar.jpg",
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
quote:t("home.testimonials.clients.michael.text"),
|
||||
name: t("home.testimonials.clients.michael.name"),
|
||||
role: t("home.testimonials.clients.michael.position"),
|
||||
avatar: "/images/home/avatar.jpg",
|
||||
rating: 5,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<section className="w-full bg-[#1a1a1a]">
|
||||
<div className="flex flex-col lg:flex-row min-h-100 lg:min-h-125">
|
||||
{/* Left Side - Firefighter Image */}
|
||||
<div className="relative w-full lg:w-1/2 h-75 sm:h-100 lg:h-auto">
|
||||
<Image
|
||||
src="/images/img10.jpg"
|
||||
alt="Professional firefighter in protective gear"
|
||||
fill
|
||||
className="object-cover object-top"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Testimonial Content with Background */}
|
||||
<div className="relative w-full lg:w-1/2 min-h-87.5 sm:min-h-100 lg:min-h-125">
|
||||
{/* Background Image */}
|
||||
<div className="absolute inset-0">
|
||||
<Image
|
||||
src="/images/home/fikrBack.jpg"
|
||||
alt="Firefighters in action"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
{/* Gradient Overlay - Direction to the right */}
|
||||
<div className="absolute inset-0 bg-linear-to-r from-[#1a1a1a] via-[#1a1a1a]/80 to-transparent" />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 h-full flex flex-col items-start justify-center px-6 sm:px-10 lg:px-12 xl:px-16 py-10 lg:py-0">
|
||||
{/* Header */}
|
||||
<div className="w-full max-w-xl mx-auto mb-5">
|
||||
<div className="flex items-center gap-2">
|
||||
<DotAnimatsiya />
|
||||
<span className="font-unbounded text-white font-semibold text-sm tracking-wider">
|
||||
{t("home.testimonials.title")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Swiper
|
||||
modules={[Autoplay]}
|
||||
autoplay={{
|
||||
delay: 5000,
|
||||
disableOnInteraction: false,
|
||||
}}
|
||||
loop={true}
|
||||
pagination={false}
|
||||
navigation={false}
|
||||
className="w-full max-w-xl"
|
||||
>
|
||||
{testimonials.map((testimonial) => (
|
||||
<SwiperSlide key={testimonial.id}>
|
||||
<div className="space-y-6">
|
||||
{/* Quote */}
|
||||
<p className="font-almarai text-white text-base sm:text-lg lg:text-xl leading-relaxed">
|
||||
"{testimonial.quote}"
|
||||
</p>
|
||||
|
||||
{/* Author Info */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden">
|
||||
<Image
|
||||
src={testimonial.avatar || "/placeholder.svg"}
|
||||
alt={testimonial.name}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-unbounded text-white font-bold text-sm sm:text-base">
|
||||
{testimonial.name}
|
||||
</h4>
|
||||
<p className="font-almarai text-red-600 text-xs sm:text-sm">
|
||||
{testimonial.role}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Star Rating */}
|
||||
<StarRating rating={testimonial.rating} />
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
|
||||
import HomeMarquee from "@/components/HomeMarquee";
|
||||
import { Play } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export function Video() {
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="bg-[#1e1d1c] bg-fixed max-sm:bg-center"
|
||||
style={{ backgroundImage: "url(/images/img7.jpg)" }}
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center bg-linear-to-t from-[#1e1d1c] to-[#1e1d1c02] h-80 w-full relative">
|
||||
<div className="flex items-center gap-2 w-fit text-white ">
|
||||
<DotAnimatsiya />
|
||||
<span className="text-sm font-semibold tracking-wide font-almarai">
|
||||
{t("rasmlar")}
|
||||
</span>
|
||||
</div>
|
||||
<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("fotogalereya")}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<HomeMarquee />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user