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>
   );
 }

components/layout/navbar.tsx

@@ -85,7 +85,7 @@ export function Navbar() {
             <div className="hidden h-full lg:flex items-center gap-8">
               {navbarItems?.results ? (
                 navbarItems.results.map((item: NavbarItem) => (
-                  <DropdownMenu>
+                  <DropdownMenu key={item.id}>
                     <DropdownMenuTrigger asChild>
                       <Link
                         key={item.id}
@@ -200,7 +200,7 @@ export function Navbar() {
         <div className="flex flex-col p-6 gap-4">
           {navbarItems?.results ? (
             navbarItems.results.map((item: NavbarItem) => (
-              <DropdownMenu>
+              <DropdownMenu key={item.id}>
                 <DropdownMenuTrigger asChild>
                   <Link
                     key={item.id}

components/pages/about/aboutDetail/baza.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { ShieldCheck, BookOpen, Flame } from "lucide-react";
+import { ShieldCheck } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { NormativeCard } from "./normativeCard";
 
@@ -21,27 +21,6 @@ const fadeUpView = (delay = 0) => ({
 export default function NormativBazaPage() {
   const t = useTranslations();
 
-  const cards = [
-    {
-      icon: BookOpen,
-      title: t("about.normativBaza.cards.card1.title"),
-      text: t("about.normativBaza.cards.card1.text"),
-      number: "01",
-    },
-    {
-      icon: Flame,
-      title: t("about.normativBaza.cards.card2.title"),
-      text: t("about.normativBaza.cards.card2.text"),
-      number: "02",
-    },
-    {
-      icon: ShieldCheck,
-      title: t("about.normativBaza.cards.card3.title"),
-      text: t("about.normativBaza.cards.card3.text"),
-      number: "03",
-    },
-  ];
-
   return (
     <div className="bg-[#0f0e0d] text-white min-h-screen pt-10 pb-20">
       {/* ── Hero ── */}

components/pages/about/aboutDetail/guides.tsx

@@ -1,40 +1,68 @@
+"use client";
 import { useTranslations } from "next-intl";
 import DownloadCard from "./card";
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import PaginationLite from "@/components/paginationUI";
 
 export function Guides() {
   const t = useTranslations();
+  const [currentPage, setCurrentPage] = useState(1);
   const guides = [
     {
-      fileUrl: "/varnix.pdf",
+      file: "/varnix.pdf",
-      fileName: t("about.notePPPage.varnix"),
+      name: t("about.notePPPage.varnix"),
-      fileType: "PDF",
+      file_type: "PDF",
-      fileSize: "368.51 KB",
+      file_size: "368.51 KB",
     },
     {
-      fileUrl: "/ppFlanes.pdf",
+      file: "/ppFlanes.pdf",
-      fileName: t("about.notePPPage.ppFlanes"),
+      name: t("about.notePPPage.ppFlanes"),
-      fileType: "PDF",
+      file_type: "PDF",
-      fileSize: "368.51 KB",
+      file_size: "368.51 KB",
     },
     {
-      fileUrl: "/ppFiting.pdf",
+      file: "/ppFiting.pdf",
-      fileName: t("about.notePPPage.ppFiting"),
+      name: t("about.notePPPage.ppFiting"),
-      fileType: "PDF",
+      file_type: "PDF",
-      fileSize: "368.51 KB",
+      file_size: "368.51 KB",
     },
   ];
 
+  const { data } = useQuery({
+    queryKey: ["guides"],
+    queryFn: () => httpClient(endPoints.guides),
+    select: (res) => ({
+      results: res.data?.data?.results,
+      current_page: res.data?.data?.current_page,
+      total_pages: res.data?.data?.total_pages,
+    }),
+  });
+
+  const guidedata = data?.results ?? guides;
+
   return (
-    <div className="grid lg:grid-cols-3 min-[580px]:grid-cols-2 grid-cols-1  gap-4 max-w-7xl mx-auto py-5">
+    <div className="space-y-4">
-      {guides.map((guide, index) => (
+      <div className="grid lg:grid-cols-3 min-[580px]:grid-cols-2 grid-cols-1  gap-4 max-w-7xl mx-auto py-5">
-        <DownloadCard
+        {guidedata.map((guide: any, index: number) => (
-          key={index}
+          <DownloadCard
-          title={guide.fileName}
+            key={index}
-          fileType={guide.fileType}
+            title={guide.name}
-          fileSize={guide.fileSize}
+            fileType={guide.file_ype}
-          fileUrl={guide.fileUrl}
+            fileSize={guide.file_size}
+            fileUrl={guide.file}
+          />
+        ))}
+      </div>
+      {data?.total_pages > 1 && (
+        <PaginationLite
+          currentPage={currentPage}
+          totalPages={data?.total_pages}
+          onChange={setCurrentPage}
         />
-      ))}
+      )}
     </div>
   );
 }

components/pages/about/aboutDetail/loading.tsx

@@ -0,0 +1,44 @@
+export function CertCardSkeleton({ count = 6 }: { count?: number }) {
+  return (
+    <>
+      <article className="flex flex-col rounded-2xl overflow-hidden sm:p-5 p-2 bg-[#161514] border border-white/5 w-full">
+        {/* Badge row */}
+        <div className="flex flex-col justify-between flex-1 min-w-0 py-1 gap-4">
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 flex-wrap">
+              {/* Award badge */}
+              <div className="flex items-center gap-1.5">
+                <div className="w-2.5 h-2.5 rounded-sm bg-red-900/40 animate-pulse" />
+                <div className="h-2.5 w-20 rounded-full bg-red-900/40 animate-pulse" />
+              </div>
+              {/* Category pill */}
+              <div className="h-4 w-16 rounded-full border border-white/10 bg-white/5 animate-pulse" />
+            </div>
+
+            {/* Title lines */}
+            <div className="space-y-1.5 pt-1">
+              <div className="h-3.5 w-full rounded bg-white/8 animate-pulse" />
+              <div className="h-3.5 w-3/4 rounded bg-white/8 animate-pulse" />
+            </div>
+          </div>
+        </div>
+
+        {/* Divider */}
+        <div className="mx-4 h-px bg-white/5 sm:my-5 my-2" />
+
+        {/* Document list */}
+        <ul className="flex flex-col gap-2.5">
+          {Array.from({ length: 3 }).map((_, 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-900/40 animate-pulse" />
+              <div
+                className="h-3 rounded bg-white/8 animate-pulse"
+                style={{ width: `${75 - di * 10}%` }}
+              />
+            </li>
+          ))}
+        </ul>
+      </article>
+    </>
+  );
+}

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">
+    <div className="space-y-4">
-      {normativeData.map((c, i) => (
+      <div className="flex flex-col gap-8 py-10 max-w-6xl mx-auto px-2">
-        <motion.article
+        {generallyData.map((c: any, i: number) => (
-          key={i}
+          <motion.article
-          initial={{ opacity: 0, y: 28 }}
+            key={i}
-          whileInView={{ opacity: 1, y: 0 }}
+            initial={{ opacity: 0, y: 28 }}
-          transition={{ duration: 0.55, delay: i * 0.1 }}
+            whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
+            transition={{ duration: 0.55, delay: i * 0.1 }}
-          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"
+            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">
+            {/* Meta + actions */}
-            <div className="space-y-2">
+            <div className="flex flex-col justify-between flex-1 min-w-0 py-1 gap-4">
-              {/* Badge row */}
+              <div className="space-y-2">
-              <div className="flex items-center gap-2 flex-wrap">
+                {/* Badge row */}
-                <div className="flex items-center gap-1.5">
+                <div className="flex items-center gap-2 flex-wrap">
-                  <Award size={11} className="text-red-600 shrink-0" />
+                  <div className="flex items-center gap-1.5">
-                  <span className="text-[10px] font-black uppercase tracking-widest text-red-600">
+                    <Award size={11} className="text-red-600 shrink-0" />
-                    {t("about.certificatePage.card.badge")}
+                    <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}
+                {/* Title */}
-                </span>
+                <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 */}
+            {/* Divider */}
-          <div className="mx-4 h-px bg-white/5 sm:my-5 my-2" />
+            <div className="mx-4 h-px bg-white/5 sm:my-5 my-2" />
 
-          {/* Documents list */}
+            {/* Documents list */}
-          <div className="overflow-hidden">
+            <div className="overflow-hidden">
-            <ul className="flex flex-col gap-2.5">
+              <ul className="flex flex-col gap-2.5">
-              {c.documents.map((doc, di) => (
+                {c.features.map((doc: any, di: number) => (
-                <li key={di} className="flex items-start gap-2.5">
+                  <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" />
+                    <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">
+                    <p className="text-xs text-gray-400 leading-relaxed">
-                    {t(doc)}
+                      {t(doc?.name)}
-                  </p>
+                    </p>
-                </li>
+                  </li>
-              ))}
+                ))}
-            </ul>
+              </ul>
-          </div>
+            </div>
-        </motion.article>
+          </motion.article>
-      ))}
+        ))}
+      </div>
+      {data?.total_pages > 1 && (
+        <PaginationLite
+          currentPage={currentPage}
+          totalPages={data?.total_pages}
+          onChange={setCurrentPage}
+        />
+      )}
     </div>
   );
 }

components/pages/about/aboutDetail/sertificateCard.tsx

@@ -28,7 +28,7 @@ export function CertCard({ c, i }: { c: (typeof certs)[0]; i: number }) {
               </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}
+              {c.artikul}
             </span>
           </div>
 
@@ -45,12 +45,18 @@ export function CertCard({ c, i }: { c: (typeof certs)[0]; i: number }) {
       {/* Collapsible document list */}
       <div className="overflow-hidden">
         <ul className="flex flex-col gap-2.5">
-          {c.documents.map((doc, di) => (
+          {c.features.length > 0 &&
-            <li key={di} className="flex items-start gap-2.5">
+            c.features.map((doc: any, di: number) => {
-              <span className="mt-1 flex-none w-1.5 h-1.5 rounded-full bg-red-600/60" />
+              const { name } = doc;
-              <p className="text-xs text-gray-400 leading-relaxed">{doc}</p>
+              return (
-            </li>
+                <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">
+                    {name || ""}
+                  </p>
+                </li>
+              );
+            })}
         </ul>
       </div>
     </motion.article>

lib/demoData.ts

@@ -1,11 +1,13 @@
+import { title } from "process";
+
 export const certs = [
   {
     id: 1,
     src: "/images/about/sertificate.webp",
     title: "Пожаростойкие армированные трубы SLT BLOCKFIRE PP-R-GF",
     year: "2024",
-    category: "PP-R-GF",
+    artikul: "PP-R-GF",
-    documents: [
+    features: [
       "СТО 22.21.29-015-17207509-2022 (версия 2) — согласован МЧС России в качестве нормативного документа по пожарной безопасности.",
       "СТО 22.21.29-021-17207509-2024 «Автоматическая противопожарная защита многоярусных стеллажных конструкций» — согласован МЧС России №ГУ-исх-66586 от 05.07.2024.",
       "Протоколы испытаний по ГОСТ Р 58832 ИЛ НИЦ ПТ и СП ФГБУ ВНИИПО МЧС России № 2249/2.1-2022 от 03.03.2022, №2683/2.1-2023 от 06.10.2023.",
@@ -17,8 +19,8 @@ export const certs = [
     src: "/images/about/sertificate.webp",
     title: "Пожаростойкие однослойные трубы SLT BLOCKFIRE PP-R",
     year: "2023",
-    category: "PP-R",
+    artikul: "PP-R",
-    documents: [
+    features: [
       "СТО 22.21.29-015-17207509-2022 (версия 2) — согласован МЧС России в качестве нормативного документа по пожарной безопасности.",
       "СТО 22.21.29-021-17207509-2024 «Автоматическая противопожарная защита многоярусных стеллажных конструкций» — согласован МЧС России №ГУ-исх-66586 от 05.07.2024.",
       "Протоколы испытаний ИЛ НИЦ ПТ и СП ФГБУ ВНИИПО МЧС России № 2249/2.1-2022 от 03.03.2022, №2683/2.1-2023 от 06.10.2023.",
@@ -30,8 +32,8 @@ export const certs = [
     src: "/images/about/sertificate.webp",
     title: "Пожаростойкие фитинги SLT BLOCKFIRE PP-R",
     year: "2023",
-    category: "Фитинги",
+    artikul: "Фитинги",
-    documents: [
+    features: [
       "СТО 22.21.29-015-17207509-2022 (версия 2) — согласован МЧС России в качестве нормативного документа по пожарной безопасности.",
       "СТО 22.21.29-021-17207509-2024 «Автоматическая противопожарная защита многоярусных стеллажных конструкций» — согласован МЧС России №ГУ-исх-66586 от 05.07.2024.",
       "Протоколы испытаний по ГОСТ Р 58832 ИЛ НИЦ ПТ и СП ФГБУ ВНИИПО МЧС России № 2249/2.1-2022 от 03.03.2022, №2683/2.1-2023 от 06.10.2023.",
@@ -283,9 +285,9 @@ export const result = [
 
 export const normativeData = [
   {
-    titleKey: "certs.slt_blockfire.title",
+    title: "certs.slt_blockfire.title",
-    category: "SLT BLOCKFIRE",
+    artikul: "SLT BLOCKFIRE",
-    documents: [
+    features: [
       "certs.slt_blockfire.doc1",
       "certs.slt_blockfire.doc2",
       "certs.slt_blockfire.doc3",
@@ -293,14 +295,12 @@ export const normativeData = [
       "certs.slt_blockfire.doc5",
       "certs.slt_blockfire.doc6",
       "certs.slt_blockfire.doc7",
-      "certs.slt_blockfire.doc8"
+      "certs.slt_blockfire.doc8",
-    ]
+    ],
   },
   {
-    titleKey: "certs.slt_aqua.title",
+    title: "certs.slt_aqua.title",
-    category: "SLT AQUA",
+    artikul: "SLT AQUA",
-    documents: [
+    features: ["certs.slt_aqua.doc1"],
-      "certs.slt_aqua.doc1"
+  },
-    ]
-  }
 ];

request/links.ts

@@ -36,7 +36,10 @@ export const endPoints = {
   contact: "contact/",
   statistics: "statistics/",
   banner: "banner/?page_size=500",
-  navbar:"navigationitem/?page_size=500",
+  navbar: "navigationitem/?page_size=500",
+  sertificate: "document/?type=certificate",
+  normative: "document/?type=normative",
+  guides:"guide/",
   filter: {
     size: "size/",
     sizePageItems: "size/?page_size=500",