translation

components/layout/footer.tsx

@@ -4,8 +4,10 @@ import React from "react";
 
 import { useState } from "react";
 import { Mail, Phone, MapPin } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 export function Footer() {
+  const t = useTranslations();
   const [email, setEmail] = useState("");
   const [subscribed, setSubscribed] = useState(false);
 
@@ -75,8 +77,7 @@ export function Footer() {
                 <span className="text-xl font-bold text-white">FIREFORCE</span>
               </div>
               <p className="text-sm leading-relaxed text-gray-300">
-                They are seen as a beacon of hope, a figure who brings calm
-                amidst chaos and light in the darkest of moments.
+                {t("footer.description")}
               </p>
             </div>
 
@@ -86,12 +87,12 @@ export function Footer() {
               <ul className="space-y-3 text-gray-300">
                 <li>
                   <a href="#home" className="transition hover:text-[#fa1d1d]">
-                    Home
+                    {t("footer.quickLinks.home")}
                   </a>
                 </li>
                 <li>
                   <a href="#about" className="transition hover:text-[#fa1d1d]">
-                    About
+                    {t("footer.quickLinks.about")}
                   </a>
                 </li>
                 <li>
@@ -99,20 +100,12 @@ export function Footer() {
                     href="#services"
                     className="transition hover:text-[#fa1d1d]"
                   >
-                    Services
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#pricing"
-                    className="transition hover:text-[#fa1d1d]"
-                  >
-                    Pricing
+                    {t("footer.quickLinks.services")}
                   </a>
                 </li>
                 <li>
                   <a href="#blog" className="transition hover:text-[#fa1d1d]">
-                    Blog
+                    {t("footer.quickLinks.products")}
                   </a>
                 </li>
               </ul>
@@ -120,40 +113,13 @@ export function Footer() {
 
             {/* Support */}
             <div>
-              <h3 className="mb-6 text-lg font-bold text-white">SUPPORT</h3>
+              <h3 className="mb-6 text-lg font-bold text-white">
+                {t("footer.support.title")}
+              </h3>
               <ul className="space-y-3 text-gray-300">
                 <li>
                   <a href="#help" className="transition hover:text-[#fa1d1d]">
-                    Help Center
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#disclaimer"
-                    className="transition hover:text-[#fa1d1d]"
-                  >
-                    Disclaimer
-                  </a>
-                </li>
-                <li>
-                  <a href="#faq" className="transition hover:text-[#fa1d1d]">
-                    FAQ
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#support"
-                    className="transition hover:text-[#fa1d1d]"
-                  >
-                    Support
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#contact"
-                    className="transition hover:text-[#fa1d1d]"
-                  >
-                    Contact
+                    {t("footer.support.contact")}
                   </a>
                 </li>
               </ul>