baza , notepp, sertificate pages connected to backend

components/pages/about/aboutDetail/normativeCard.tsx

@@ -4,62 +4,94 @@ import { motion } from "framer-motion";
 import { useTranslations } from "next-intl";
 import { Award } from "lucide-react";
 import { normativeData } from "@/lib/demoData";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import PaginationLite from "@/components/paginationUI";
+import { CertCardSkeleton } from "./loading";
 
 export function NormativeCard() {
   const t = useTranslations();
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["normativeData"],
+    queryFn: () => httpClient(endPoints.normative),
+    select: (res) => ({
+      results: res.data?.data?.results,
+      current_page: res.data?.data?.current_page,
+      total_pages: res.data?.data?.total_pages,
+    }),
+  });
+
+  console.log(data);
+
+  const generallyData = data?.results ?? normativeData;
+  
+  if (isLoading) return <CertCardSkeleton />;
 
   return (
-    <div className="flex flex-col gap-8 py-10 max-w-6xl mx-auto px-2">
-      {normativeData.map((c, i) => (
-        <motion.article
-          key={i}
-          initial={{ opacity: 0, y: 28 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.55, delay: i * 0.1 }}
-          viewport={{ once: true }}
-          className="group flex flex-col rounded-2xl overflow-hidden sm:p-5 p-2 bg-[#161514] border border-white/5 hover:border-red-600/20 transition-colors duration-300 w-full"
-        >
-          {/* Meta + actions */}
-          <div className="flex flex-col justify-between flex-1 min-w-0 py-1 gap-4">
-            <div className="space-y-2">
-              {/* Badge row */}
-              <div className="flex items-center gap-2 flex-wrap">
-                <div className="flex items-center gap-1.5">
-                  <Award size={11} className="text-red-600 shrink-0" />
-                  <span className="text-[10px] font-black uppercase tracking-widest text-red-600">
-                    {t("about.certificatePage.card.badge")}
+    <div className="space-y-4">
+      <div className="flex flex-col gap-8 py-10 max-w-6xl mx-auto px-2">
+        {generallyData.map((c: any, i: number) => (
+          <motion.article
+            key={i}
+            initial={{ opacity: 0, y: 28 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.55, delay: i * 0.1 }}
+            viewport={{ once: true }}
+            className="group flex flex-col rounded-2xl overflow-hidden sm:p-5 p-2 bg-[#161514] border border-white/5 hover:border-red-600/20 transition-colors duration-300 w-full"
+          >
+            {/* Meta + actions */}
+            <div className="flex flex-col justify-between flex-1 min-w-0 py-1 gap-4">
+              <div className="space-y-2">
+                {/* Badge row */}
+                <div className="flex items-center gap-2 flex-wrap">
+                  <div className="flex items-center gap-1.5">
+                    <Award size={11} className="text-red-600 shrink-0" />
+                    <span className="text-[10px] font-black uppercase tracking-widest text-red-600">
+                      {t("about.certificatePage.card.badge")}
+                    </span>
+                  </div>
+                  <span className="text-[10px] font-bold uppercase tracking-wider text-white/20 border border-white/10 px-2 py-0.5 rounded-full">
+                    {c.artikul}
                   </span>
                 </div>
-                <span className="text-[10px] font-bold uppercase tracking-wider text-white/20 border border-white/10 px-2 py-0.5 rounded-full">
-                  {c.category}
-                </span>
+
+                {/* Title */}
+                <h3 className="font-bold text-sm md:text-base text-white leading-snug">
+                  {t(c.title)}
+                </h3>
               </div>
-
-              {/* Title */}
-              <h3 className="font-bold text-sm md:text-base text-white leading-snug">
-                {t(c.titleKey)}
-              </h3>
             </div>
-          </div>
 
-          {/* Divider */}
-          <div className="mx-4 h-px bg-white/5 sm:my-5 my-2" />
+            {/* Divider */}
+            <div className="mx-4 h-px bg-white/5 sm:my-5 my-2" />
 
-          {/* Documents list */}
-          <div className="overflow-hidden">
-            <ul className="flex flex-col gap-2.5">
-              {c.documents.map((doc, di) => (
-                <li key={di} className="flex items-start gap-2.5">
-                  <span className="mt-1 flex-none w-1.5 h-1.5 rounded-full bg-red-600/60" />
-                  <p className="text-xs text-gray-400 leading-relaxed">
-                    {t(doc)}
-                  </p>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </motion.article>
-      ))}
+            {/* Documents list */}
+            <div className="overflow-hidden">
+              <ul className="flex flex-col gap-2.5">
+                {c.features.map((doc: any, di: number) => (
+                  <li key={di} className="flex items-start gap-2.5">
+                    <span className="mt-1 flex-none w-1.5 h-1.5 rounded-full bg-red-600/60" />
+                    <p className="text-xs text-gray-400 leading-relaxed">
+                      {t(doc?.name)}
+                    </p>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </motion.article>
+        ))}
+      </div>
+      {data?.total_pages > 1 && (
+        <PaginationLite
+          currentPage={currentPage}
+          totalPages={data?.total_pages}
+          onChange={setCurrentPage}
+        />
+      )}
     </div>
   );
-}
+}