104 lines
3.5 KiB
TypeScript
104 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { Check } from "lucide-react";
|
|
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
|
|
|
|
export function WhyChooseUs() {
|
|
const features = [
|
|
{ title: "Fast Response Team" },
|
|
{ title: "Experienced Firefighter" },
|
|
{ title: "Ready 24 Hours" },
|
|
{ title: "Fast Response Team" },
|
|
];
|
|
|
|
return (
|
|
<section className=" bg-[#1e1d1c] px-4 py-30 pb-40 md:px-8 lg:px-12">
|
|
<div className="mx-auto grid max-w-7xl gap-8 lg:grid-cols-2 lg:gap-16">
|
|
{/* Left Content */}
|
|
<div className="flex flex-col justify-center space-y-8">
|
|
{/* Header */}
|
|
<div>
|
|
<div className="mb-4 flex items-center gap-2">
|
|
<DotAnimatsiya />
|
|
<span className="text-sm font-semibold tracking-wider text-white">
|
|
WHY CHOOSE US
|
|
</span>
|
|
</div>
|
|
<h2
|
|
className="bg-linear-to-br from-white via-white to-black
|
|
text-transparent bg-clip-text text-4xl font-bold sm:text-5xl lg:text-6xl"
|
|
>
|
|
WE ARE BEST
|
|
<br />
|
|
FIREFIGHTER
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<p className="text-base leading-relaxed text-gray-400 sm:text-lg">
|
|
Aliquam lorem ante dapibus in viverra quis a tellus phasellus
|
|
viverra nulla ut metus varius laoreet quisque rutrum.
|
|
</p>
|
|
|
|
{/* Features Grid */}
|
|
<div className="grid grid-cols-2 gap-4 sm:gap-6">
|
|
{features.map((feature, index) => (
|
|
<div key={index} className="flex items-center gap-3">
|
|
<div className="shrink-0">
|
|
<Check className="h-5 w-5 text-red-600 sm:h-6 sm:w-6" />
|
|
</div>
|
|
<span className="text-sm font-medium text-white sm:text-base">
|
|
{feature.title}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA Button */}
|
|
<div>
|
|
<button className="shadow-[0px_0px_2px_8px_#ff01015c] rounded-full bg-red-600 px-6 py-3 font-bold text-white transition-all hover:bg-red-700 sm:px-8 sm:py-4">
|
|
CONTACT US
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Image Section */}
|
|
<div className="relative flex items-center justify-center">
|
|
<div className="relative h-96 md:w-[80%] w-full sm:h-125 lg:h-150">
|
|
{/* Main Image */}
|
|
<Image
|
|
src="/images/about/fighter.jpg"
|
|
alt="Best Award Firefighter"
|
|
fill
|
|
className="rounded-3xl object-cover object-right"
|
|
/>
|
|
|
|
{/* Overlay Gradient */}
|
|
<div className="absolute inset-0 rounded-3xl bg-linear-to-t from-black via-transparent to-black/0" />
|
|
|
|
{/* Award Badge */}
|
|
<div className="absolute bottom-6 left-1/2 flex -translate-x-1/2 items-center gap-3 ">
|
|
<Image
|
|
src="/images/home/emblem.png"
|
|
alt="Award"
|
|
width={70}
|
|
height={70}
|
|
className="h-24 w-24 sm:h-20 sm:w-20"
|
|
/>
|
|
<div>
|
|
<p className="text-sm font-bold text-white sm:text-base">
|
|
BEST AWARD
|
|
</p>
|
|
<p className="text-xs text-gray-400 sm:text-sm">
|
|
FIREFIGHTER 2025
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|