100 lines
3.8 KiB
TypeScript
100 lines
3.8 KiB
TypeScript
import { useTranslations } from "next-intl";
|
|
import Image from "next/image";
|
|
|
|
export function Story() {
|
|
const t = useTranslations();
|
|
return (
|
|
<div className="bg-[#1e1d1c] pb-0 relative z-10 max-[350px]:pb-30 ">
|
|
<div className="max-w-260 mx-auto px-4">
|
|
<section className="relative -top-30 rounded-xl w-full lg:h-[70vh] h-[80vh] min-h-150 sm:overflow-hidden shadow-2xl flex flex-col items-start justify-between">
|
|
{/* Background Image */}
|
|
<div
|
|
className="absolute inset-0 z-0 rounded-xl"
|
|
style={{
|
|
backgroundImage: "url(/images/img13.jpg)",
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "center",
|
|
}}
|
|
/>
|
|
|
|
{/* Gradient Overlay */}
|
|
<div
|
|
className="absolute inset-0 z-10 rounded-xl"
|
|
style={{
|
|
background: `linear-gradient(to bottom right, black 5%, transparent 70%, transparent 90%)`,
|
|
}}
|
|
/>
|
|
|
|
{/* Content */}
|
|
<div className="relative z-20 p-8 lg:p-12 max-w-130">
|
|
<h2 className="text-white text-4xl lg:text-5xl font-bold mb-6">
|
|
{t("about.story.title")}
|
|
</h2>
|
|
<p className="text-gray-300 mb-4">{t("about.story.description")}</p>
|
|
<button className="text-white flex items-center gap-2 hover:text-red-500 transition">
|
|
{t("about.story.readMore")}
|
|
<svg
|
|
className="w-4 h-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 5l7 7-7 7"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* bottom cards */}
|
|
<div className="flex max-md:flex-col items-end justify-center md:gap-10 gap-5 z-20 relative bottom-0 mx-auto max-md:pb-5 max-sm:px-2">
|
|
<div
|
|
className="flex sm:flex-row flex-col sm:items-center items-start
|
|
md:rounded-t-xl max-md:rounded-xl max-w-md w-full sm:p-7 p-2 bg-linear-to-br
|
|
from-[#f21b1b] to-[#830909] sm:gap-5 gap-2"
|
|
>
|
|
<span className="sm:rounded-xl rounded-lg bg-black sm:p-3 p-1 max-sm:w-15 max-sm:h-15">
|
|
<Image
|
|
src="/images/about/fireforce-vision.png"
|
|
alt="image icon"
|
|
width={100}
|
|
height={100}
|
|
className="object-cover"
|
|
/>
|
|
</span>
|
|
<div className="space-y-1 text-white">
|
|
<h2 className="text-xl font-semibold">
|
|
{t("about.story.vision.title")}
|
|
</h2>
|
|
<p>{t("about.story.vision.description")}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex sm:flex-row flex-col sm:items-center items-start md:rounded-t-xl max-md:rounded-xl max-w-md w-full sm:p-7 p-2 bg-black sm:gap-5 gap-2">
|
|
<span className="sm:rounded-xl rounded-lg bg-[#1e1d1c] sm:p-3 p-1 max-sm:w-15 max-sm:h-15">
|
|
<Image
|
|
src="/images/about/fireforce-mission.png"
|
|
alt="image icon"
|
|
width={100}
|
|
height={100}
|
|
className=""
|
|
/>
|
|
</span>
|
|
<div className="space-y-1 text-white">
|
|
<h2 className="text-xl font-semibold">
|
|
{t("about.story.mission.title")}
|
|
</h2>
|
|
<p>
|
|
{t("about.story.mission.description")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|