text font fixed

components/layout/footer.tsx

@@ -5,6 +5,7 @@ import React from "react";
 import { useState } from "react";
 import { Mail, Phone, MapPin } from "lucide-react";
 import { useTranslations } from "next-intl";
+import Image from "next/image";
 
 export function Footer() {
   const t = useTranslations();
@@ -33,10 +34,10 @@ export function Footer() {
         <div className="mx-auto max-w-6xl">
           <div className="rounded-2xl bg-[#fa1d1d] px-6 py-8 md:flex lg:flex-row flex-col max-lg:gap-5 md:items-center lg:justify-between justify-center md:px-10 md:py-12">
             <div className="mb-8 md:mb-0">
-              <h2 className="text-2xl font-bold text-white md:text-3xl">
+              <h2 className="font-unbounded text-2xl font-bold text-white md:text-3xl">
                 SUBSCRIBE OUR NEWSLETTER
               </h2>
-              <p className="mt-2 text-gray-100">
+              <p className="font-almarai mt-2 text-gray-100">
                 Expect a friendly letter from us once a week. No spam.
               </p>
             </div>
@@ -50,12 +51,12 @@ export function Footer() {
                 placeholder="Enter your email address"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                className="flex-1 rounded-full bg-white px-6 py-3 text-gray-800 placeholder-gray-400 focus:outline-none md:w-64"
+                className="font-almarai flex-1 rounded-full bg-white px-6 py-3 text-gray-800 placeholder-gray-400 focus:outline-none md:w-64"
                 required
               />
               <button
                 type="submit"
-                className="rounded-full bg-gray-800 px-6 py-3 font-bold text-white transition hover:bg-gray-700"
+                className="font-almarai rounded-full bg-gray-800 px-6 py-3 font-bold text-white transition hover:bg-gray-700"
               >
                 {subscribed ? "✓ Sent" : "SIGN UP"}
               </button>
@@ -71,40 +72,47 @@ export function Footer() {
             {/* Brand Section */}
             <div>
               <div className="mb-4 flex items-center gap-2">
-                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-[#fa1d1d]">
-                  <span className="text-lg font-bold text-white">⚡</span>
+                <div className=" flex items-center justify-center">
+                  <Image
+                    src="/images/IGNUM/PNG/1.@6x.png"
+                    alt="logo image"
+                    width={70}
+                    height={70}
+                    className=""
+                  />
                 </div>
-                <span className="text-xl font-bold text-white">FIREFORCE</span>
               </div>
-              <p className="text-sm leading-relaxed text-gray-300">
+              <p className="font-almarai text-sm leading-relaxed text-gray-300">
                 {t("footer.description")}
               </p>
             </div>
 
             {/* Quick Links */}
             <div>
-              <h3 className="mb-6 text-lg font-bold text-white">QUICK LINK</h3>
+              <h3 className="font-unbounded uppercase mb-6 text-lg font-bold text-white">
+                {t("footer.quickLinks.title")}
+              </h3>
               <ul className="space-y-3 text-gray-300">
                 <li>
-                  <a href="#home" className="transition hover:text-[#fa1d1d]">
+                  <a href="#home" className="font-almarai transition hover:text-[#fa1d1d]">
                     {t("footer.quickLinks.home")}
                   </a>
                 </li>
                 <li>
-                  <a href="#about" className="transition hover:text-[#fa1d1d]">
+                  <a href="#about" className="font-almarai transition hover:text-[#fa1d1d]">
                     {t("footer.quickLinks.about")}
                   </a>
                 </li>
                 <li>
                   <a
                     href="#services"
-                    className="transition hover:text-[#fa1d1d]"
+                    className="font-almarai transition hover:text-[#fa1d1d]"
                   >
                     {t("footer.quickLinks.services")}
                   </a>
                 </li>
                 <li>
-                  <a href="#blog" className="transition hover:text-[#fa1d1d]">
+                  <a href="#blog" className="font-almarai transition hover:text-[#fa1d1d]">
                     {t("footer.quickLinks.products")}
                   </a>
                 </li>
@@ -113,10 +121,10 @@ export function Footer() {
 
             {/* Support */}
             <div>
-              <h3 className="mb-6 text-lg font-bold text-white">
+              <h3 className="font-unbounded mb-6 text-lg font-bold text-white">
                 {t("footer.support.title")}
               </h3>
-              <ul className="space-y-3 text-gray-300">
+              <ul className="font-almarai space-y-3 text-gray-300">
                 <li>
                   <a href="#help" className="transition hover:text-[#fa1d1d]">
                     {t("footer.support.contact")}
@@ -127,8 +135,8 @@ export function Footer() {
 
             {/* Contact */}
             <div>
-              <h3 className="mb-6 text-lg font-bold text-white">CONTACT</h3>
-              <ul className="space-y-4 text-gray-300">
+              <h3 className="font-unbounded uppercase mb-6 text-lg font-bold text-white">{t("footer.support.contact")}</h3>
+              <ul className="font-almarai space-y-4 text-gray-300">
                 <li className="flex items-start gap-3">
                   <Phone className="mt-1 h-5 w-5 shrink-0 text-white" />
                   <a href="tel:+1234567890" className="hover:text-[#fa1d1d]">
@@ -157,7 +165,7 @@ export function Footer() {
       {/* Copyright Section */}
       <div className="border-t border-gray-800 px-4 py-8">
         <div className="mx-auto max-w-6xl">
-          <div className="flex flex-col justify-between gap-4 text-sm text-gray-400 md:flex-row md:items-center">
+          <div className="font-almarai flex flex-col justify-between gap-4 text-sm text-gray-400 md:flex-row md:items-center">
             <div>
               Copyright © 2025 Fireforce. Built with
               <span className="text-white">

components/layout/navbar.tsx

@@ -39,7 +39,7 @@ export function Navbar() {
             {/* Logo */}
             <Link href="/" className="hover:cursor-pointer">
               <div className="flex items-center gap-2">
-                <div className="p-2 rounded-xl flex items-center justify-center">
+                <div className=" flex items-center justify-center">
                   <Image
                     src="/images/IGNUM/PNG/1.@6x.png"
                     alt="logo image"
@@ -55,13 +55,13 @@ export function Navbar() {
             <div className="hidden h-full lg:flex items-center gap-8">
               <Link
                 href="/"
-                className="text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
+                className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
               >
                 {t("navbar.home")}
               </Link>
               <Link
                 href="/about"
-                className="text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
+                className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
               >
                 {t("navbar.about")}
               </Link>
@@ -69,7 +69,7 @@ export function Navbar() {
               {/* Pages Dropdown */}
               <div className="relative group h-full">
                 <button
-                  className="text-white text-sm h-full font-semibold hover:text-red-500 
+                  className="font-unbounded uppercase text-white text-sm h-full font-semibold hover:text-red-500 
                transition-colors flex items-center gap-1"
                 >
                   {t("navbar.pages")}
@@ -89,21 +89,21 @@ export function Navbar() {
                 >
                   <Link
                     href="/faq"
-                    className="block px-4 py-2 text-black text-sm hover:bg-red-600 
+                    className="font-unbounded uppercase block px-4 py-2 text-black text-sm hover:bg-red-600 
                  hover:text-white transition-colors"
                   >
                     {t("navbar.faq")}
                   </Link>
                   <Link
                     href="/services"
-                    className="block px-4 py-2 text-black text-sm hover:bg-red-600 
+                    className="font-unbounded uppercase block px-4 py-2 text-black text-sm hover:bg-red-600 
                  hover:text-white transition-colors"
                   >
                     {t("navbar.services")}
                   </Link>
                   {/* <Link
                     href="/blog"
-                    className="block px-4 py-2 text-black text-sm hover:bg-red-600 
+                    className="font-unbounded uppercase block px-4 py-2 text-black text-sm hover:bg-red-600 
                  hover:text-white transition-colors rounded-b-md"
                   >
                     Blog
@@ -113,13 +113,13 @@ export function Navbar() {
 
               <Link
                 href="/products"
-                className="text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
+                className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
               >
                 {t("navbar.products")}
               </Link>
               <Link
                 href="/contact"
-                className="text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
+                className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
               >
                 {t("navbar.contact")}
               </Link>
@@ -133,7 +133,7 @@ export function Navbar() {
               <div className="hidden lg:flex items-center gap-3 bg-red-600 px-4 py-2 rounded-full">
                 <Phone size={20} className="text-white" />
                 <div>
-                  <div className="text-white text-xs font-semibold">
+                  <div className="font-unbounded uppercase text-white text-xs font-semibold">
                     {t("navbar.emergency")}
                   </div>
                   <div className="text-white text-sm font-bold">
@@ -174,17 +174,16 @@ export function Navbar() {
         <div className="flex justify-between items-center p-6 border-b border-gray-700">
           {/* Logo */}
           <Link href="/" className="hover:cursor-pointer">
-            <div className="flex items-center gap-2">
-              <div className="p-2 rounded-xl flex items-center justify-center">
+            <div className="font-unbounded uppercase flex flex-col items-center text-2xl gap-2 text-white font-bold">
+              <div className=" flex items-center justify-center">
                 <Image
                   src="/images/IGNUM/PNG/1.@6x.png"
                   alt="logo image"
-                  width={70}
-                  height={70}
+                  width={50}
+                  height={50}
                   className=""
                 />
               </div>
-              Ignum
             </div>
           </Link>
           <button
@@ -199,14 +198,14 @@ export function Navbar() {
         <div className="flex flex-col p-6 gap-4">
           <Link
             href="/"
-            className="text-white text-base font-semibold hover:text-red-500 transition py-2"
+            className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition py-2"
             onClick={() => setIsMobileMenuOpen(false)}
           >
             {t("navbar.home")}
           </Link>
           <Link
             href="/about"
-            className="text-white text-base font-semibold hover:text-red-500 transition py-2"
+            className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition py-2"
             onClick={() => setIsMobileMenuOpen(false)}
           >
             {t("navbar.about")}
@@ -216,7 +215,7 @@ export function Navbar() {
           <div>
             <button
               onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-              className="text-white text-base font-semibold hover:text-red-500 transition flex items-center gap-1 py-2 w-full"
+              className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition flex items-center gap-1 py-2 w-full"
             >
               {t("navbar.pages")}
               <ChevronDown
@@ -228,14 +227,14 @@ export function Navbar() {
               <div className="ml-4 mt-2 flex flex-col gap-2">
                 <Link
                   href="/faq"
-                  className="text-white/80 text-sm hover:text-red-500 transition py-2"
+                  className="font-unbounded uppercase text-white/80 text-sm hover:text-red-500 transition py-2"
                   onClick={() => setIsMobileMenuOpen(false)}
                 >
                   {t("navbar.faq")}
                 </Link>
                 <Link
                   href="/services"
-                  className="text-white/80 text-sm hover:text-red-500 transition py-2"
+                  className="font-unbounded uppercase text-white/80 text-sm hover:text-red-500 transition py-2"
                   onClick={() => setIsMobileMenuOpen(false)}
                 >
                   {t("navbar.services")}
@@ -246,14 +245,14 @@ export function Navbar() {
 
           <Link
             href="/products"
-            className="text-white text-base font-semibold hover:text-red-500 transition py-2"
+            className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition py-2"
             onClick={() => setIsMobileMenuOpen(false)}
           >
             {t("navbar.products")}
           </Link>
           <Link
             href="/contact"
-            className="text-white text-base font-semibold hover:text-red-500 transition py-2"
+            className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition py-2"
             onClick={() => setIsMobileMenuOpen(false)}
           >
             {t("navbar.contact")}