complated service and service detail page connection to backend
This commit is contained in:
nabijonovdavronbek619@gmail.com
@@ -1,4 +1,4 @@
|
||||
"use client"
|
||||
"use client";
|
||||
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
|
||||
import httpClient from "@/request/api";
|
||||
import { endPoints } from "@/request/links";
|
||||
@@ -10,15 +10,18 @@ import Link from "next/link";
|
||||
import { motion } from "framer-motion";
|
||||
import { ServicesLoading } from "./loading";
|
||||
import { EmptyServices } from "./empty";
|
||||
import { useServiceDetail } from "@/store/useService";
|
||||
|
||||
export function OurService() {
|
||||
const t = useTranslations();
|
||||
const locale = useLocale();
|
||||
const setServiceId = useServiceDetail((state) => state.setServiceId);
|
||||
|
||||
// get request
|
||||
// get request
|
||||
const { data, isLoading, isError } = useQuery({
|
||||
queryKey: ['firesafety'],
|
||||
queryFn: () => httpClient(endPoints.services.all)
|
||||
queryKey: ["firesafety"],
|
||||
queryFn: () => httpClient(endPoints.services.all),
|
||||
select: (data) => data?.data?.data?.results,
|
||||
});
|
||||
|
||||
console.log("service data: ", data);
|
||||
@@ -84,44 +87,52 @@ export function OurService() {
|
||||
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">
|
||||
<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="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"
|
||||
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">
|
||||
{t("home.services.services.operation.title")}
|
||||
{data[0].title}
|
||||
</p>
|
||||
<p className="font-almarai text-gray-400 max-w-80 w-full">
|
||||
{t("home.services.services.operation.description")}
|
||||
{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="/images/home/gruop.png"
|
||||
src={data[0].main_image}
|
||||
alt="images"
|
||||
width={200}
|
||||
height={100}
|
||||
className="object-contain sm:absolute bottom-0 right-2 z-10"
|
||||
className="object-contain sm:absolute bottom-0 -right-2 z-10"
|
||||
/>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={cardVariants} className="sm:w-[45%] w-full">
|
||||
<motion.div
|
||||
onClick={() => setServiceId(data[1].id)}
|
||||
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")}
|
||||
{data[1].title}
|
||||
</p>
|
||||
<p className="font-almarai text-gray-400 max-w-70 w-full">
|
||||
{t("home.services.services.suppression.description")}
|
||||
{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="/images/home/redShlang.png"
|
||||
src={data[1].main_image}
|
||||
alt="images"
|
||||
width={200}
|
||||
height={100}
|
||||
@@ -132,13 +143,17 @@ export function OurService() {
|
||||
</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} className="sm:w-[40%] w-full -mt-5">
|
||||
<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="/images/home/ambulance.png"
|
||||
src={data[2].main_image}
|
||||
alt="images"
|
||||
width={300}
|
||||
height={200}
|
||||
@@ -146,10 +161,10 @@ export function OurService() {
|
||||
/>
|
||||
<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")}
|
||||
{data[2].title}
|
||||
</p>
|
||||
<p className="font-almarai text-gray-400 max-w-80 w-full">
|
||||
{t("home.services.services.safety.description")}
|
||||
{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} />
|
||||
@@ -159,20 +174,24 @@ export function OurService() {
|
||||
</motion.div>
|
||||
|
||||
<div className="sm:w-[60%] w-full">
|
||||
<motion.div variants={cardVariants}>
|
||||
<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">
|
||||
{t("home.services.services.monitoring.title")}
|
||||
{data[3].title}
|
||||
</p>
|
||||
<p className="font-almarai text-gray-400 max-w-70 w-full">
|
||||
{t("home.services.services.monitoring.description")}
|
||||
{data[3].subtitle}
|
||||
</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 className="font-almarai sm:mt-35 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"
|
||||
src={data[3].main_image}
|
||||
alt="images"
|
||||
width={200}
|
||||
height={100}
|
||||
@@ -184,7 +203,7 @@ export function OurService() {
|
||||
|
||||
<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"
|
||||
className="py-4 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")}
|
||||
@@ -203,4 +222,4 @@ export function OurService() {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user