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