translation

components/pages/home/about.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import Image from "next/image";
 import { Flame, Building2, Ambulance } from "lucide-react";
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+import { useTranslations } from "next-intl";
 
 interface ServiceItem {
   icon: React.ReactNode;
@@ -13,28 +14,25 @@ interface ServiceItem {
   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() {
+  const t = useTranslations();
+  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">
@@ -46,16 +44,14 @@ export function AboutUs() {
               <div className="flex items-center gap-3">
                 <DotAnimatsiya />
                 <span className="text-white font-bold text-sm tracking-wide">
-                  ABOUT US
+                  {t("home.about.title")}
                 </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
+                {t("home.about.subtitle")}
               </h2>
             </div>
 
@@ -81,7 +77,7 @@ export function AboutUs() {
             {/* 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
+                {t("home.about.title")}
               </Button>
             </div>
           </div>
@@ -112,10 +108,7 @@ export function AboutUs() {
                 />
                 <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
+                    {t("home.about.award")}
                   </p>
                 </div>
               </div>