connected backend to service page and detail
This commit is contained in:
nabijonovdavronbek619@gmail.com
72
components/pages/services/empty.tsx
Normal file
72
components/pages/services/empty.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import { useTranslations } from "next-intl";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
// Empty State Component
|
||||
export function EmptyServices() {
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="max-w-250 w-full mx-auto py-20"
|
||||
>
|
||||
<div className="bg-linear-to-br from-gray-900 to-gray-800 rounded-2xl p-10 md:p-16 text-center border border-gray-700/50">
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
|
||||
className="mb-8"
|
||||
>
|
||||
<div className="w-24 h-24 mx-auto bg-red-500/10 rounded-full flex items-center justify-center">
|
||||
<svg
|
||||
className="w-12 h-12 text-red-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.h3
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="text-2xl md:text-3xl font-bold text-white font-unbounded mb-4"
|
||||
>
|
||||
{t("home.services.noData.title") || "Xizmatlar topilmadi"}
|
||||
</motion.h3>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
className="text-gray-400 font-almarai text-base md:text-lg mb-8 max-w-md mx-auto"
|
||||
>
|
||||
{t("home.services.noData.description") || "Hozircha hech qanday xizmat mavjud emas. Tez orada yangi xizmatlar qo'shiladi."}
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="font-almarai bg-red-600 hover:bg-red-700 text-white font-semibold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-red-500/50"
|
||||
>
|
||||
{t("home.services.noData.reload") || "Qayta yuklash"}
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
46
components/pages/services/loading.tsx
Normal file
46
components/pages/services/loading.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
|
||||
// Loading Skeleton Component
|
||||
function ServiceCardSkeleton() {
|
||||
return (
|
||||
<div className="animate-pulse space-y-4 py-6 px-8 rounded-xl bg-linear-to-br from-gray-800 to-gray-900">
|
||||
<div className="h-6 bg-gray-700 rounded w-3/4"></div>
|
||||
<div className="h-4 bg-gray-700 rounded w-full"></div>
|
||||
<div className="h-4 bg-gray-700 rounded w-5/6"></div>
|
||||
<div className="h-8 bg-gray-700 rounded w-32"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Loading Component
|
||||
export function ServicesLoading() {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="max-w-250 w-full mx-auto space-y-5"
|
||||
>
|
||||
{/* Top Cards Skeleton */}
|
||||
<div className="flex sm:flex-row flex-col items-center gap-5">
|
||||
<div className="sm:w-[55%] w-full">
|
||||
<ServiceCardSkeleton />
|
||||
</div>
|
||||
<div className="sm:w-[45%] w-full">
|
||||
<ServiceCardSkeleton />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Cards Skeleton */}
|
||||
<div className="flex sm:flex-row flex-col items-start justify-between gap-5">
|
||||
<div className="sm:w-[40%] w-full">
|
||||
<ServiceCardSkeleton />
|
||||
</div>
|
||||
<div className="sm:w-[60%] w-full space-y-5">
|
||||
<ServiceCardSkeleton />
|
||||
<div className="h-24 bg-gray-800 rounded-xl animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
206
components/pages/services/ourService.tsx
Normal file
206
components/pages/services/ourService.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
"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 "./loading";
|
||||
import { EmptyServices } from "./empty";
|
||||
|
||||
export function OurService() {
|
||||
const t = useTranslations();
|
||||
const locale = useLocale();
|
||||
|
||||
// get request
|
||||
const { data, isLoading, isError } = useQuery({
|
||||
queryKey: ['firesafety'],
|
||||
queryFn: () => httpClient(endPoints.services.all)
|
||||
});
|
||||
|
||||
console.log("service data: ", data);
|
||||
|
||||
// Animation variants
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const cardVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 0.5,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
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 */}
|
||||
<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 flex sm:flex-row flex-col items-center gap-5 my-10">
|
||||
<motion.div variants={cardVariants} className="sm:w-[55%] w-full">
|
||||
<Link
|
||||
href={`/${locale}/services/detail`}
|
||||
className="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">
|
||||
{t("home.services.services.operation.title")}
|
||||
</p>
|
||||
<p className="font-almarai text-gray-400 max-w-80 w-full">
|
||||
{t("home.services.services.operation.description")}
|
||||
</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="/images/home/gruop.png"
|
||||
alt="images"
|
||||
width={200}
|
||||
height={100}
|
||||
className="object-contain sm:absolute bottom-0 right-2 z-10"
|
||||
/>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={cardVariants} className="sm:w-[45%] w-full">
|
||||
<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">
|
||||
{t("home.services.services.suppression.title")}
|
||||
</p>
|
||||
<p className="font-almarai text-gray-400 max-w-70 w-full">
|
||||
{t("home.services.services.suppression.description")}
|
||||
</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="/images/home/redShlang.png"
|
||||
alt="images"
|
||||
width={200}
|
||||
height={100}
|
||||
className="object-contain sm:absolute -bottom-4 -right-4 z-10"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-250 flex sm:flex-row flex-col items-start justify-between gap-5 mt-5 w-full mx-auto">
|
||||
<motion.div variants={cardVariants} className="sm:w-[40%] w-full">
|
||||
<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="/images/home/ambulance.png"
|
||||
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">
|
||||
{t("home.services.services.safety.title")}
|
||||
</p>
|
||||
<p className="font-almarai text-gray-400 max-w-80 w-full">
|
||||
{t("home.services.services.safety.description")}
|
||||
</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 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">
|
||||
{t("home.services.services.monitoring.title")}
|
||||
</p>
|
||||
<p className="font-almarai text-gray-400 max-w-70 w-full">
|
||||
{t("home.services.services.monitoring.description")}
|
||||
</p>
|
||||
<button className="font-almarai sm:mt-38 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="/images/home/balon.png"
|
||||
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-8 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="/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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user