file name and location updayed for better be
This commit is contained in:
@@ -1,121 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import { Flame, Building2, Ambulance } from "lucide-react";
|
||||
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import Link from "next/link";
|
||||
|
||||
interface ServiceItem {
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export function AboutUs() {
|
||||
const t = useTranslations();
|
||||
const locale = useLocale();
|
||||
const services: ServiceItem[] = [
|
||||
{
|
||||
icon: <Flame width={40} height={40} className="text-red-500" />,
|
||||
title: t("home.about.prevention.title"),
|
||||
description: t("home.about.prevention.description"),
|
||||
},
|
||||
{
|
||||
icon: <Building2 width={40} height={40} className="text-red-500" />,
|
||||
title: t("home.about.accidents.title"),
|
||||
description: t("home.about.accidents.description"),
|
||||
},
|
||||
{
|
||||
icon: <Ambulance width={40} height={40} className="text-red-500" />,
|
||||
title: t("home.about.service.title"),
|
||||
description: t("home.about.service.description"),
|
||||
},
|
||||
];
|
||||
return (
|
||||
<section className="bg-[#1e1d1c] py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
|
||||
{/* Left Content */}
|
||||
<div className="space-y-8">
|
||||
{/* Header */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<DotAnimatsiya />
|
||||
<span className="font-almarai text-white font-bold text-sm tracking-wide">
|
||||
{t("home.about.title")}
|
||||
</span>
|
||||
</div>
|
||||
<h2
|
||||
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"
|
||||
>
|
||||
{t("home.about.subtitle")}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Services */}
|
||||
<div className="space-y-6">
|
||||
{services.map((service, index) => (
|
||||
<div key={index} className="flex items-center gap-4">
|
||||
<div className="rounded-lg p-3 inline-block bg-[#282828]">
|
||||
{service.icon}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="uppercase font-unbounded text-white font-bold text-base sm:text-lg mb-2">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="font-almarai text-gray-400 text-sm sm:text-base leading-relaxed">
|
||||
{service.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Button */}
|
||||
<div>
|
||||
<Link href={`/${locale}/about`} className="font-almarai bg-red-600 hover:bg-red-700 text-white font-bold px-8 py-3 rounded-full transition-colors duration-300 shadow-[0px_0px_2px_8px_#ff01015c]">
|
||||
{t("home.about.title")}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Image */}
|
||||
<div className="relative flex justify-center lg:justify-end">
|
||||
<div className="relative w-full max-w-md">
|
||||
{/* Main Image */}
|
||||
<div className="relative rounded-lg overflow-hidden bg-gray-900">
|
||||
<Image
|
||||
src="/images/img8.jpg"
|
||||
alt="Firefighter at ready"
|
||||
width={400}
|
||||
height={600}
|
||||
className="w-full h-150 object-cover"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Badge Overlay */}
|
||||
<div className="absolute bottom-4 right-4 sm:bottom-6 sm:left-6 flex items-center justify-start gap-3">
|
||||
<Image
|
||||
src="/images/home/emblem.png"
|
||||
alt="Best Award Badge"
|
||||
width={100}
|
||||
height={100}
|
||||
className="w-20 h-20 sm:w-24 sm:h-34 drop-shadow-lg"
|
||||
/>
|
||||
<div className="text-center">
|
||||
<p className="text-white font-bold text-sm sm:text-base">
|
||||
{t("home.about.award")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user