baza , notepp, sertificate pages connected to backend

app/[locale]/about/notePP/page.tsx

@@ -1,34 +1,8 @@
-"use client";
-
-import Image from "next/image";
-import { motion } from "framer-motion";
 import { useTranslations } from "next-intl";
 import { Guides } from "@/components/pages/about/aboutDetail/guides";
 
-const ease = [0.22, 1, 0.36, 1] as [number, number, number, number];
-
 export default function NotePPPage() {
   const t = useTranslations();
-
-  const guides = [
-    {
-      image: "/images/about/pp.avif",
-      title: t("about.notePPPage.hero.title"),
-      description: t("about.notePPPage.hero.description"),
-      eyebrow: t("about.notePPPage.hero.eyebrow"),
-      titleLine1: t("about.notePPPage.hero.titleLine1"),
-      titleLine2: t("about.notePPPage.hero.titleLine2"),
-    },
-    {
-      image: "/images/about/pp.avif",
-      title: t("about.noteTrailerPage.hero.title"),
-      description: t("about.noteTrailerPage.hero.description"),
-      eyebrow: t("about.noteTrailerPage.hero.eyebrow"),
-      titleLine1: t("about.noteTrailerPage.hero.titleLine1"),
-      titleLine2: t("about.noteTrailerPage.hero.titleLine2"),
-    },
-  ];
-
   return (
     <main className="min-h-[30vh] bg-[#0f0e0d] pt-5 text-white pb-40">
       <div className="bg-black sm:w-[95%] w-[98%] mx-auto p-5">

app/[locale]/about/sertificate/page.tsx

@@ -1,12 +1,30 @@
-"use client"
+"use client";
 import { CertCard } from "@/components/pages/about/aboutDetail/sertificateCard";
+import PaginationLite from "@/components/paginationUI";
 import { certs } from "@/lib/demoData";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useQuery } from "@tanstack/react-query";
 import { motion } from "framer-motion";
 import { Award } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { useState } from "react";
 
 export default function SertificatePage() {
   const t = useTranslations();
+  const [currentPage, setCurrentPage] = useState(1);
+  const { data, isLoading } = useQuery({
+    queryKey: ["sertificate"],
+    queryFn: () => httpClient(endPoints.sertificate),
+    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 ?? certs;
 
   return (
     <main className="min-h-screen bg-[#0f0e0d] text-white pb-44 overflow-x-hidden">
@@ -70,10 +88,19 @@ export default function SertificatePage() {
 
       {/* ── Cards ── */}
       <section className="max-w-4xl mx-auto px-6 flex flex-col gap-4">
-        {certs.map((c, i) => (
+        {generallydata.map((c:any, i:number) => (
           <CertCard key={c.id} c={c} i={i} />
         ))}
       </section>
+
+      {/*pagination*/}
+      {data?.total_pages > 1 && (
+        <PaginationLite
+          currentPage={currentPage}
+          totalPages={data?.total_pages}
+          onChange={setCurrentPage}
+        />
+      )}
     </main>
   );
 }