sertifiacte page updated

components/layout/navbar.tsx

@@ -24,8 +24,6 @@ export function Navbar() {
     { name: t("about.subPages.baza"), value: "baza" },
     { name: t("about.subPages.certificate"), value: "sertificate" },
     { name: t("about.subPages.notePP"), value: "notePP" },
-    { name: t("about.subPages.noteTrailer"), value: "noteTrailer" },
-    { name: t("about.subPages.noteFlans"), value: "noteFlans" },
   ];
 
   useEffect(() => {
@@ -85,7 +83,7 @@ export function Navbar() {
                 {t("navbar.home")}
               </Link>
               <DropdownMenu>
-                <DropdownMenuTrigger>
+                <DropdownMenuTrigger asChild>
                   <Link
                     href={`/${locale}/about`}
                     className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
@@ -96,7 +94,7 @@ export function Navbar() {
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   {tabs.map((tab) => (
-                    <DropdownMenuItem>
+                    <DropdownMenuItem asChild key={tab.value}>
                       <Link
                         href={`/${locale}/about/${tab.value}`}
                         className="font-unbounded w-full uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"

components/pages/about/aboutDetail/sertificateCard.tsx

@@ -0,0 +1,61 @@
+"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";
+
+export function CertCard({ c, i }: { c: (typeof certs)[0]; i: number }) {
+  const t = useTranslations();
+
+  return (
+    <motion.article
+      initial={{ opacity: 0, y: 28 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.55, delay: i * 0.1 }}
+      viewport={{ once: true }}
+      className="group flex flex-col rounded-2xl overflow-hidden p-5 bg-[#161514] border border-white/5 hover:border-red-600/20 transition-colors duration-300 w-full"
+    >
+      {/* Right: meta + actions */}
+      <div className="flex flex-col justify-between flex-1 min-w-0 py-1 gap-4">
+        <div className="space-y-2">
+          {/* Badge row */}
+          <div className="flex items-center gap-2 flex-wrap">
+            <div className="flex items-center gap-1.5">
+              <Award size={11} className="text-red-600 shrink-0" />
+              <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.category}
+            </span>
+          </div>
+
+          {/* Title */}
+          <h3 className="font-bold text-sm md:text-base text-white leading-snug">
+            {c.title}
+          </h3>
+        </div>
+      </div>
+
+      {/* ── Divider ── */}
+      <div className="mx-4 h-px bg-white/5 my-5" />
+
+      {/* Collapsible document list */}
+      <div className="overflow-hidden">
+        <ul className="flex flex-col gap-2.5">
+          {c.documents.map((doc, 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-600/60" />
+              <p className="text-xs text-gray-400 leading-relaxed">{doc}</p>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </motion.article>
+  );
+}