baza page complated

components/pages/about/aboutDetail/normativeCard.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useTranslations } from "next-intl";
+import { Award } from "lucide-react";
+import { normativeData } from "@/lib/demoData";
+
+export function NormativeCard() {
+  const t = useTranslations();
+
+  return (
+    <div className="flex flex-col gap-8 py-10 max-w-6xl mx-auto px-2">
+      {normativeData.map((c, i) => (
+        <motion.article
+          key={i}
+          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 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">
+            <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">
+                {t(c.titleKey)}
+              </h3>
+            </div>
+          </div>
+
+          {/* Divider */}
+          <div className="mx-4 h-px bg-white/5 sm:my-5 my-2" />
+
+          {/* Documents 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">
+                    {t(doc)}
+                  </p>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </motion.article>
+      ))}
+    </div>
+  );
+}