translation

2026-01-27 20:44:21 +05:00
parent 21cb013cd8
commit ac7cd51600
24 changed files with 397 additions and 337 deletions
--- a/components/pages/home/about.tsx
+++ b/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>
--- a/components/pages/home/banner.tsx
+++ b/components/pages/home/banner.tsx
@@ -1,6 +1,8 @@
+import { useTranslations } from "next-intl";
 import DotAnimatsiya from "../../dot/DotAnimatsiya";

 export function Banner() {
+  const t = useTranslations();
  return (
    <section className="relative w-full lg:h-[86vh] h-screen min-h-150 overflow-hidden pt-20">
      {/* Background Image */}
@@ -22,8 +24,8 @@ export function Banner() {
      />

      {/* Content Container */}
-      <div className="relative z-20 h-full flex items-end lg:mt-0 md:mt-[15vh] sm:mt-[5vh] mt-0">
-        <div className="max-w-375 mx-auto px-4 sm:px-6 lg:px-8 w-full">
+      <div className="relative z-20 h-full flex items-center lg:mt-0 md:mt-[20vh] sm:mt-[10vh] mt-0">
+        <div className="max-w-400 mx-auto px-4 sm:px-6 lg:px-8 w-full">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center h-full">
            {/* Right side - Text Content */}
            <div className="lg:hidden inline-block space-y-6 text-white">
@@ -31,7 +33,7 @@ export function Banner() {
              <div className="flex items-center gap-2 w-fit">
                <DotAnimatsiya />
                <span className="text-sm font-semibold tracking-wide">
-                  WELCOME TO FIREFORCE
+                  {t("home.banner.title1")}
                </span>
              </div>

@@ -40,28 +42,27 @@ export function Banner() {
                className="bg-linear-to-br from-white via-white to-black
  text-transparent bg-clip-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty"
              >
-                THE FIRE GUARDIAN
+                {t("home.banner.title2")}
              </h1>

              {/* Description */}
              <p className="text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
-                They are seen as a beacon of hope, a figure who brings calm
-                amidst chaos and light in the darkest of moments.
+                {t("home.banner.description")}
              </p>

              {/* CTA Button */}
              <button className="shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
-                GET STARTED
+                {t("home.banner.cta")}
              </button>
            </div>

            {/* Left side - Firefighters Image */}
-            <div className="flex items-end justify-center">
+            <div className="flex items-end justify-center overflow-hidden ">
              <img
-                src="/images/home/bannerHuman.png"
+                src="/images/img15.webp"
                alt="Firefighters"
                loading="lazy"
-                className="w-full max-lg:w-[80vw] h-auto object-cover drop-shadow-2xl"
+                className="w-150 h-100 max-[300px]:w-[80vw] object-cover object-right rounded-xl drop-shadow-2xl"
              />
            </div>

@@ -71,24 +72,23 @@ export function Banner() {
              <div className="flex items-center gap-2 w-fit">
                <DotAnimatsiya />
                <span className="text-sm font-semibold tracking-wide">
-                  WELCOME TO FIREFORCE
+                  {t("home.banner.title1")}
                </span>
              </div>

              {/* Main Heading */}
              <h1 className="gradient-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty">
-                THE FIRE GUARDIAN
+                {t("home.banner.title2")}
              </h1>

              {/* Description */}
              <p className="text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
-                They are seen as a beacon of hope, a figure who brings calm
-                amidst chaos and light in the darkest of moments.
+                {t("home.banner.description")}
              </p>

              {/* CTA Button */}
              <button className="shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
-                GET STARTED
+                {t("home.banner.cta")}
              </button>
            </div>
          </div>
--- a/components/pages/home/blog.tsx
+++ b/components/pages/home/blog.tsx
@@ -1,35 +1,37 @@
 import Image from "next/image";
 import { ChevronRight } from "lucide-react";
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
-
-const blogPosts = [
-  {
-    id: 1,
-    image: "/images/img14.webp",
-    category: "Tips & Trick",
-    title: "BEHIND THE HELMET: LIFE AS A FIREFIGHTER",
-    author: "John Doe",
-    date: "July 24, 2025",
-  },
-  {
-    id: 2,
-    image: "/images/img15.webp",
-    category: "Insight",
-    title: "FIREFIGHTING EQUIPMENT: TOOLS OF THE TRADE",
-    author: "John Doe",
-    date: "July 24, 2025",
-  },
-  {
-    id: 3,
-    image: "/images/img16.webp",
-    category: "News",
-    title: "FIREFIGHTER TRAINING TAKES TO BECOME A HERO",
-    author: "John Doe",
-    date: "July 24, 2025",
-  },
-];
+import { useTranslations } from "next-intl";

 export function Blog() {
+  const t = useTranslations();
+  const blogPosts = [
+    {
+      id: 1,
+      image: "/images/img14.webp",
+      category: "Tips & Trick",
+      title: t("home.blog.articles.article1"),
+      author: "John Doe",
+      date: "July 24, 2025",
+    },
+    {
+      id: 2,
+      image: "/images/img15.webp",
+      category: "Insight",
+      title: t("home.blog.articles.article2"),
+      author: "John Doe",
+      date: "July 24, 2025",
+    },
+    {
+      id: 3,
+      image: "/images/img16.webp",
+      category: "News",
+      title: t("home.blog.articles.article3"),
+      author: "John Doe",
+      date: "July 24, 2025",
+    },
+  ];
+
  return (
    <section className="bg-[#1f1f1f] py-45">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
@@ -38,14 +40,14 @@ export function Blog() {
          <div className="mb-4 flex items-center justify-center gap-2">
            <DotAnimatsiya />
            <span className="text-sm font-semibold tracking-wider text-white uppercase">
-              Blog & Articles
+              {t("home.blog.title")}
            </span>
          </div>
          <h2
            className="bg-linear-to-br from-white via-white to-black
  text-transparent bg-clip-text text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl"
          >
-            LATEST BLOG & NEWS
+            {t("home.blog.subtitle")}
          </h2>
        </div>

@@ -84,7 +86,7 @@ export function Blog() {
                  href="#"
                  className="inline-flex items-center gap-1 text-sm font-semibold tracking-wider text-red-600 uppercase transition-colors hover:text-red-500"
                >
-                  Read More
+                  {t("home.blog.readMore")}
                  <ChevronRight className="h-4 w-4" />
                </a>
              </div>
--- a/components/pages/home/line.tsx
+++ b/components/pages/home/line.tsx
@@ -1,13 +1,15 @@
 import { Phone } from "lucide-react";
+import { useTranslations } from "next-intl";
 import Image from "next/image";

 export function Line() {
+  const t = useTranslations();
  return (
    <div className="bg-black py-10 px-4">
      <div className="max-w-280 w-full mx-auto relative py-10 flex items-center justify-between ">
        <div className="text-white flex flex-col items-start justify-start gap-5 ">
          <h2 className="lg:text-5xl sm:text-3xl text-2xl max-w-[80%] w-full font-semibold">
-            Ready for Action 24/7: Contact Us at
+            {t("home.contactLine.text")}
          </h2>
          <p className="flex items-center justify-center gap-4 font-semibold sm:text-xl text-lg">
            <span
--- a/components/pages/home/ourService.tsx
+++ b/components/pages/home/ourService.tsx
@@ -1,9 +1,11 @@
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
 import { ChevronRight } from "lucide-react";
+import { useTranslations } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";

 export function OurService() {
+  const t = useTranslations();
  return (
    <div className="bg-[#1e1d1c] py-10 md:py-16 lg:py-20">
      <div className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
@@ -11,14 +13,13 @@ export function OurService() {
        <div className="space-y-4 md:space-y-6">
          <div className="flex items-center justify-center gap-2 text-base sm:text-lg md:text-xl text-white font-bold">
            <DotAnimatsiya />
-            OUR SERVICES
+            {t("home.services.title")}
          </div>
          <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl tracking-wider lg:tracking-[5px] font-bold bg-linear-to-br from-white via-white to-gray-400 text-transparent bg-clip-text text-center w-full">
-            FIREFIGHTER RESPONSIBILITIES
+            {t("home.services.subtitle")}
          </h1>
          <p className="text-center text-sm sm:text-base md:text-lg text-gray-400 max-w-3xl mx-auto px-4">
-            Aliquam lorem ante dapibus in viverra quis feugiat a tellus
-            phasellus viverra nulla ut metus varius laoreet quisque rutrum.
+            {t("home.services.description")}
          </p>
        </div>

@@ -26,13 +27,13 @@ export function OurService() {
        <div className="max-w-250 w-full mx-auto flex sm:flex-row flex-col items-center gap-5 my-10">
          <div className="relative space-y-4 py-6 px-8 rounded-xl sm:w-[55%] w-full bg-[linear-gradient(to_bottom_right,#000000,#000000,#000000,#d2610a)]">
            <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
-              Operation Force
+              {t("home.services.services.operation.title")}
            </p>
            <p className="text-gray-400 max-w-80 w-full">
-              Aliquam lorem ante dapibus in viverra feugiat phasellus.
+              {t("home.services.services.operation.description")}
            </p>
            <button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
-              LEARN MORE <ChevronRight size={20} />
+              {t("home.services.learnmore")} <ChevronRight size={20} />
            </button>
            <Image
              src="/images/home/gruop.png"
@@ -44,13 +45,13 @@ export function OurService() {
          </div>
          <div className="relative overflow-hidden space-y-4 py-6 px-8 rounded-xl sm:w-[45%] w-full bg-[linear-gradient(to_bottom_right,#000000,#000000,#000000,#d2610a)]">
            <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
-              Operation Force
+              {t("home.services.services.suppression.title")}
            </p>
            <p className="text-gray-400 max-w-70 w-full">
-              Aliquam lorem ante dapibus in viverra feugiat phasellus.
+              {t("home.services.services.suppression.description")}
            </p>
            <button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
-              LEARN MORE <ChevronRight size={20} />
+              {t("home.services.learnmore")} <ChevronRight size={20} />
            </button>
            <Image
              src="/images/home/redShlang.png"
@@ -73,26 +74,26 @@ export function OurService() {
            />
            <div className="space-y-4 py-6 px-8">
              <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
-                Operation Force
+                {t("home.services.services.safety.title")}
              </p>
              <p className="text-gray-400 max-w-80 w-full">
-                Aliquam lorem ante dapibus in viverra feugiat phasellus.
+                {t("home.services.services.safety.description")}
              </p>
              <button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
-                LEARN MORE <ChevronRight size={20} />
+                {t("home.services.learnmore")} <ChevronRight size={20} />
              </button>
            </div>
          </div>
          <div className="sm:w-[60%] w-full">
            <div className="relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#000000,#000000,#d2610a)]">
              <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
-                Operation Force
+                {t("home.services.services.monitoring.title")}
              </p>
              <p className="text-gray-400 max-w-70 w-full">
-                Aliquam lorem ante dapibus in viverra feugiat phasellus.
+                {t("home.services.services.monitoring.description")}
              </p>
              <button className="sm:mt-38 mt-0 text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
-                LEARN MORE <ChevronRight size={20} />
+                {t("home.services.learnmore")} <ChevronRight size={20} />
              </button>
              <Image
                src="/images/home/balon.png"
@@ -104,13 +105,13 @@ export function OurService() {
            </div>
            <div className="py-8 px-8 rounded-xl mt-5 w-full p-5 bg-[linear-gradient(to_top_right,#000000,#000000,#d2610a)] flex sm:flex-row flex-col  gap-5 items-center justify-between">
              <h2 className="sm:text-3xl text-xl font-semibold font-armanai text-white">
-                View more service
+                {t("home.services.viewMoreServices")}
              </h2>
              <Link
                href="/services"
                className="shadow-[0px_0px_2px_6px_#a60404ad] bg-red-600 hover:bg-red-700 text-white font-bold sm:py-3 sm:px-8 px-8 py-2 rounded-full transition duration-300 transform hover:scale-105 w-fit"
              >
-                GET STARTED
+                {t("home.services.viewMore")}
              </Link>
            </div>
          </div>
--- a/components/pages/home/statistics.tsx
+++ b/components/pages/home/statistics.tsx
@@ -1,24 +1,27 @@
+import { useTranslations } from "next-intl";
+
 export function Statistics() {
+  const t = useTranslations();
  const stats = [
    {
      number: '25',
      symbol: '+',
-      label: 'Years Experience',
+      label: t("home.statistics.experience"),
    },
    {
      number: '450',
      symbol: '+',
-      label: 'Families Saved',
+      label: t("home.statistics.projectsCompleted"),
    },
    {
      number: '99',
      symbol: '+',
-      label: 'Trained Staff',
+      label: t("home.statistics.trainedSpecialists"),
    },
    {
      number: '93',
      symbol: '%',
-      label: 'Trusted Clients',
+      label: t("home.statistics.trustedClients"),
    },
  ];

--- a/components/pages/home/testimonal.tsx
+++ b/components/pages/home/testimonal.tsx
@@ -5,36 +5,7 @@ import { Autoplay } from "swiper/modules";
 import Image from "next/image";
 import "swiper/css";
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
-
-const testimonials = [
-  {
-    id: 1,
-    quote:
-      "I've witnessed Fireforce in action multiple times, and they never cease to amaze me with their dedication and professionalism. They are the backbone of our safety and security. Thank you, Fireforce!",
-    name: "JOHN SMITH",
-    role: "Manager",
-    avatar: "/images/home/avatar.jpg",
-    rating: 5,
-  },
-  {
-    id: 2,
-    quote:
-      "The team's response time and expertise saved our property from a devastating fire. Their bravery and commitment to protecting our community is truly remarkable. Highly recommend their services!",
-    name: "SARAH JOHNSON",
-    role: "Business Owner",
-    avatar: "/images/home/avatar.jpg",
-    rating: 5,
-  },
-  {
-    id: 3,
-    quote:
-      "Working alongside Fireforce has been an honor. Their training programs and emergency protocols are second to none. They set the standard for fire safety excellence in our region.",
-    name: "MICHAEL DAVIS",
-    role: "Safety Director",
-    avatar: "/images/home/avatar.jpg",
-    rating: 5,
-  },
-];
+import { useTranslations } from "next-intl";

 function StarRating({ rating }: { rating: number }) {
  return (
@@ -53,6 +24,33 @@ function StarRating({ rating }: { rating: number }) {
 }

 export function Testimonial() {
+  const t = useTranslations();
+  const testimonials = [
+    {
+      id: 1,
+      quote:t("home.testimonials.clients.john.text"),
+      name: t("home.testimonials.clients.john.name"),
+      role: t("home.testimonials.clients.john.position"),
+      avatar: "/images/home/avatar.jpg",
+      rating: 5,
+    },
+    {
+      id: 2,
+      quote:t("home.testimonials.clients.sarah.text"),
+      name: t("home.testimonials.clients.sarah.name"),
+      role: t("home.testimonials.clients.sarah.position"),
+      avatar: "/images/home/avatar.jpg",
+      rating: 5,
+    },
+    {
+      id: 3,
+      quote:t("home.testimonials.clients.michael.text"),
+      name: t("home.testimonials.clients.michael.name"),
+      role: t("home.testimonials.clients.michael.position"),
+      avatar: "/images/home/avatar.jpg",
+      rating: 5,
+    },
+  ];
  return (
    <section className="w-full bg-[#1a1a1a]">
      <div className="flex flex-col lg:flex-row min-h-100 lg:min-h-125">
@@ -88,7 +86,7 @@ export function Testimonial() {
              <div className="flex items-center gap-2">
                <DotAnimatsiya />
                <span className="text-white font-semibold text-sm tracking-wider">
-                  TESTIMONIALS
+                  {t("home.testimonials.title")}
                </span>
              </div>
            </div>