nomative baza page complated
This commit is contained in:
nabijonovdavronbek619@gmail.com
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { Check } from "lucide-react";
|
||||
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
|
||||
|
||||
@@ -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": {
|
||||
|
||||
@@ -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": {
|
||||
|
||||
@@ -127,6 +127,30 @@
|
||||
"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": {
|
||||
|
||||
Reference in New Issue
Block a user