sertificate , guides pages done

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