82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { ShieldCheck } from "lucide-react";
|
|
import { useTranslations } from "next-intl";
|
|
import { NormativeCard } from "./normativeCard";
|
|
|
|
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();
|
|
|
|
return (
|
|
<div className="bg-[#0f0e0d] text-white min-h-screen pt-10 pb-20">
|
|
{/* ── Hero ── */}
|
|
<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">
|
|
<motion.span
|
|
{...fadeUp(0)}
|
|
className="text-xs font-black uppercase tracking-[0.22em] text-red-600 mb-4"
|
|
>
|
|
{t("about.normativBaza.hero.label")}
|
|
</motion.span>
|
|
|
|
<motion.h1
|
|
{...fadeUp(0.1)}
|
|
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 />
|
|
<span className="text-red-700">
|
|
{t("about.normativBaza.hero.title2")}
|
|
</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
{...fadeUp(0.22)}
|
|
className="mt-6 max-w-xl text-sm md:text-base text-gray-300 leading-relaxed"
|
|
>
|
|
{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>
|
|
|
|
<NormativeCard />
|
|
|
|
{/* ── Bottom quote band ── */}
|
|
<motion.section
|
|
{...fadeUpView(0)}
|
|
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")}
|
|
</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>
|
|
);
|
|
}
|