baza page complated

components/pages/about/aboutDetail/baza.tsx

@@ -3,6 +3,7 @@
 import { motion } from "framer-motion";
 import { ShieldCheck, BookOpen, Flame } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { NormativeCard } from "./normativeCard";
 
 const fadeUp = (delay = 0) => ({
   initial: { opacity: 0, y: 36 },
@@ -42,29 +43,11 @@ export default function NormativBazaPage() {
   ];
 
   return (
-    <div className="bg-[#0f0e0d] text-white min-h-screen pb-20">
+    <div className="bg-[#0f0e0d] text-white min-h-screen pt-10 pb-20">
       {/* ── Hero ── */}
-      <section className="relative w-full h-120 md:h-145 overflow-hidden">
-        {/* Background image */}
-        <img
-          src="/images/about/gaza.jpg"
-          alt="Normativ Baza"
-          className="absolute inset-0 w-full h-full object-cover"
-        />
-
-        {/* Layered gradient overlay — dark at bottom, semi at top */}
-        <div className="absolute inset-0 bg-linear-to-b from-black/50 via-black/40 to-[#0f0e0d]" />
-
-        {/* Subtle grain texture overlay */}
-        <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)' opacity='1'/%3E%3C/svg%3E")`,
-          }}
-        />
-
+      <section className="relative w-full px-2">
         {/* Content */}
-        <div className="relative z-10 flex flex-col justify-end h-full max-w-6xl mx-auto px-6 pb-16 md:pb-20">
+        <div className="relative z-10 flex flex-col justify-end h-full max-w-6xl mx-auto">
           <motion.span
             {...fadeUp(0)}
             className="text-xs font-black uppercase tracking-[0.22em] text-red-600 mb-4"
@@ -74,7 +57,7 @@ export default function NormativBazaPage() {
 
           <motion.h1
             {...fadeUp(0.1)}
-            className="text-5xl md:text-7xl font-black uppercase leading-[0.95] tracking-tight text-white"
+            className="text-4xl md:text-5xl lg:text-7xl font-black uppercase leading-[0.95] tracking-tight text-white"
           >
             {t("about.normativBaza.hero.title1")}
             <br />
@@ -100,55 +83,12 @@ export default function NormativBazaPage() {
         </div>
       </section>
 
-      {/* ── Cards section ── */}
-      <section className="max-w-6xl mx-auto px-6 py-20">
-        {/* Section label */}
-        <motion.p
-          {...fadeUpView(0)}
-          className="text-[11px] font-black uppercase tracking-[0.2em] text-red-600 mb-12"
-        >
-          Asosiy yo'nalishlar
-          {t("about.normativBaza.sectionLabel")}
-        </motion.p>
-
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-white/5 rounded-2xl overflow-hidden">
-          {cards.map((card, i) => {
-            const Icon = card.icon;
-            return (
-              <motion.div
-                key={i}
-                {...fadeUpView(i * 0.12)}
-                className="group relative bg-[#141312] hover:bg-[#1c1b19] transition-colors duration-300 p-8 flex flex-col gap-6"
-              >
-                {/* Large number watermark */}
-                <span className="absolute top-5 right-6 text-7xl font-black text-white/4 leading-none select-none group-hover:text-white/[0.07] transition-colors duration-300">
-                  {card.number}
-                </span>
-
-                {/* Icon */}
-                <div className="w-11 h-11 rounded-xl bg-red-400/30 border border-red-400/20 flex items-center justify-center group-hover:bg-red-400/20 transition-colors duration-300">
-                  <Icon size={20} className="text-red-600" />
-                </div>
-
-                {/* Text */}
-                <div className="flex flex-col gap-2">
-                  <h3 className="text-base font-bold uppercase tracking-wide text-white leading-tight">
-                    {card.title}
-                  </h3>
-                  <p className="text-sm text-gray-400 leading-relaxed group-hover:text-gray-300 transition-colors duration-300">
-                    {card.text}
-                  </p>
-                </div>
-              </motion.div>
-            );
-          })}
-        </div>
-      </section>
+      <NormativeCard />
 
       {/* ── Bottom quote band ── */}
       <motion.section
         {...fadeUpView(0)}
-        className="border-t border-white/5 max-w-6xl mx-auto px-6 py-16 flex flex-col md:flex-row items-start md:items-center gap-6 justify-between"
+        className="border-t border-white/5 max-w-6xl mx-auto px-6 py-10 flex flex-col md:flex-row items-start md:items-center gap-6 justify-between"
       >
         <p className="text-xl md:text-2xl font-bold text-white/80 max-w-lg leading-snug">
           {t("about.normativBaza.bottomText")}