sertificate , guides pages done

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

@@ -3,6 +3,7 @@
 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];
 
@@ -29,75 +30,17 @@ export default function NotePPPage() {
   ];
 
   return (
-    <>
-      <main className="min-h-screen bg-[#0f0e0d] text-white pb-40">
-        {/* Hero Section */}
-        <div className="flex flex-col gap-10">
-          {guides.map((guide, index) => (
-            <section
-              key={index}
-              className="relative w-full h-120 md:h-145 overflow-hidden"
-            >
-              <Image
-                src={guide.image}
-                alt={t("about.notePPPage.hero.title")}
-                fill
-                className="object-cover"
-                priority
-              />
+    <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">
+        <h1
+          className="my-15 text-center font-unbounded uppercase bg-linear-to-br from-white via-white/70 to-black
+text-transparent bg-clip-text text-3xl font-bold sm:text-4xl"
+        >
+          {t("about.notePPPage.title")}
+        </h1>
 
-              <div className="absolute inset-0 bg-black/45" />
-              <div className="absolute inset-0 bg-linear-to-b from-transparent via-black/20 to-[#0f0e0d]" />
-
-              <div
-                className="absolute inset-0 opacity-20 mix-blend-overlay pointer-events-none"
-                style={{
-                  backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
-                }}
-              />
-
-              <div className="relative z-10 flex flex-col justify-end h-full max-w-6xl mx-auto px-6 pb-16 md:pb-20">
-                <motion.span
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  transition={{ duration: 0.5 }}
-                  className="text-[11px] font-black uppercase tracking-[0.22em] text-red-600 mb-4"
-                >
-                  {guide.eyebrow}
-                </motion.span>
-
-                <motion.h1
-                  initial={{ opacity: 0, y: 28 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.65, ease, delay: 0.08 }}
-                  className="text-5xl md:text-7xl font-black uppercase leading-[0.92] tracking-tight text-white"
-                >
-                  {guide.titleLine1}
-                  <br />
-                  <span className="text-red-600">{guide.titleLine2}</span>
-                </motion.h1>
-
-                <motion.p
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.6, ease, delay: 0.2 }}
-                  className="mt-5 max-w-xl text-sm md:text-base text-gray-300 leading-relaxed"
-                >
-                  {guide.description}
-                </motion.p>
-
-                <motion.div
-                  initial={{ scaleX: 0 }}
-                  animate={{ scaleX: 1 }}
-                  transition={{ delay: 0.35, duration: 0.8, ease }}
-                  style={{ originX: 0 }}
-                  className="mt-8 w-20 h-px bg-red-600"
-                />
-              </div>
-            </section>
-          ))}
-        </div>
-      </main>
-    </>
+        <Guides />
+      </div>
+    </main>
   );
 }

components/pages/about/aboutDetail/card.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Download } from "lucide-react";
+
+interface DownloadCardProps {
+  title: string;
+  fileType?: string;
+  fileSize: string;
+  fileUrl: string;
+}
+
+export default function DownloadCard({
+  title,
+  fileType = "PDF",
+  fileSize,
+  fileUrl,
+}: DownloadCardProps) {
+  return (
+    <a
+      href={fileUrl}
+      download
+      className="min-h-40 h-full group relative w-full max-w-md border border-white/10  bg-[#171616b8] transition rounded-lg p-4 flex flex-col gap-4 items-start justify-between"
+    >
+      {/* Background glow effect */}
+      <div className="absolute inset-0 bg-linear-to-t from-red-600/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+
+      {/* Decorative corner accent */}
+      <div className="absolute top-0 right-0 w-24 h-24 bg-linear-to-br from-red-500/20 to-transparent rounded-bl-full opacity-0 group-hover:opacity-00 transition-opacity duration-500" />
+      {/* Top section */}
+      <div className="flex justify-between items-start">
+        <h3 className="text-xl font-unbounded font-bold group-hover:text-red-500 text-white leading-tight transition-colors duration-300">
+          {title}
+        </h3>
+
+        <span className="text-sm font-medium text-white">{fileType}</span>
+      </div>
+
+      {/* Bottom section */}
+      <div className="flex w-full justify-between items-center">
+        <span className="text-sm text-gray-200">{fileSize}</span>
+
+        <Download
+          size={20}
+          className="text-gray-600 transition group-hover:text-red-700 duration-300"
+        />
+      </div>
+    </a>
+  );
+}

components/pages/about/aboutDetail/guides.tsx

@@ -0,0 +1,40 @@
+import { useTranslations } from "next-intl";
+import DownloadCard from "./card";
+
+export function Guides() {
+  const t = useTranslations();
+  const guides = [
+    {
+      fileUrl: "/varnix.pdf",
+      fileName: t("about.notePPPage.varnix"),
+      fileType: "PDF",
+      fileSize: "368.51 KB",
+    },
+    {
+      fileUrl: "/ppFlanes.pdf",
+      fileName: t("about.notePPPage.ppFlanes"),
+      fileType: "PDF",
+      fileSize: "368.51 KB",
+    },
+    {
+      fileUrl: "/ppFiting.pdf",
+      fileName: t("about.notePPPage.ppFiting"),
+      fileType: "PDF",
+      fileSize: "368.51 KB",
+    },
+  ];
+
+  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">
+      {guides.map((guide, index) => (
+        <DownloadCard
+          key={index}
+          title={guide.fileName}
+          fileType={guide.fileType}
+          fileSize={guide.fileSize}
+          fileUrl={guide.fileUrl}
+        />
+      ))}
+    </div>
+  );
+}

components/pages/about/aboutDetail/sertificateCard.tsx

@@ -1,12 +1,9 @@
 "use client";
 
-import Image from "next/image";
 import { motion } from "framer-motion";
-import Link from "next/link";
-import { Download, ExternalLink, Award, ChevronDown } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useState } from "react";
 import { certs } from "@/lib/demoData";
+import { Award } from "lucide-react";
 
 export function CertCard({ c, i }: { c: (typeof certs)[0]; i: number }) {
   const t = useTranslations();

messages/en.json

@@ -174,70 +174,10 @@
       }
     },
     "notePPPage": {
-      "hero": {
-        "eyebrow": "Technical Documentation",
-        "titleLine1": "PP Pipes",
-        "titleLine2": "& Fittings",
-        "title": "Installation guide for PP pipes and fittings",
-        "description": "Step-by-step instructions and best practices for properly installing polypropylene pipes and fittings to ensure reliable fire protection systems."
-      },
-      "section": {
-        "label": "More Information",
-        "cta": "View Document",
-        "features": [
-          "Use clean, debris-free pipes",
-          "Ensure proper alignment before welding",
-          "Apply recommended sealing techniques",
-          "Test joints for leaks after installation"
-        ]
-      },
-      "footer": {
-        "label": "All technical details are for reference only."
-      }
-    },
-    "noteTrailerPage": {
-      "hero": {
-        "eyebrow": "Technical Documentation",
-        "titleLine1": "Welded",
-        "titleLine2": "Saddles",
-        "title": "Installation guide for welded saddles",
-        "description": "Detailed guidelines for safe placement and welding of saddles used in fire suppression systems, ensuring durable and leak-free connections."
-      },
-      "section": {
-        "label": "More Information",
-        "cta": "View Document",
-        "features": [
-          "Select correct saddle size",
-          "Prepare surface for welding",
-          "Follow manufacturer’s welding procedure",
-          "Inspect welds for integrity"
-        ]
-      },
-      "footer": {
-        "label": "All technical details are for reference only."
-      }
-    },
-    "noteFlansPage": {
-      "hero": {
-        "eyebrow": "Technical Documentation",
-        "titleLine1": "Nota",
-        "titleLine2": "Flanslar",
-        "title": "Installation guide for PP flanges",
-        "description": "Comprehensive instructions for mounting polypropylene flanges, emphasizing correct sealing and connection procedures for a robust piping network."
-      },
-      "section": {
-        "label": "More Information",
-        "cta": "View Document",
-        "features": [
-          "Check pipe alignment before attaching flange",
-          "Use proper gasket material",
-          "Tighten bolts in cross pattern",
-          "Verify seal integrity after assembly"
-        ]
-      },
-      "footer": {
-        "label": "All technical details are for reference only."
-      }
+      "title": "Installation Instructions",
+      "varnix": "Installation instructions for welded saddles 2025",
+      "ppFlanes": "Installation instructions for PP flanges",
+      "ppFiting": "Installation instructions for PP pipes and fittings"
     }
   },
   "contact": {

messages/ru.json

@@ -174,70 +174,10 @@
       }
     },
     "notePPPage": {
-      "hero": {
-        "eyebrow": "Техническая документация",
-        "titleLine1": "ПП Трубы",
-        "titleLine2": "и Фитинги",
-        "title": "Инструкция по монтажу ПП труб и фитингов",
-        "description": "Пошаговые инструкции и лучшие практики по правильной установке полипропиленовых труб и фитингов для обеспечения надежных систем пожаротушения."
-      },
-      "section": {
-        "label": "Подробнее",
-        "cta": "Просмотреть документ",
-        "features": [
-          "Используйте чистые трубы без мусора",
-          "Обеспечьте правильное выравнивание перед сваркой",
-          "Применяйте рекомендованные методы уплотнения",
-          "Проверяйте соединения на утечки после установки"
-        ]
-      },
-      "footer": {
-        "label": "Все технические детали приведены для справки."
-      }
-    },
-    "noteTrailerPage": {
-      "hero": {
-        "eyebrow": "Техническая документация",
-        "titleLine1": "Вварные",
-        "titleLine2": "Сёдла",
-        "title": "Инструкция по монтажу вварных сёдел",
-        "description": "Детальные указания по безопасному размещению и сварке седел, используемых в системах пожаротушения, для обеспечения прочных и герметичных соединений."
-      },
-      "section": {
-        "label": "Подробнее",
-        "cta": "Просмотреть документ",
-        "features": [
-          "Выберите правильный размер седла",
-          "Подготовьте поверхность для сварки",
-          "Следуйте процедуре сварки производителя",
-          "Проверяйте целостность швов"
-        ]
-      },
-      "footer": {
-        "label": "Все технические детали приведены для справки."
-      }
-    },
-    "noteFlansPage": {
-      "hero": {
-        "eyebrow": "Техническая документация",
-        "titleLine1": "Nota",
-        "titleLine2": "Flanslar",
-        "title": "Инструкция по монтажу фланцев из ПП",
-        "description": "Комплексные инструкции по установке полипропиленовых фланцев с акцентом на правильное уплотнение и процедуры соединения для надежной трубопроводной сети."
-      },
-      "section": {
-        "label": "Подробнее",
-        "cta": "Просмотреть документ",
-        "features": [
-          "Проверьте выравнивание трубы перед установкой фланца",
-          "Используйте правильный материал прокладки",
-          "Затягивайте болты крест-накрест",
-          "Проверьте целостность уплотнения после сборки"
-        ]
-      },
-      "footer": {
-        "label": "Все технические детали приведены для справки."
-      }
+      "title": "Инструкция по монтажу",
+      "varnix": "Инструкция по монтажу вварных седел 2025",
+      "ppFlanes": "Инструкция по монтажу фланцев из ПП",
+      "ppFiting": "Инструкция по монтажу ПП труб и фитингов"
     }
   },
   "contact": {

messages/uz.json

@@ -174,70 +174,10 @@
       }
     },
     "notePPPage": {
-      "hero": {
-        "eyebrow": "Texnik hujjatlar",
-        "titleLine1": "PP Trubalar",
-        "titleLine2": "va Fitinglar",
-        "title": "PP trubalar va fitinglar o‘rnatish bo‘yicha qo‘llanma",
-        "description": "Ishonchli yong‘in muhofaza tizimlarini ta'minlash uchun polipropilen trubalar va fitinglarni to‘g‘ri o‘rnatish bo‘yicha bosqichma-bosqich ko‘rsatmalar va eng yaxshi amaliyotlar."
-      },
-      "section": {
-        "label": "Batafsil ma'lumot",
-        "cta": "Hujjatni ko'rish",
-        "features": [
-          "Toshqin va axloqsiz trubalardan foydalanmang",
-          "Payvand qilishdan oldin to'g'ri joylashishni ta'minlang",
-          "Tavsiya etilgan muhrlash usullarini qo'llang",
-          "O'rnatishdan keyin ulanishlarni oqish uchun tekshiring"
-        ]
-      },
-      "footer": {
-        "label": "Barcha texnik tafsilotlar ma'lumot uchun berilgan."
-      }
-    },
-    "noteTrailerPage": {
-      "hero": {
-        "eyebrow": "Texnik hujjatlar",
-        "titleLine1": "Qo‘shma",
-        "titleLine2": "Tirkamalar",
-        "title": "Qo‘shma tirkamalar o‘rnatish bo‘yicha qo‘llanma",
-        "description": "Yong‘in o‘chirish tizimlarida ishlatiladigan tirkamalarni xavfsiz joylashtirish va payvandlash bo‘yicha batafsil ko‘rsatmalar, mustahkam va oqmas ulanishlarni ta'minlash."
-      },
-      "section": {
-        "label": "Batafsil ma'lumot",
-        "cta": "Hujjatni ko'rish",
-        "features": [
-          "To'g'ri tirkama o'lchamini tanlang",
-          "Suvrutani payvandlash uchun tayyorlang",
-          "Ishlab chiqaruvchi payvandlash tartibiga rioya qiling",
-          "Shovotlar yaxlitligini tekshiring"
-        ]
-      },
-      "footer": {
-        "label": "Barcha texnik tafsilotlar ma'lumot uchun berilgan."
-      }
-    },
-    "noteFlansPage": {
-      "hero": {
-        "eyebrow": "Texnik hujjatlar",
-        "titleLine1": "Nota",
-        "titleLine2": "Flanslar",
-        "title": "PP flanslar o‘rnatish bo‘yicha qo‘llanma",
-        "description": "Polipropilen flanslarni o‘rnatish bo‘yicha to‘liq ko‘rsatmalar, ishontirishni to‘g‘ri muhrlash va ulanish protseduralariga e'tibor qaratilgan, mustahkam quvurlar tarmog‘i uchun."
-      },
-      "section": {
-        "label": "Batafsil ma'lumot",
-        "cta": "Hujjatni ko'rish",
-        "features": [
-          "Flansni o'rnatishdan oldin quvur tekisligini tekshiring",
-          "To'g'ri yostiqcha materialidan foydalaning",
-          "Boltlarni kesma naqshda siqib oling",
-          "Yig'ishdan keyin muhr qoplamasini tekshiring"
-        ]
-      },
-      "footer": {
-        "label": "Barcha texnik tafsilotlar ma'lumot uchun berilgan."
-      }
+      "title": "Montaj bo‘yicha ko‘rsatma",
+      "varnix": "Payvandlanadigan sedelkalarni o‘rnatish bo‘yicha yo‘riqnoma",
+      "ppFlanes": "PP flaneslarni o‘rnatish bo‘yicha yo‘riqnoma",
+      "ppFiting": "PP quvurlar va fitinglarni o‘rnatish bo‘yicha yo‘riqnoma"
     }
   },
   "contact": {