nomative baza page complated

2026-03-02 10:03:54 +05:00
parent 9858216ae6
commit 361faf5709
6 changed files with 232 additions and 63 deletions
--- a/app/[locale]/about/baza/page.tsx
+++ b/app/[locale]/about/baza/page.tsx
@@ -1,8 +1,10 @@
 import NormativBazaPage from "@/components/pages/about/aboutDetail/baza";
+import { Statistics } from "@/components/pages/home";

 export default function Baza() {
  return (
    <div>
+      <Statistics />
      <NormativBazaPage />
    </div>
  );
--- a/components/pages/about/aboutDetail/baza.tsx
+++ b/components/pages/about/aboutDetail/baza.tsx
@@ -1,65 +1,162 @@
 "use client";

 import { motion } from "framer-motion";
+import { ShieldCheck, BookOpen, Flame } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+const fadeUp = (delay = 0) => ({
+  initial: { opacity: 0, y: 36 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.65, ease: [0.22, 1, 0.36, 1] as any, delay },
+});
+
+const fadeUpView = (delay = 0) => ({
+  initial: { opacity: 0, y: 48 },
+  whileInView: { opacity: 1, y: 0 },
+  transition: { duration: 0.65, ease: [0.22, 1, 0.36, 1] as any, delay },
+  viewport: { once: true },
+});

 export default function NormativBazaPage() {
+  const t = useTranslations();
+
+  const cards = [
+    {
+      icon: BookOpen,
+      title: t("about.normativBaza.cards.card1.title"),
+      text: t("about.normativBaza.cards.card1.text"),
+      number: "01",
+    },
+    {
+      icon: Flame,
+      title: t("about.normativBaza.cards.card2.title"),
+      text: t("about.normativBaza.cards.card2.text"),
+      number: "02",
+    },
+    {
+      icon: ShieldCheck,
+      title: t("about.normativBaza.cards.card3.title"),
+      text: t("about.normativBaza.cards.card3.text"),
+      number: "03",
+    },
+  ];
+
  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"
+    <div className="bg-[#0f0e0d] text-white min-h-screen 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")`,
+          }}
+        />
+
+        {/* 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">
+          <motion.span
+            {...fadeUp(0)}
+            className="text-xs font-black uppercase tracking-[0.22em] text-red-600 mb-4"
          >
-          Normativ Baza
+            {t("about.normativBaza.hero.label")}
+          </motion.span>
+
+          <motion.h1
+            {...fadeUp(0.1)}
+            className="text-5xl md:text-7xl font-black uppercase leading-[0.95] tracking-tight text-white"
+          >
+            {t("about.normativBaza.hero.title1")}
+            <br />
+            <span className="text-red-700">
+              {t("about.normativBaza.hero.title2")}
+            </span>
          </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"
+            {...fadeUp(0.22)}
+            className="mt-6 max-w-xl text-sm md:text-base text-gray-300 leading-relaxed"
          >
-          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.
+            {t("about.normativBaza.hero.description")}
          </motion.p>
+
+          {/* Decorative line */}
+          <motion.div
+            initial={{ scaleX: 0, originX: 0 }}
+            animate={{ scaleX: 1 }}
+            transition={{ delay: 0.4, duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
+            className="mt-10 w-24 h-px bg-red-700"
+          />
+        </div>
      </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) => (
+      {/* ── 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}
-            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"
+                {...fadeUpView(i * 0.12)}
+                className="group relative bg-[#141312] hover:bg-[#1c1b19] transition-colors duration-300 p-8 flex flex-col gap-6"
              >
-            <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>
+                {/* 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>
+
+      {/* ── 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"
+      >
+        <p className="text-xl md:text-2xl font-bold text-white/80 max-w-lg leading-snug">
+          {t("about.normativBaza.bottomText")}
+        </p>
+        <div className="shrink-0 w-16 h-16 rounded-2xl bg-red-400/10 border border-red-400/20 flex items-center justify-center">
+          <ShieldCheck size={28} className="text-red-600" />
+        </div>
+      </motion.section>
    </div>
  );
 }
--- a/components/pages/about/whyChooseUs.tsx
+++ b/components/pages/about/whyChooseUs.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import Image from "next/image";
 import { Check } from "lucide-react";
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
--- a/messages/en.json
+++ b/messages/en.json
@@ -127,6 +127,30 @@
      "notePP": "Installation guide for PP pipes and fittings",
      "noteTrailer": "Installation guide for welded saddles",
      "noteFlans": "Installation guide for PP flanges"
+    },
+    "normativBaza": {
+      "hero": {
+        "label": "Documents & Standards",
+        "title1": "Regulatory",
+        "title2": "Framework",
+        "description": "Our company installs and supplies fire protection equipment and systems in accordance with current regulatory and legal standards."
+      },
+      "sectionLabel": "Main Directions",
+      "cards": {
+        "card1": {
+          "title": "State Standards",
+          "text": "Equipment and installation works fully comply with national fire safety standards."
+        },
+        "card2": {
+          "title": "Technical Regulations",
+          "text": "All fire protection systems are designed and installed in compliance with current technical regulations."
+        },
+        "card3": {
+          "title": "Safety Requirements",
+          "text": "Each project is individually analyzed, taking into account the safety level of the facility."
+        }
+      },
+      "bottomText": "All works are carried out in accordance with state standards and safety requirements."
    }
  },
  "contact": {
--- a/messages/ru.json
+++ b/messages/ru.json
@@ -127,6 +127,30 @@
      "notePP": "Инструкция по монтажу ПП труб и фитингов",
      "noteTrailer": "Инструкция по монтажу вварных сёдел",
      "noteFlans": "Инструкция по монтажу фланцев из ПП"
+    },
+    "normativBaza": {
+      "hero": {
+        "label": "Документы и стандарты",
+        "title1": "Нормативная",
+        "title2": "База",
+        "description": "Наша компания осуществляет установку и продажу противопожарных средств и систем на основании действующих нормативно-правовых документов."
+      },
+      "sectionLabel": "Основные направления",
+      "cards": {
+        "card1": {
+          "title": "Государственные стандарты",
+          "text": "Оборудование и монтажные работы полностью соответствуют национальным стандартам пожарной безопасности."
+        },
+        "card2": {
+          "title": "Технические регламенты",
+          "text": "При проектировании и установке противопожарных систем соблюдаются действующие технические регламенты."
+        },
+        "card3": {
+          "title": "Требования безопасности",
+          "text": "Каждый проект анализируется индивидуально с учетом уровня безопасности объекта."
+        }
+      },
+      "bottomText": "Все работы выполняются в соответствии с государственными стандартами и требованиями безопасности."
    }
  },
  "contact": {
--- a/messages/uz.json
+++ b/messages/uz.json
@@ -121,12 +121,36 @@
      "contact": "BIZ BILAN BOG'LANISH",
      "award": "Eng Yaxshi Yong'in Himoyasi 2025"
    },
-    "subPages":{
-      "baza":"Normativ baza",
-      "certificate":"SLT BLOCKFIRE sertifikatlari",
-      "notePP":"PP trubalar va fitinglar bo‘yicha o‘rnatish qo‘llanmasi",
-      "noteTrailer":"Qo‘shma tirkamalar o‘rnatish bo‘yicha qo‘llanma",
-      "noteFlans":"PP flanslar o‘rnatish bo‘yicha qo‘llanma"
+    "subPages": {
+      "baza": "Normativ baza",
+      "certificate": "SLT BLOCKFIRE sertifikatlari",
+      "notePP": "PP trubalar va fitinglar bo‘yicha o‘rnatish qo‘llanmasi",
+      "noteTrailer": "Qo‘shma tirkamalar o‘rnatish bo‘yicha qo‘llanma",
+      "noteFlans": "PP flanslar o‘rnatish bo‘yicha qo‘llanma"
+    },
+    "normativBaza": {
+      "hero": {
+        "label": "Hujjatlar va standartlar",
+        "title1": "Normativ",
+        "title2": "Baza",
+        "description": "Kompaniyamiz yong'inga qarshi vositalar va tizimlarni o'rnatish hamda sotish faoliyatini amaldagi normativ-huquqiy hujjatlar asosida olib boradi."
+      },
+      "sectionLabel": "Asosiy yo'nalishlar",
+      "cards": {
+        "card1": {
+          "title": "Davlat Standartlari",
+          "text": "Yong'in xavfsizligi bo'yicha milliy standartlarga to'liq mos keluvchi uskunalar va montaj ishlari."
+        },
+        "card2": {
+          "title": "Texnik Reglamentlar",
+          "text": "Yong'inga qarshi tizimlarni loyihalash va o'rnatishda amaldagi texnik reglamentlarga rioya qilinadi."
+        },
+        "card3": {
+          "title": "Xavfsizlik Talablari",
+          "text": "Har bir loyiha individual tahlil qilinadi va obyektning xavfsizlik darajasi hisobga olinadi."
+        }
+      },
+      "bottomText": "Barcha ishlar davlat standartlari va xavfsizlik talablariga muvofiq amalga oshiriladi."
    }
  },
  "contact": {
@@ -304,10 +328,10 @@
  "productsNotFound": "Mahsulotlar topilmadi",
  "subcategory_not_found": "Subkategoriya topilmadi",
  "section": "Bo'lim",
-  "clear_all":"Barchasini tozalash",
-  "image_not_found":"Rasm mavjud emas",
+  "clear_all": "Barchasini tozalash",
+  "image_not_found": "Rasm mavjud emas",
  "loading_error": "Ma'lumotlarni yuklashda xatolik yuz berdi",
-  "products_not_found":"Mahsulotlar topilmadi",
+  "products_not_found": "Mahsulotlar topilmadi",
  "priceModal": {
    "title": "Narxni bilish",
    "product": {