translation

components/pages/about/whyChooseUs.tsx

@@ -3,13 +3,15 @@
 import Image from "next/image";
 import { Check } from "lucide-react";
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+import { useTranslations } from "next-intl";
 
 export function WhyChooseUs() {
+  const t = useTranslations();
   const features = [
-    { title: "Fast Response Team" },
-    { title: "Experienced Firefighter" },
-    { title: "Ready 24 Hours" },
-    { title: "Fast Response Team" },
+    { title: t("about.whyChoose.features.fastResponse") },
+    { title: t("about.whyChoose.features.ready24") },
+    { title: t("about.whyChoose.features.experienced") },
+    { title: t("about.whyChoose.features.quality") },
   ];
 
   return (
@@ -22,23 +24,20 @@ export function WhyChooseUs() {
             <div className="mb-4 flex items-center gap-2">
               <DotAnimatsiya />
               <span className="text-sm font-semibold tracking-wider text-white">
-                WHY CHOOSE US
+                {t("about.whyChoose.title")}
               </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
+              {t("about.whyChoose.subtitle")}
             </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.
+            {t("about.whyChoose.description")}
           </p>
 
           {/* Features Grid */}
@@ -58,7 +57,7 @@ export function WhyChooseUs() {
           {/* 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
+              {t("about.whyChoose.contact")}
             </button>
           </div>
         </div>
@@ -88,10 +87,7 @@ export function WhyChooseUs() {
               />
               <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
+                  {t("about.whyChoose.award")}
                 </p>
               </div>
             </div>