inner navbar belong about page

app/[locale]/about/baza/page.tsx

@@ -0,0 +1,9 @@
+import NormativBazaPage from "@/components/pages/about/aboutDetail/baza";
+
+export default function Baza() {
+  return (
+    <div>
+      <NormativBazaPage />
+    </div>
+  );
+}

app/[locale]/about/layout.tsx

@@ -0,0 +1,15 @@
+import { AboutBanner } from "@/components/pages/about";
+import React from "react";
+
+export default function AboutLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <AboutBanner />
+      {children}
+    </div>
+  );
+}

app/[locale]/about/page.tsx

@@ -1,10 +1,9 @@
-import { AboutBanner, Story, WhyChooseUs } from "@/components/pages/about";
+import { Story, WhyChooseUs } from "@/components/pages/about";
 import { Statistics } from "@/components/pages/home";
 
 export default function Page() {
   return (
     <div className="mb-0">
-      <AboutBanner />
       <Story />
       <Statistics/>
       <WhyChooseUs/>

components/pages/about/aboutBanner.tsx

@@ -1,10 +1,11 @@
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
 import { useTranslations } from "next-intl";
+import { InnerNavbar } from "./innerNavbar";
 
 export function AboutBanner() {
   const t = useTranslations();
   return (
-    <section className="relative w-full lg:h-[60vh] h-screen min-h-100 overflow-hidden pt-10">
+    <section className="relative w-full lg:h-[70vh] min-[350px]:h-[90vh] h-screen min-h-100 overflow-hidden pt-10">
       {/* Background Image */}
       <div
         className="absolute inset-0 z-0"
@@ -24,7 +25,10 @@ export function AboutBanner() {
       />
 
       <div className="max-w-250 w-full mx-auto px-4">
-        <div className="relative z-20 h-full flex max-lg:flex-col items-start justify-between gap-5 pt-30">
+        <div className="relative z-20 pt-50 sm:pt-30 pb-10">
+          <InnerNavbar />
+        </div>
+        <div className="relative z-20 h-full flex max-lg:flex-col items-start justify-between gap-5">
           <div className="spacw-y-4 ">
             <div className="flex items-center gap-3">
               <DotAnimatsiya />
@@ -39,7 +43,7 @@ export function AboutBanner() {
               {t("about.banner.subtitle")}
             </p>
           </div>
-          <div className="font-almarai lg:w-[40%] text-gray-300 mt-20">
+          <div className="font-almarai lg:w-[40%] text-gray-300 sm:mt-20">
             {t("about.banner.description")}
           </div>
         </div>

components/pages/about/aboutDetail/baza.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export default function NormativBazaPage() {
+  return (
+    <div className="min-h-screen bg-[#1e1d1c] text-gray-900">
+      {/* Hero Section */}
+      <section className="max-w-6xl mx-auto px-6 py-20">
+        <motion.h1
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="text-5xl font-bold mb-6 uppercase bg-linear-to-br from-white via-white/50 to-black
+  text-transparent bg-clip-text"
+        >
+          Normativ Baza
+        </motion.h1>
+
+        <motion.p
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2, duration: 0.6 }}
+          className="text-lg text-gray-300 max-w-3xl"
+        >
+          Kompaniyamiz yong‘inga qarshi vositalar va tizimlarni o‘rnatish hamda
+          sotish faoliyatini amaldagi normativ-huquqiy hujjatlar asosida olib
+          boradi. Barcha ishlar davlat standartlari va xavfsizlik talablariga
+          muvofiq amalga oshiriladi.
+        </motion.p>
+      </section>
+
+      {/* Cards */}
+      <section className="max-w-6xl mx-auto px-6 pb-20 grid md:grid-cols-3 gap-8">
+        {[
+          {
+            title: "Davlat Standartlari",
+            text: "Yong‘in xavfsizligi bo‘yicha milliy standartlarga to‘liq mos keluvchi uskunalar va montaj ishlari.",
+          },
+          {
+            title: "Texnik Reglamentlar",
+            text: "Yong‘inga qarshi tizimlarni loyihalash va o‘rnatishda amaldagi texnik reglamentlarga rioya qilinadi.",
+          },
+          {
+            title: "Xavfsizlik Talablari",
+            text: "Har bir loyiha individual tahlil qilinadi va obyektning xavfsizlik darajasi hisobga olinadi.",
+          },
+        ].map((item, i) => (
+          <motion.div
+            key={i}
+            initial={{ opacity: 0, y: 60 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: i * 0.2 }}
+            viewport={{ once: true }}
+            className="border rounded-2xl p-6 hover:shadow-xl transition"
+          >
+            <h3 className="text-xl font-semibold mb-3 uppercase bg-linear-to-br from-white via-white/80 to-black
+  text-transparent bg-clip-text">{item.title}</h3>
+            <p className="text-gray-300">{item.text}</p>
+          </motion.div>
+        ))}
+      </section>
+    </div>
+  );
+}

components/pages/about/index.ts

@@ -2,3 +2,4 @@ export { AboutBanner } from "./aboutBanner";
 export { Story } from "./story";
 export { AboutLine } from "./aboutLine";
 export { WhyChooseUs } from "./whyChooseUs";
+export { InnerNavbar } from "./innerNavbar";

components/pages/about/innerNavbar.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useLocale, useTranslations } from "next-intl";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export function InnerNavbar() {
+  const t = useTranslations();
+  const locale = useLocale();
+  const pathname = usePathname();
+
+  const tabs = [
+    { name: t("about.subPages.baza"), value: "baza" },
+    { name: t("about.subPages.certificate"), value: "certificate" },
+    { name: t("about.subPages.notePP"), value: "notePP" },
+    { name: t("about.subPages.noteTrailer"), value: "noteTrailer" },
+    { name: t("about.subPages.noteFlans"), value: "noteFlans" },
+  ];
+
+  return (
+    <nav className="w-full border-b border-gray-100 bg-[#1e1d1c] sticky top-0 z-30">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center gap-1 overflow-x-auto scrollbar-none [-ms-overflow-style:none] [scrollbar-width:none]">
+          {tabs.map((tab) => {
+            const href = `/${locale}/about/${tab.value}`;
+            const isActive = pathname === href || pathname.endsWith(`/about/${tab.value}`);
+
+            return (
+              <Link
+                key={tab.value}
+                href={href}
+                className={[
+                  "relative shrink-0 px-4 py-4 text-sm font-semibold transition-colors duration-200 whitespace-nowrap",
+                  "after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:rounded-full after:transition-all after:duration-200",
+                  isActive
+                    ? "text-red-600 "
+                    : "text-gray-300 after:bg-transparent hover:text-red-600",
+                ].join(" ")}
+              >
+                {tab.name}
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export default InnerNavbar;

components/pages/about/story.tsx

@@ -6,7 +6,7 @@ export function Story() {
   return (
     <div className="pb-0 relative z-10 max-[350px]:pb-30 ">
       <div className="max-w-260 mx-auto px-4">
-        <section className="relative -top-30 rounded-xl w-full lg:h-[70vh] h-[80vh] min-h-150 sm:overflow-hidden shadow-2xl flex flex-col items-start justify-between">
+        <section className="relative -top-20 rounded-xl w-full lg:h-[70vh] h-[80vh] min-h-150 sm:overflow-hidden shadow-2xl flex flex-col items-start justify-between">
           {/* Background Image */}
           <div
             className="absolute inset-0 z-0 rounded-xl"