home page parts

components/pages/home/about.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import { Flame, Building2, Ambulance } from "lucide-react";
+import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+
+interface ServiceItem {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+const services: ServiceItem[] = [
+  {
+    icon: <Flame width={40} height={40} className="text-red-500" />,
+    title: "FIRE PREVENTION",
+    description:
+      "Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum aenean imperdiet augue",
+  },
+  {
+    icon: <Building2 width={40} height={40} className="text-red-500" />,
+    title: "ACTIVE ACCIDENTS",
+    description:
+      "Nullam dictum felis eu pede mollis pretium. Integer tincidunt cras dapibus vivamus consequat vitae.",
+  },
+  {
+    icon: <Ambulance width={40} height={40} className="text-red-500" />,
+    title: "AMBULANCE SERVICE",
+    description:
+      "Donec pede justo fringilla vel aliquet nec vulputate eget arcu enim justo rhoncus ut venenatis.",
+  },
+];
+
+export function AboutUs() {
+  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="text-white font-bold text-sm tracking-wide">
+                  ABOUT US
+                </span>
+              </div>
+              <h2
+                className="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"
+              >
+                FIREFIGHTERS
+                <br />
+                AT THE READY
+              </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="text-white font-bold text-base sm:text-lg mb-2">
+                      {service.title}
+                    </h3>
+                    <p className="text-gray-400 text-sm sm:text-base leading-relaxed">
+                      {service.description}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Button */}
+            <div>
+              <Button className="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]">
+                ABOUT US
+              </Button>
+            </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/home/bolta.jpg"
+                  alt="Firefighter at ready"
+                  width={400}
+                  height={600}
+                  className="w-full h-auto 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">
+                    BEST AWARD
+                  </p>
+                  <p className="text-white font-bold text-sm sm:text-base">
+                    FIREFIGHTER 2025
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}