101 lines
3.9 KiB
TypeScript
101 lines
3.9 KiB
TypeScript
import { useTranslations } from "next-intl";
|
|
import DotAnimatsiya from "../../dot/DotAnimatsiya";
|
|
|
|
export function Banner() {
|
|
const t = useTranslations();
|
|
return (
|
|
<section className="relative w-full lg:h-[86vh] h-screen min-h-150 overflow-hidden pt-20">
|
|
{/* Background Image */}
|
|
<div
|
|
className="absolute inset-0 z-0"
|
|
style={{
|
|
backgroundImage: "url(/images/home/banner.jpg)",
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "center",
|
|
}}
|
|
/>
|
|
|
|
{/* Gradient Overlay - Bottom-left to top-right */}
|
|
<div
|
|
className="absolute inset-0 z-10"
|
|
style={{
|
|
background: `linear-gradient(to top right, #c75c08 0%, #1e1d1ce3 28%, #1e1d1ce3 100%)`,
|
|
}}
|
|
/>
|
|
|
|
{/* Content Container */}
|
|
<div className="relative z-20 h-full flex items-center lg:mt-0 sm:mt-[10vh] mt-[5vh]">
|
|
<div className="max-w-400 mx-auto px-4 sm:px-6 lg:px-8 w-full">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center h-full">
|
|
{/* Right side - Text Content */}
|
|
<div className="lg:hidden inline-block space-y-6 text-white">
|
|
{/* Badge */}
|
|
<div className="flex items-center gap-2 w-fit">
|
|
<DotAnimatsiya />
|
|
<span className="text-sm font-semibold tracking-wide font-almarai">
|
|
{t("home.banner.title1")}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Main Heading */}
|
|
<h1
|
|
className="bg-linear-to-br from-white via-white to-black
|
|
text-transparent bg-clip-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty font-unbounded"
|
|
>
|
|
{t("home.banner.title2")}
|
|
</h1>
|
|
|
|
{/* Description */}
|
|
<p className="text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
|
|
{t("home.banner.description")}
|
|
</p>
|
|
|
|
{/* CTA Button */}
|
|
<button className="shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
|
|
{t("home.banner.cta")}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Left side - Firefighters Image */}
|
|
<div className="flex items-end justify-center ">
|
|
<img
|
|
src="/images/homeBanner.png"
|
|
alt="Firefighters"
|
|
loading="lazy"
|
|
className="lg:w-150 w-100 lg:h-150 max-[300px]:w-[80vw] object-cover object-right rounded-xl drop-shadow-2xl"
|
|
/>
|
|
</div>
|
|
|
|
{/* Right side - Text Content */}
|
|
<div className="lg:inline-block hidden space-y-6 mb-20">
|
|
{/* Badge */}
|
|
<div className="flex items-center gap-2 w-fit">
|
|
<DotAnimatsiya />
|
|
<span className="text-sm font-semibold text-white tracking-wide font-almarai">
|
|
{t("home.banner.title1")}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Main Heading */}
|
|
<h1 className="font-unbounded uppercase text-4xl bg-linear-to-br from-white via-white to-black
|
|
text-transparent bg-clip-text sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty">
|
|
{t("home.banner.title2")}
|
|
</h1>
|
|
|
|
{/* Description */}
|
|
<p className="font-almarai text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
|
|
{t("home.banner.description")}
|
|
</p>
|
|
|
|
{/* CTA Button */}
|
|
<button className="font-almarai shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
|
|
{t("home.banner.cta")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|