service page updated for multiple data

app/[locale]/services/detail/page.tsx

@@ -13,11 +13,11 @@ import { useServiceDetail } from "@/store/useService";
 import { useQuery } from "@tanstack/react-query";
 import httpClient from "@/request/api";
 import { endPoints } from "@/request/links";
+import { cardVariants, containerVariants } from "@/lib/animations";
 
 export default function OperationalSystemsPage() {
   const t = useTranslations("operationalSystems");
   const serviceId = useServiceDetail((state) => state.serviceId);
-  console.log("service id: ", serviceId);
 
   const {
     data,
@@ -29,8 +29,6 @@ export default function OperationalSystemsPage() {
     select: (data) => data?.data?.data,
   });
 
-  console.log("service detail: ", data);
-
   // Demo data - fallback ma'lumotlar
   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
   if (loading) {
     return (