50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
export function AboutBanner() {
|
|
const t = useTranslations();
|
|
return (
|
|
<section className="relative w-full lg:h-[60vh] h-screen min-h-100 overflow-hidden pt-10">
|
|
{/* Background Image */}
|
|
<div
|
|
className="absolute inset-0 z-0"
|
|
style={{
|
|
backgroundImage: "url(/images/about/aboutBanner.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, #d2610a 0%, #1e1d1ce3 30%, #1e1d1ce3 100%)`,
|
|
}}
|
|
/>
|
|
|
|
<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="spacw-y-4 ">
|
|
<div className="flex items-center gap-3">
|
|
<DotAnimatsiya />
|
|
<span className="font-almarai text-sm text-white font-semibold tracking-wide">
|
|
{t("about.banner.title")}
|
|
</span>
|
|
</div>
|
|
<p
|
|
className="font-unbounded uppercase 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"
|
|
>
|
|
{t("about.banner.subtitle")}
|
|
</p>
|
|
</div>
|
|
<div className="font-almarai lg:w-[40%] text-gray-300 mt-20">
|
|
{t("about.banner.description")}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|