service page updated for multiple data
This commit is contained in:
@@ -35,7 +35,6 @@ interface ProductDetail {
|
|||||||
export default function SlugPage() {
|
export default function SlugPage() {
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const productId = searchParams.get("productId");
|
const productId = searchParams.get("productId");
|
||||||
console.log("product Id : ", productId);
|
|
||||||
const productZustand = useProductPageInfo((state) => state.product);
|
const productZustand = useProductPageInfo((state) => state.product);
|
||||||
const id = productId ? Number(productId) : productZustand.id;
|
const id = productId ? Number(productId) : productZustand.id;
|
||||||
const { data: product, isLoading } = useQuery({
|
const { data: product, isLoading } = useQuery({
|
||||||
@@ -44,8 +43,6 @@ export default function SlugPage() {
|
|||||||
select: (data) => data?.data?.data as ProductDetail,
|
select: (data) => data?.data?.data as ProductDetail,
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => console.log("product detail: ", product));
|
|
||||||
|
|
||||||
// Loading State
|
// Loading State
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return <LoadingSkeleton />;
|
return <LoadingSkeleton />;
|
||||||
|
|||||||
@@ -13,11 +13,11 @@ import { useServiceDetail } from "@/store/useService";
|
|||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query";
|
||||||
import httpClient from "@/request/api";
|
import httpClient from "@/request/api";
|
||||||
import { endPoints } from "@/request/links";
|
import { endPoints } from "@/request/links";
|
||||||
|
import { cardVariants, containerVariants } from "@/lib/animations";
|
||||||
|
|
||||||
export default function OperationalSystemsPage() {
|
export default function OperationalSystemsPage() {
|
||||||
const t = useTranslations("operationalSystems");
|
const t = useTranslations("operationalSystems");
|
||||||
const serviceId = useServiceDetail((state) => state.serviceId);
|
const serviceId = useServiceDetail((state) => state.serviceId);
|
||||||
console.log("service id: ", serviceId);
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
data,
|
data,
|
||||||
@@ -29,8 +29,6 @@ export default function OperationalSystemsPage() {
|
|||||||
select: (data) => data?.data?.data,
|
select: (data) => data?.data?.data,
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log("service detail: ", data);
|
|
||||||
|
|
||||||
// Demo data - fallback ma'lumotlar
|
// Demo data - fallback ma'lumotlar
|
||||||
const demoData: SystemFeature[] = [
|
const demoData: SystemFeature[] = [
|
||||||
{
|
{
|
||||||
@@ -48,41 +46,6 @@ export default function OperationalSystemsPage() {
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
// Animation variants
|
|
||||||
const containerVariants = {
|
|
||||||
hidden: { opacity: 0 },
|
|
||||||
visible: {
|
|
||||||
opacity: 1,
|
|
||||||
transition: {
|
|
||||||
staggerChildren: 0.15,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const itemVariants = {
|
|
||||||
hidden: { opacity: 0, y: 30 },
|
|
||||||
visible: {
|
|
||||||
opacity: 1,
|
|
||||||
y: 0,
|
|
||||||
transition: {
|
|
||||||
duration: 0.6,
|
|
||||||
ease: [0.22, 1, 0.36, 1] as const,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const cardVariants = {
|
|
||||||
hidden: { opacity: 0, scale: 0.95 },
|
|
||||||
visible: {
|
|
||||||
opacity: 1,
|
|
||||||
scale: 1,
|
|
||||||
transition: {
|
|
||||||
duration: 0.5,
|
|
||||||
ease: [0.22, 1, 0.36, 1] as const,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
// Loading state
|
// Loading state
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -1,11 +1,15 @@
|
|||||||
import { OurService, Video } from "@/components/pages/home";
|
import { Video } from "@/components/pages/home";
|
||||||
import { ServiceBanner, ServiceFaq } from "@/components/pages/services";
|
import {
|
||||||
|
ServiceBanner,
|
||||||
|
ServiceFaq,
|
||||||
|
ServicePageServices,
|
||||||
|
} from "@/components/pages/services";
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
return (
|
return (
|
||||||
<div className="">
|
<div className="">
|
||||||
<ServiceBanner />
|
<ServiceBanner />
|
||||||
<OurService />
|
<ServicePageServices />
|
||||||
<Video />
|
<Video />
|
||||||
<ServiceFaq />
|
<ServiceFaq />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -21,7 +21,6 @@ export function Breadcrumb({
|
|||||||
const category = useCategory((state) => state.category);
|
const category = useCategory((state) => state.category);
|
||||||
const subCategory = useSubCategory((state) => state.subCategory);
|
const subCategory = useSubCategory((state) => state.subCategory);
|
||||||
const product = useProductPageInfo((state) => state.product);
|
const product = useProductPageInfo((state) => state.product);
|
||||||
console.log("sub category: ", subCategory);
|
|
||||||
|
|
||||||
// Pathdan segments olish
|
// Pathdan segments olish
|
||||||
const segments = pathname.split("/").filter((segment) => segment !== "");
|
const segments = pathname.split("/").filter((segment) => segment !== "");
|
||||||
|
|||||||
@@ -63,7 +63,6 @@ export function Footer() {
|
|||||||
if (email) {
|
if (email) {
|
||||||
// Telefon raqamni tozalash (faqat raqamlar)
|
// Telefon raqamni tozalash (faqat raqamlar)
|
||||||
const cleanPhone = email.replace(/\D/g, "");
|
const cleanPhone = email.replace(/\D/g, "");
|
||||||
console.log("without 998: ", cleanPhone.slice(3));
|
|
||||||
formRequest.mutate({ number: Number(cleanPhone.slice(3)) });
|
formRequest.mutate({ number: Number(cleanPhone.slice(3)) });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -239,11 +238,11 @@ export function Footer() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Copyright Section */}
|
{/* Copyright Section */}
|
||||||
<div className="border-t border-gray-800 px-4 py-8">
|
<div className="border-t border-gray-800 px-4 py-6">
|
||||||
<div className="mx-auto max-w-6xl">
|
<div className="mx-auto max-w-6xl">
|
||||||
<div className="font-almarai flex flex-col justify-between gap-4 text-lg text-gray-400 md:flex-row md:items-center">
|
<div className="font-almarai flex flex-col justify-end items-end w-full gap-4 text-lg text-gray-400 md:flex-row md:items-center">
|
||||||
{locale === "uz" ? (
|
{locale === "uz" ? (
|
||||||
<div className="flex gap-2 ">
|
<div className="flex gap-2 w-full justify-center items-end ">
|
||||||
<a
|
<a
|
||||||
href="http://felix-its.uz/"
|
href="http://felix-its.uz/"
|
||||||
className="hover:text-red-600 hover:cursor-pointer text-blue-300 underline"
|
className="hover:text-red-600 hover:cursor-pointer text-blue-300 underline"
|
||||||
@@ -253,7 +252,7 @@ export function Footer() {
|
|||||||
<p>- Jamoasi tomonidan ishlab chiqilgan</p>
|
<p>- Jamoasi tomonidan ishlab chiqilgan</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex gap-2">
|
<div className="flex w-full justify-center items-end gap-2">
|
||||||
{locale === "ru" ? <p>Разработано -</p> : <p>Created by - </p>}
|
{locale === "ru" ? <p>Разработано -</p> : <p>Created by - </p>}
|
||||||
<a
|
<a
|
||||||
href="http://felix-its.uz/"
|
href="http://felix-its.uz/"
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ export { Banner } from "./banner";
|
|||||||
export { Statistics } from "./statistics";
|
export { Statistics } from "./statistics";
|
||||||
export { AboutUs } from "./about";
|
export { AboutUs } from "./about";
|
||||||
export { Video } from "./video";
|
export { Video } from "./video";
|
||||||
export { OurService } from "../services/ourService";
|
export { OurService } from "./ourService";
|
||||||
export { Testimonial } from "./testimonal";
|
export { Testimonial } from "./testimonal";
|
||||||
export { Line } from "./line";
|
export { Line } from "./line";
|
||||||
export { Blog } from "./blog/blog";
|
export { Blog } from "./blog/blog";
|
||||||
|
|||||||
@@ -8,9 +8,10 @@ import { useLocale, useTranslations } from "next-intl";
|
|||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import { ServicesLoading } from "./loading";
|
import { ServicesLoading } from "../services/loading";
|
||||||
import { EmptyServices } from "./empty";
|
import { EmptyServices } from "../services/empty";
|
||||||
import { useServiceDetail } from "@/store/useService";
|
import { useServiceDetail } from "@/store/useService";
|
||||||
|
import { cardVariants, containerVariants } from "@/lib/animations";
|
||||||
|
|
||||||
export function OurService() {
|
export function OurService() {
|
||||||
const t = useTranslations();
|
const t = useTranslations();
|
||||||
@@ -21,34 +22,9 @@ export function OurService() {
|
|||||||
const { data, isLoading, isError } = useQuery({
|
const { data, isLoading, isError } = useQuery({
|
||||||
queryKey: ["firesafety"],
|
queryKey: ["firesafety"],
|
||||||
queryFn: () => httpClient(endPoints.services.all),
|
queryFn: () => httpClient(endPoints.services.all),
|
||||||
select: (data) => data?.data?.data?.results,
|
select: (data) => data?.data?.data?.results.slice(0, 4),
|
||||||
});
|
});
|
||||||
|
|
||||||
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 (
|
return (
|
||||||
<div className="bg-[#1e1d1c] py-10 md:py-16 lg:py-20 mb-30">
|
<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">
|
<div className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
@@ -116,30 +92,34 @@ export function OurService() {
|
|||||||
</Link>
|
</Link>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<motion.div
|
<Link
|
||||||
onClick={() => setServiceId(data[1].id)}
|
href={`/${locale}/services/detail`}
|
||||||
variants={cardVariants}
|
|
||||||
className="sm:w-[45%] w-full"
|
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">
|
<motion.div
|
||||||
<p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
|
onClick={() => setServiceId(data[1].id)}
|
||||||
{data[1].title}
|
variants={cardVariants}
|
||||||
</p>
|
>
|
||||||
<p className="font-almarai text-gray-400 max-w-70 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">
|
||||||
{data[1].subtitle}
|
<p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
|
||||||
</p>
|
{data[1].title}
|
||||||
<button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
|
</p>
|
||||||
{t("home.services.learnmore")} <ChevronRight size={20} />
|
<p className="font-almarai text-gray-400 max-w-70 w-full">
|
||||||
</button>
|
{data[1].subtitle}
|
||||||
<Image
|
</p>
|
||||||
src={data[1].main_image}
|
<button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
|
||||||
alt="images"
|
{t("home.services.learnmore")} <ChevronRight size={20} />
|
||||||
width={200}
|
</button>
|
||||||
height={100}
|
<Image
|
||||||
className="object-contain sm:absolute -bottom-4 -right-4 z-10"
|
src={data[1].main_image}
|
||||||
/>
|
alt="images"
|
||||||
</div>
|
width={200}
|
||||||
</motion.div>
|
height={100}
|
||||||
|
className="object-contain sm:absolute -bottom-4 -right-4 z-10"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="max-w-250 flex sm:flex-row flex-col items-start justify-between gap-5 mt- w-full mx-auto">
|
<div className="max-w-250 flex sm:flex-row flex-col items-start justify-between gap-5 mt- w-full mx-auto">
|
||||||
@@ -209,7 +189,7 @@ export function OurService() {
|
|||||||
{t("home.services.viewMoreServices")}
|
{t("home.services.viewMoreServices")}
|
||||||
</h2>
|
</h2>
|
||||||
<Link
|
<Link
|
||||||
href="/services"
|
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"
|
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")}
|
{t("home.services.viewMore")}
|
||||||
@@ -6,7 +6,6 @@ import { getRouteLang } from "@/request/getLang";
|
|||||||
import { endPoints } from "@/request/links";
|
import { endPoints } from "@/request/links";
|
||||||
import { useCategory } from "@/store/useCategory";
|
import { useCategory } from "@/store/useCategory";
|
||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query";
|
||||||
import { useEffect } from "react";
|
|
||||||
import CatalogCardSkeletonSmall from "./loading";
|
import CatalogCardSkeletonSmall from "./loading";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import { ArrowUpRight } from "lucide-react";
|
import { ArrowUpRight } from "lucide-react";
|
||||||
@@ -19,9 +18,6 @@ export default function FilterCatalog() {
|
|||||||
queryFn: () => httpClient(endPoints.category.all),
|
queryFn: () => httpClient(endPoints.category.all),
|
||||||
select: (data): CategoryType[] => data?.data?.results,
|
select: (data): CategoryType[] => data?.data?.results,
|
||||||
});
|
});
|
||||||
useEffect(() => {
|
|
||||||
console.log("product catalog data: ", data);
|
|
||||||
}, [data]);
|
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -38,10 +38,7 @@ export default function Filter() {
|
|||||||
const { data: categoryBack } = useQuery({
|
const { data: categoryBack } = useQuery({
|
||||||
queryKey: ["category"],
|
queryKey: ["category"],
|
||||||
queryFn: () => httpClient(endPoints.category.all),
|
queryFn: () => httpClient(endPoints.category.all),
|
||||||
select: (data) => {
|
select: (data) => data?.data?.results,
|
||||||
console.log("category data on filter: ", data?.data?.results);
|
|
||||||
return data?.data?.results;
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// ⭐ O'ZGARTIRILDI: subCategory so'rovi faqat dropdown ochilganda va have_sub_category true bo'lganda
|
// ⭐ O'ZGARTIRILDI: subCategory so'rovi faqat dropdown ochilganda va have_sub_category true bo'lganda
|
||||||
@@ -53,10 +50,7 @@ export default function Filter() {
|
|||||||
!!category.id &&
|
!!category.id &&
|
||||||
category.have_sub_category === true &&
|
category.have_sub_category === true &&
|
||||||
openDropdowns[category.id] === true,
|
openDropdowns[category.id] === true,
|
||||||
select: (data) => {
|
select: (data) => data?.data?.results,
|
||||||
console.log("subCategory filter data: ", data?.data?.results);
|
|
||||||
return data?.data?.results;
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// ⭐ O'ZGARTIRILDI: Catalog va Size query'lari category yoki subCategory ID'ga qarab ishlaydi
|
// ⭐ O'ZGARTIRILDI: Catalog va Size query'lari category yoki subCategory ID'ga qarab ishlaydi
|
||||||
|
|||||||
@@ -5,18 +5,18 @@ import { useQuery } from "@tanstack/react-query";
|
|||||||
import ProductCard from "./productCard";
|
import ProductCard from "./productCard";
|
||||||
import { useCategory } from "@/store/useCategory";
|
import { useCategory } from "@/store/useCategory";
|
||||||
import { useFilter } from "@/lib/filter-zustand";
|
import { useFilter } from "@/lib/filter-zustand";
|
||||||
import { useEffect, useMemo } from "react";
|
import { useMemo } from "react";
|
||||||
import { useProductPageInfo } from "@/store/useProduct";
|
import { useProductPageInfo } from "@/store/useProduct";
|
||||||
import { useSubCategory } from "@/store/useSubCategory";
|
import { useSubCategory } from "@/store/useSubCategory";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
export default function MainProduct() {
|
export default function MainProduct() {
|
||||||
|
const t = useTranslations();
|
||||||
const category = useCategory((state) => state.category);
|
const category = useCategory((state) => state.category);
|
||||||
const subCategory = useSubCategory((state) => state.subCategory);
|
const subCategory = useSubCategory((state) => state.subCategory);
|
||||||
const filter = useFilter((state) => state.filter);
|
const filter = useFilter((state) => state.filter);
|
||||||
const getFiltersByType = useFilter((state) => state.getFiltersByType);
|
const getFiltersByType = useFilter((state) => state.getFiltersByType);
|
||||||
const setProduct = useProductPageInfo((state) => state.setProducts);
|
const setProduct = useProductPageInfo((state) => state.setProducts);
|
||||||
|
|
||||||
console.log("subCategory data: ", subCategory);
|
|
||||||
// Query params yaratish
|
// Query params yaratish
|
||||||
const queryParams = useMemo(() => {
|
const queryParams = useMemo(() => {
|
||||||
const catalog = getFiltersByType("catalog");
|
const catalog = getFiltersByType("catalog");
|
||||||
@@ -40,15 +40,12 @@ export default function MainProduct() {
|
|||||||
|
|
||||||
// Query params qo'shish
|
// Query params qo'shish
|
||||||
return `${baseLink}${queryParams}`;
|
return `${baseLink}${queryParams}`;
|
||||||
}, [category.id, category.have_sub_category, queryParams , subCategory.id]);
|
}, [category.id, category.have_sub_category, queryParams, subCategory.id]);
|
||||||
|
|
||||||
const { data, isLoading, error } = useQuery({
|
const { data, isLoading, error } = useQuery({
|
||||||
queryKey: ["products", subCategory.id, queryParams],
|
queryKey: ["products", subCategory.id, queryParams],
|
||||||
queryFn: () => httpClient(requestLink),
|
queryFn: () => httpClient(requestLink),
|
||||||
select: (data) => {
|
select: (data) => data?.data?.data?.results,
|
||||||
console.log("product: ", data?.data?.data?.results);
|
|
||||||
return data?.data?.data?.results;
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
@@ -62,17 +59,13 @@ export default function MainProduct() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
return (
|
return <div className="text-center text-red-500 py-10">{t("loadingError")}</div>;
|
||||||
<div className="text-center text-red-500 py-10">
|
|
||||||
Ma'lumotlarni yuklashda xatolik yuz berdi
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!data || data.length === 0) {
|
if (!data || data.length === 0) {
|
||||||
return (
|
return (
|
||||||
<div className="text-center text-gray-400 py-10">
|
<div className="text-center text-gray-400 py-10">
|
||||||
Mahsulotlar topilmadi
|
{t("productsNotFound")}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,2 +1,3 @@
|
|||||||
export { ServiceBanner } from "./serviceBanner";
|
export { ServiceBanner } from "./serviceBanner";
|
||||||
export { ServiceFaq } from "./serviceFaq";
|
export { ServiceFaq } from "./serviceFaq";
|
||||||
|
export { ServicePageServices } from "./servicePageServices";
|
||||||
|
|||||||
222
components/pages/services/servicePageServices.tsx
Normal file
222
components/pages/services/servicePageServices.tsx
Normal file
@@ -0,0 +1,222 @@
|
|||||||
|
"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";
|
||||||
|
import { useServiceDetail } from "@/store/useService";
|
||||||
|
import { cardVariants, containerVariants } from "@/lib/animations";
|
||||||
|
|
||||||
|
export function ServicePageServices() {
|
||||||
|
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) => {
|
||||||
|
const serviceData = data?.data?.data?.results;
|
||||||
|
return serviceData.reduce(
|
||||||
|
(resultArray: any, item: any, index: number) => {
|
||||||
|
const chunkIndex = Math.floor(index / 4);
|
||||||
|
|
||||||
|
if (!resultArray[chunkIndex]) {
|
||||||
|
resultArray[chunkIndex] = []; // Yangi chunk boshlash
|
||||||
|
}
|
||||||
|
|
||||||
|
resultArray[chunkIndex].push(item);
|
||||||
|
|
||||||
|
return resultArray;
|
||||||
|
},
|
||||||
|
[] as any[][],
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("service page services: ", data);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-[#1e1d1c] py-10 md:py-16 lg:py-20 mb-15">
|
||||||
|
<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>
|
||||||
|
) : (
|
||||||
|
data.map((item: any, index: number) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
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-3 my-4">
|
||||||
|
{item[0] && (
|
||||||
|
<motion.div
|
||||||
|
variants={cardVariants}
|
||||||
|
className="sm:w-[55%] overflow-hidden w-full"
|
||||||
|
onClick={() => setServiceId(item[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">
|
||||||
|
{item[0]?.title}
|
||||||
|
</p>
|
||||||
|
<p className="font-almarai text-gray-400 max-w-80 w-full">
|
||||||
|
{item[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={item[0]?.main_image}
|
||||||
|
alt="images"
|
||||||
|
width={200}
|
||||||
|
height={100}
|
||||||
|
className="object-contain sm:absolute bottom-0 -right-2 z-10"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{item[1] && (
|
||||||
|
<Link
|
||||||
|
href={`/${locale}/services/detail`}
|
||||||
|
className="sm:w-[45%] w-full"
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
onClick={() => setServiceId(item[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">
|
||||||
|
{item[1]?.title}
|
||||||
|
</p>
|
||||||
|
<p className="font-almarai text-gray-400 max-w-70 w-full">
|
||||||
|
{item[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={item[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-3 w-full mx-auto">
|
||||||
|
{item[2] && (
|
||||||
|
<motion.div
|
||||||
|
variants={cardVariants}
|
||||||
|
onClick={() => setServiceId(item[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={item[2]?.main_image}
|
||||||
|
alt="images"
|
||||||
|
width={250}
|
||||||
|
height={200}
|
||||||
|
className="object-contain mt-5"
|
||||||
|
/>
|
||||||
|
<div className="space-y-1 pb-3 px-5">
|
||||||
|
<p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
|
||||||
|
{item[2]?.title}
|
||||||
|
</p>
|
||||||
|
<p className="font-almarai text-gray-400 max-w-80 w-full">
|
||||||
|
{item[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">
|
||||||
|
{item[3] && (
|
||||||
|
<motion.div
|
||||||
|
onClick={() => setServiceId(item[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">
|
||||||
|
{item[3]?.title}
|
||||||
|
</p>
|
||||||
|
<p className="font-almarai text-gray-400 max-w-70 w-full">
|
||||||
|
{item[3]?.subtitle}
|
||||||
|
</p>
|
||||||
|
<button className="font-almarai sm:mt-40 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={item[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>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -55,7 +55,7 @@ export function PriceModal() {
|
|||||||
});
|
});
|
||||||
setErrors({
|
setErrors({
|
||||||
name: "",
|
name: "",
|
||||||
number: '',
|
number: "",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, [isOpen]);
|
}, [isOpen]);
|
||||||
@@ -144,8 +144,6 @@ export function PriceModal() {
|
|||||||
number: Number(cleanPhone.slice(3)), // ✅ String sifatida yuborish
|
number: Number(cleanPhone.slice(3)), // ✅ String sifatida yuborish
|
||||||
product: product?.id || 0,
|
product: product?.id || 0,
|
||||||
};
|
};
|
||||||
|
|
||||||
console.log("Sended data:", sendedData);
|
|
||||||
formRequest.mutate(sendedData);
|
formRequest.mutate(sendedData);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
33
lib/animations.ts
Normal file
33
lib/animations.ts
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
export const containerVariants = {
|
||||||
|
hidden: { opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
staggerChildren: 0.1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const itemVariants = {
|
||||||
|
hidden: { opacity: 0, y: 30 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
transition: {
|
||||||
|
duration: 0.6,
|
||||||
|
ease: [0.22, 1, 0.36, 1] as const,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const cardVariants = {
|
||||||
|
hidden: { opacity: 0, scale: 0.95 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
scale: 1,
|
||||||
|
transition: {
|
||||||
|
duration: 0.5,
|
||||||
|
ease: [0.22, 1, 0.36, 1] as const,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -136,12 +136,12 @@
|
|||||||
"subject": "Subject",
|
"subject": "Subject",
|
||||||
"message": "Leave us a message"
|
"message": "Leave us a message"
|
||||||
},
|
},
|
||||||
"privacy": "You agree to our friendly privacy policy",
|
"privacy": "You agree to our Privacy Policy.",
|
||||||
"send": "SEND MESSAGE",
|
"send": "SEND MESSAGE",
|
||||||
"email": "EMAIL",
|
"email": "EMAIL",
|
||||||
"emailAddress": "info@ignum-tech.com",
|
"emailAddress": "info@ignum-tech.com",
|
||||||
"location": "Our Location",
|
"location": "Our Location",
|
||||||
"address": "Toshkent shahri , Yunusabod tumani , Niyozbek yo'li 3 tor ko'chasi , 39 uy",
|
"address": "39, 3rd Niyozbek Yoli Street, Yunusabad District, Tashkent, Uzbekistan",
|
||||||
"phone": "Phone"
|
"phone": "Phone"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -291,6 +291,8 @@
|
|||||||
"send": "Sent",
|
"send": "Sent",
|
||||||
"error": "Error!",
|
"error": "Error!",
|
||||||
"succes": "sent!",
|
"succes": "sent!",
|
||||||
|
"loadingError": "An error occurred while loading data",
|
||||||
|
"productsNotFound": "Products not found",
|
||||||
"priceModal": {
|
"priceModal": {
|
||||||
"title": "Get Price",
|
"title": "Get Price",
|
||||||
"product": {
|
"product": {
|
||||||
|
|||||||
@@ -136,12 +136,12 @@
|
|||||||
"subject": "Тема",
|
"subject": "Тема",
|
||||||
"message": "Оставьте нам сообщение"
|
"message": "Оставьте нам сообщение"
|
||||||
},
|
},
|
||||||
"privacy": "Вы соглашаетесь с нашей дружественной политикой конфиденциальности",
|
"privacy": "Вы соглашаетесь с нашей Политикой конфиденциальности.",
|
||||||
"send": "ОТПРАВИТЬ СООБЩЕНИЕ",
|
"send": "ОТПРАВИТЬ СООБЩЕНИЕ",
|
||||||
"email": "ЭЛЕКТРОННАЯ ПОЧТА",
|
"email": "ЭЛЕКТРОННАЯ ПОЧТА",
|
||||||
"emailAddress": "info@ignum-tech.com",
|
"emailAddress": "info@ignum-tech.com",
|
||||||
"location": "Наше Местоположение",
|
"location": "Наше Местоположение",
|
||||||
"address": "Toshkent shahri , Yunusabod tumani , Niyozbek yo'li 3 tor ko'chasi , 39 uy",
|
"address": "г. Ташкент, Юнусабадский район, 3-й проезд Ниёзбек йули, дом 39",
|
||||||
"phone": "Телефон"
|
"phone": "Телефон"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -291,6 +291,8 @@
|
|||||||
"send": "Отправить",
|
"send": "Отправить",
|
||||||
"error": "Ошибка!",
|
"error": "Ошибка!",
|
||||||
"succes": "Отправлено!",
|
"succes": "Отправлено!",
|
||||||
|
"loadingError": "Произошла ошибка при загрузке данных",
|
||||||
|
"productsNotFound": "Товары не найдены",
|
||||||
"priceModal": {
|
"priceModal": {
|
||||||
"title": "Узнать цену",
|
"title": "Узнать цену",
|
||||||
"product": {
|
"product": {
|
||||||
|
|||||||
@@ -136,7 +136,7 @@
|
|||||||
"subject": "Mavzu",
|
"subject": "Mavzu",
|
||||||
"message": "Xabaringizni qoldiring"
|
"message": "Xabaringizni qoldiring"
|
||||||
},
|
},
|
||||||
"privacy": "Bizning maxfiylik siyosatimizga rozilik bildirasiz",
|
"privacy": "Siz bizning Maxfiylik siyosatimizga rozilik bildirasiz.",
|
||||||
"send": "XABAR YUBORISH",
|
"send": "XABAR YUBORISH",
|
||||||
"email": "ELEKTRON POCHTA",
|
"email": "ELEKTRON POCHTA",
|
||||||
"emailAddress": "info@ignum-tech.com",
|
"emailAddress": "info@ignum-tech.com",
|
||||||
@@ -291,6 +291,8 @@
|
|||||||
"send": "Yuborish",
|
"send": "Yuborish",
|
||||||
"error": "Xatolik!",
|
"error": "Xatolik!",
|
||||||
"succes": "Yuborildi!",
|
"succes": "Yuborildi!",
|
||||||
|
"loadingError": "Ma'lumotlarni yuklashda xatolik yuz berdi",
|
||||||
|
"productsNotFound": "Mahsulotlar topilmadi",
|
||||||
"priceModal": {
|
"priceModal": {
|
||||||
"title": "Narxni bilish",
|
"title": "Narxni bilish",
|
||||||
"product": {
|
"product": {
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ export const endPoints = {
|
|||||||
byId: (id: number) => `subCategory/?category=${id}`,
|
byId: (id: number) => `subCategory/?category=${id}`,
|
||||||
},
|
},
|
||||||
services: {
|
services: {
|
||||||
all: "firesafety/",
|
all: "firesafety/?page_size=500",
|
||||||
detail: (id: number) => `firesafety/${id}`,
|
detail: (id: number) => `firesafety/${id}`,
|
||||||
},
|
},
|
||||||
product: {
|
product: {
|
||||||
|
|||||||
Reference in New Issue
Block a user