Davron/ignum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

translation

Browse Source
This commit is contained in:
nabijonovdavronbek619@gmail.com
2026-01-27 20:44:21 +05:00
parent 21cb013cd8
commit ac7cd51600
24 changed files with 397 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
components/layout/footer.tsx
View File

@@ -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>

49
components/layout/navbar.tsx
View File

@@ -4,8 +4,10 @@ import Link from "next/link";
import { ChevronDown, Phone, Menu, X } from "lucide-react";
import Image from "next/image";
import LanguageSelectRadix from "../languageSwitcher";
import { useTranslations } from "next-intl";
export function Navbar() {
const t = useTranslations();
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
@@ -55,13 +57,13 @@ export function Navbar() {
href="/"
className="text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
>
HOME
{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"
>
ABOUT
{t("navbar.about")}
</Link>
{/* Pages Dropdown */}
@@ -70,7 +72,7 @@ export function Navbar() {
className="text-white text-sm h-full font-semibold hover:text-red-500
transition-colors flex items-center gap-1"
>
PAGES
{t("navbar.pages")}
<ChevronDown
size={16}
className="transition-transform group-hover:rotate-180"
@@ -90,14 +92,14 @@ export function Navbar() {
className="block px-4 py-2 text-black text-sm hover:bg-red-600
hover:text-white transition-colors"
>
FAQ
{t("navbar.faq")}
</Link>
<Link
href="/services"
className="block px-4 py-2 text-black text-sm hover:bg-red-600
hover:text-white transition-colors"
>
Services
{t("navbar.services")}
</Link>
{/* <Link
href="/blog"
@@ -113,13 +115,13 @@ export function Navbar() {
href="/products"
className="text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
>
PRODUCTS
{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"
>
CONTACT
{t("navbar.contact")}
</Link>
</div>
@@ -132,7 +134,7 @@ export function Navbar() {
<Phone size={20} className="text-white" />
<div>
<div className="text-white text-xs font-semibold">
Emergency Call!
{t("navbar.emergency")}
</div>
<div className="text-white text-sm font-bold">
+123-456-7890
@@ -170,14 +172,21 @@ export function Navbar() {
>
{/* Mobile Menu Header */}
<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="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center">
<div className="w-6 h-6 bg-white rounded-full"></div>
<div className="p-2 rounded-xl 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-white font-bold text-lg tracking-wider">
FIREFORCE
</span>
Ignum
</div>
</Link>
<button
onClick={() => setIsMobileMenuOpen(false)}
className="text-white p-2 hover:bg-red-600 rounded-md transition"
@@ -193,14 +202,14 @@ export function Navbar() {
className="text-white text-base font-semibold hover:text-red-500 transition py-2"
onClick={() => setIsMobileMenuOpen(false)}
>
HOME
{t("navbar.home")}
</Link>
<Link
href="/about"
className="text-white text-base font-semibold hover:text-red-500 transition py-2"
onClick={() => setIsMobileMenuOpen(false)}
>
ABOUT
{t("navbar.about")}
</Link>
{/* Mobile Pages Dropdown */}
@@ -209,7 +218,7 @@ export function Navbar() {
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
className="text-white text-base font-semibold hover:text-red-500 transition flex items-center gap-1 py-2 w-full"
>
PAGES
{t("navbar.pages")}
<ChevronDown
size={16}
className={`transition-transform ${isDropdownOpen ? "rotate-180" : ""}`}
@@ -222,14 +231,14 @@ export function Navbar() {
className="text-white/80 text-sm hover:text-red-500 transition py-2"
onClick={() => setIsMobileMenuOpen(false)}
>
FAQ
{t("navbar.faq")}
</Link>
<Link
href="/services"
className="text-white/80 text-sm hover:text-red-500 transition py-2"
onClick={() => setIsMobileMenuOpen(false)}
>
Services
{t("navbar.services")}
</Link>
</div>
)}
@@ -240,14 +249,14 @@ export function Navbar() {
className="text-white text-base font-semibold hover:text-red-500 transition py-2"
onClick={() => setIsMobileMenuOpen(false)}
>
PRODUCTS
{t("navbar.products")}
</Link>
<Link
href="/contact"
className="text-white text-base font-semibold hover:text-red-500 transition py-2"
onClick={() => setIsMobileMenuOpen(false)}
>
CONTACT
{t("navbar.contact")}
</Link>
</div>
</div>

12
components/pages/about/aboutBanner.tsx
View File

@@ -1,6 +1,8 @@
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
import { useTranslations } from "next-intl";
export function AboutBanner() {
const t = useTranslations();
return (
<section className="relative w-full lg:h-[60vh] h-screen min-h-100 overflow-hidden pt-10">
{/* Background Image */}
@@ -24,17 +26,21 @@ export function AboutBanner() {
<div className="max-w-250 w-full mx-auto px-4">
<div className="relative z-20 h-full flex max-lg:flex-col items-start justify-between gap-5 pt-30">
<div className="spacw-y-4 ">
<div className="flex items-center gap-3">
<DotAnimatsiya />
<span className="text-sm text-white font-semibold tracking-wide">
{t("about.banner.title")}
</span>
</div>
<p
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"
>
Fire Fighter <br /> At The Ready
{t("about.banner.subtitle")}
</p>
</div>
<div className="lg:w-[40%] text-gray-300 mt-20">
It emphasizes that these firefighters are there not just as public
servants but as a vital part of the community.
{t("about.banner.description")}
</div>
</div>
</div>

34
components/pages/about/story.tsx
View File

@@ -1,6 +1,8 @@
import { useTranslations } from "next-intl";
import Image from "next/image";
export function Story() {
const t = useTranslations();
return (
<div className="bg-[#1e1d1c] pb-0 relative z-10 max-[350px]:pb-30 ">
<div className="max-w-260 mx-auto px-4">
@@ -26,21 +28,11 @@ export function Story() {
{/* Content */}
<div className="relative z-20 p-8 lg:p-12 max-w-130">
<h2 className="text-white text-4xl lg:text-5xl font-bold mb-6">
OUR STORY
{t("about.story.title")}
</h2>
<p className="text-gray-300 mb-4">
Our story is one of unwavering dedication, selflessness, and a{" "}
<span className="text-white font-semibold">
deep commitment to the safety
</span>
and well-being of our communities.
</p>
<p className="text-gray-400 mb-6">
Aliquam lorem ante dapibus in viverra quis a tellus phasellus
viverra nulla ut metus varius laoreet quisque rutrum.
</p>
<p className="text-gray-300 mb-4">{t("about.story.description")}</p>
<button className="text-white flex items-center gap-2 hover:text-red-500 transition">
READ MORE
{t("about.story.readMore")}
<svg
className="w-4 h-4"
fill="none"
@@ -74,11 +66,10 @@ export function Story() {
/>
</span>
<div className="space-y-1 text-white">
<h2 className="text-xl font-semibold">FIREFORCE VISION</h2>
<p>
Phasellus viverra nulla ut metus varius leo imperdiet laoreet.
Quisque rutrum aenean augue vulputate eleifend.
</p>
<h2 className="text-xl font-semibold">
{t("about.story.vision.title")}
</h2>
<p>{t("about.story.vision.description")}</p>
</div>
</div>
<div className="flex sm:flex-row flex-col sm:items-center items-start md:rounded-t-xl max-md:rounded-xl max-w-md w-full sm:p-7 p-2 bg-black sm:gap-5 gap-2">
@@ -92,10 +83,11 @@ export function Story() {
/>
</span>
<div className="space-y-1 text-white">
<h2 className="text-xl font-semibold">FIREFORCE VISION</h2>
<h2 className="text-xl font-semibold">
{t("about.story.mission.title")}
</h2>
<p>
Phasellus viverra nulla ut metus varius leo imperdiet laoreet.
Quisque rutrum aenean augue vulputate eleifend.
{t("about.story.mission.description")}
</p>
</div>
</div>

26
components/pages/about/whyChooseUs.tsx
View File

@@ -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>

8
components/pages/contact/contactHeader.tsx
View File

@@ -1,23 +1,25 @@
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
import { useTranslations } from "next-intl";
import React from "react";
export default function ContactHeader() {
const t = useTranslations();
return (
<div className="mb-8 text-center">
<div className="mb-4 flex items-center justify-center gap-2">
<DotAnimatsiya />
<span className="text-sm font-semibold tracking-wider text-white">
CONTACT US
{t("contact.banner.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-wide md:text-5xl"
>
GET IN TOUCH
{t("contact.banner.subtitle")}
</h2>
<p className="mt-3 text-sm text-gray-300 italic">
We'd love to hear from you. Please fill out this form.
{t("contact.banner.description")}
</p>
</div>
);

16
components/pages/contact/form.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { Check } from "lucide-react";
import { useTranslations } from "next-intl";
import { useState } from "react";
interface FormData {
@@ -22,6 +23,7 @@ interface FormErrors {
}
export default function Form() {
const t = useTranslations();
const [formData, setFormData] = useState<FormData>({
firstName: "",
lastName: "",
@@ -124,7 +126,7 @@ export default function Form() {
<input
type="text"
name="firstName"
placeholder="First Name"
placeholder={t("contact.form.placeholders.firstName")}
value={formData.firstName}
onChange={handleChange}
className={`w-full rounded-3xl border bg-white px-4 py-3 text-sm text-gray-700 placeholder-gray-400 outline-none transition focus:ring-2 focus:ring-red-500 ${
@@ -139,7 +141,7 @@ export default function Form() {
<input
type="text"
name="lastName"
placeholder="Last Name"
placeholder={t("contact.form.placeholders.lastName")}
value={formData.lastName}
onChange={handleChange}
className={`w-full rounded-3xl border bg-white px-4 py-3 text-sm text-gray-700 placeholder-gray-400 outline-none transition focus:ring-2 focus:ring-red-500 ${
@@ -158,7 +160,7 @@ export default function Form() {
<input
type="email"
name="email"
placeholder="Your Email Address"
placeholder={t("contact.form.placeholders.email")}
value={formData.email}
onChange={handleChange}
className={`w-full rounded-3xl border bg-white px-4 py-3 text-sm text-gray-700 placeholder-gray-400 outline-none transition focus:ring-2 focus:ring-red-500 ${
@@ -173,7 +175,7 @@ export default function Form() {
<input
type="text"
name="subject"
placeholder="Subject"
placeholder={t("contact.form.placeholders.subject")}
value={formData.subject}
onChange={handleChange}
className={`w-full rounded-3xl border bg-white px-4 py-3 text-sm text-gray-700 placeholder-gray-400 outline-none transition focus:ring-2 focus:ring-red-500 ${
@@ -190,7 +192,7 @@ export default function Form() {
<div>
<textarea
name="message"
placeholder="Leave us a message"
placeholder={t("contact.form.placeholders.message")}
rows={8}
value={formData.message}
onChange={handleChange}
@@ -221,7 +223,7 @@ export default function Form() {
)}
</button>
<span className="text-sm text-gray-300">
You agree to our friendly privacy policy
{t("contact.form.privacy")}
</span>
</div>
<button
@@ -229,7 +231,7 @@ export default function Form() {
disabled={isSubmitting}
className="shadow-[0px_0px_2px_8px_#ff01015c] rounded-full bg-red-600 px-8 py-3 text-sm font-semibold uppercase tracking-wider text-white transition hover:cursor-pointer hover:scale-90 disabled:cursor-not-allowed disabled:opacity-50"
>
{isSubmitting ? "Sending..." : "Send Message"}
{isSubmitting ? "Sending..." : t("contact.form.send")}
</button>
</div>
{errors.agreeToPolicy && (

12
components/pages/contact/main.tsx
View File

@@ -2,22 +2,24 @@ import Image from "next/image";
import { Mail, MapPin, Phone, Check } from "lucide-react";
import ContactHeader from "./contactHeader";
import Form from "./form";
import { useTranslations } from "next-intl";
export function Contact() {
const t = useTranslations();
const contactInfo = [
{
icon: Mail,
title: "EMAIL",
detail: "support@fireforce",
title:t("contact.email"),
detail: t("contact.emailAddress"),
},
{
icon: MapPin,
title: "OUR LOCATION",
detail: "Jl. Dr. Ir. Soekarno No. 99x Tabanan - Bali",
title: t("contact.location"),
detail: t("contact.address"),
},
{
icon: Phone,
title: "PHONE",
title: t("contact.phone"),
detail: "+123-456-7890",
},
];

37
components/pages/faq/answearQuestions.tsx
View File

@@ -1,8 +1,37 @@
import Link from "next/link";
import FAQAccordion from "./faqAccardion";
import { faqItems } from "@/lib/demoData";
import { useTranslations } from "next-intl";
export function Togle() {
const t = useTranslations();
const faqItems = [
{
id: "faq-1",
question: t("faq.question1.question"),
answer: t("faq.question1.answer"),
},
{
id: "faq-2",
question: t("faq.question2.question"),
answer: t("faq.question2.answer"),
},
{
id: "faq-3",
question: t("faq.question3.question"),
answer: t("faq.question3.answer"),
},
{
id: "faq-4",
question: t("faq.question4.question"),
answer: t("faq.question4.answer"),
},
{
id: "faq-5",
question: t("faq.question5.question"),
answer: t("faq.question5.answer"),
},
];
return (
<div className="min-h-screen bg-[#1e1d1c]">
<main className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
@@ -13,7 +42,7 @@ export function Togle() {
className="bg-linear-to-br from-white via-white/50 to-black
text-transparent bg-clip-text text-3xl font-bold uppercase leading-tight sm:text-4xl md:text-5xl lg:text-6xl"
>
About <br /> Work
{t("faq.banner.topic")}
</h1>
</div>
@@ -28,17 +57,17 @@ export function Togle() {
className="text-center bg-linear-to-br from-white via-white/50 to-black
text-transparent bg-clip-text text-3xl font-bold uppercase leading-tight sm:text-4xl md:text-5xl lg:text-6xl"
>
Still Have Question?
{t("faq.ask.question")}
</h1>
<p className="text-center text-white/80 text-lg">
Nullam dictum felis eu pede mollis pretium integer tincidunt.
{t("faq.ask.subtitle")}
</p>
<div className="w-full flex items-center justify-center">
<Link
href={"/contact"}
className="mx-auto 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"
>
ASK A QUESTION
{t("faq.ask.btn")}
</Link>
</div>
</div>

9
components/pages/faq/faqBanner.tsx
View File

@@ -1,6 +1,8 @@
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
import { useTranslations } from "next-intl";
export function FaqBanner() {
const t = useTranslations();
return (
<section className="relative w-full h-[55vh] min-h-100 overflow-hidden pt-10">
{/* Background Image */}
@@ -24,12 +26,17 @@ export function FaqBanner() {
<div className="max-w-250 w-full mx-auto px-4">
<div className="relative z-20 h-full flex max-lg:flex-col items-start justify-between gap-5 pt-30">
<div className="spacw-y-4 ">
<div className="flex items-center gap-3">
<DotAnimatsiya />
<span className="text-sm text-white font-semibold tracking-wide">
{t("faq.banner.title")}
</span>
</div>
<p
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"
>
GENERAL <br /> QUESTIONS
{t("faq.banner.subtitle")}
</p>
</div>
</div>

37
components/pages/home/about.tsx
View File

@@ -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[] = [
export function AboutUs() {
const t = useTranslations();
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",
title: t("home.about.prevention.title"),
description: t("home.about.prevention.description"),
},
{
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.",
title: t("home.about.accidents.title"),
description: t("home.about.accidents.description"),
},
{
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.",
title: t("home.about.service.title"),
description: t("home.about.service.description"),
},
];
export function AboutUs() {
];
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>

30
components/pages/home/banner.tsx
View File

@@ -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>

20
components/pages/home/blog.tsx
View File

@@ -1,13 +1,16 @@
import Image from "next/image";
import { ChevronRight } from "lucide-react";
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
import { useTranslations } from "next-intl";
const blogPosts = [
export function Blog() {
const t = useTranslations();
const blogPosts = [
{
id: 1,
image: "/images/img14.webp",
category: "Tips & Trick",
title: "BEHIND THE HELMET: LIFE AS A FIREFIGHTER",
title: t("home.blog.articles.article1"),
author: "John Doe",
date: "July 24, 2025",
},
@@ -15,7 +18,7 @@ const blogPosts = [
id: 2,
image: "/images/img15.webp",
category: "Insight",
title: "FIREFIGHTING EQUIPMENT: TOOLS OF THE TRADE",
title: t("home.blog.articles.article2"),
author: "John Doe",
date: "July 24, 2025",
},
@@ -23,13 +26,12 @@ const blogPosts = [
id: 3,
image: "/images/img16.webp",
category: "News",
title: "FIREFIGHTER TRAINING TAKES TO BECOME A HERO",
title: t("home.blog.articles.article3"),
author: "John Doe",
date: "July 24, 2025",
},
];
];
export function Blog() {
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>

4
components/pages/home/line.tsx
View File

@@ -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

37
components/pages/home/ourService.tsx
View File

@@ -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>

11
components/pages/home/statistics.tsx
View File

@@ -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"),
},
];

60
components/pages/home/testimonal.tsx
View File

@@ -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>

12
components/pages/products/productBanner.tsx
View File

@@ -1,6 +1,8 @@
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
import { useTranslations } from "next-intl";
export function ProductBanner() {
const t = useTranslations();
return (
<section className="relative w-full h-[60vh] min-h-100 overflow-hidden pt-10">
{/* Background Image */}
@@ -24,17 +26,21 @@ export function ProductBanner() {
<div className="max-w-250 w-full mx-auto px-4">
<div className="relative z-20 h-full flex max-lg:flex-col items-start justify-between gap-5 pt-30">
<div className="spacw-y-4 ">
<div className="flex items-center gap-2 w-fit">
<DotAnimatsiya />
<span className="text-sm font-semibold tracking-wide">
{t("products.banner.title")}
</span>
</div>
<p
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"
>
Ignum technology <br /> At The Ready
{t("products.banner.subtitle")}
</p>
</div>
<div className="lg:w-[40%] text-gray-300 lg:mt-20 md:mt-10 sm:mt-5 ">
It emphasizes that these firefighters are there not just as public
servants but as a vital part of the community.
{t("products.banner.description")}
</div>
</div>
</div>

12
components/pages/services/serviceBanner.tsx
View File

@@ -1,6 +1,8 @@
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
import { useTranslations } from "next-intl";
export function ServiceBanner() {
const t = useTranslations();
return (
<section className="relative w-full h-[60vh] min-h-100 overflow-hidden pt-10">
{/* Background Image */}
@@ -24,17 +26,21 @@ export function ServiceBanner() {
<div className="max-w-250 w-full mx-auto px-4">
<div className="relative z-20 h-full flex max-lg:flex-col items-start justify-between gap-5 pt-30">
<div className="spacw-y-4 ">
<div className="flex items-center gap-3">
<DotAnimatsiya />
<span className="text-sm text-white font-semibold tracking-wide">
{t("services.banner.title")}
</span>
</div>
<p
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"
>
GENERAL <br /> QUESTIONS
{t("services.banner.subtitle")}
</p>
</div>
<div className="lg:w-[40%] text-gray-300 mt-10 text-lg">
Always Ready, Always On Time: Rescuing Lives” represents an
unwavering commitment to emergency.
{t("services.banner.description")}
</div>
</div>
</div>

30
components/pages/services/serviceFaq.tsx
View File

@@ -1,8 +1,36 @@
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
import FAQAccordion from "../faq/faqAccardion";
import { faqItems } from "@/lib/demoData";
import { useTranslations } from "next-intl";
export function ServiceFaq() {
const t = useTranslations();
const faqItems = [
{
id: "faq-1",
question: t("faq.question1.question"),
answer: t("faq.question1.answer"),
},
{
id: "faq-2",
question: t("faq.question2.question"),
answer: t("faq.question2.answer"),
},
{
id: "faq-3",
question: t("faq.question3.question"),
answer: t("faq.question3.answer"),
},
{
id: "faq-4",
question: t("faq.question4.question"),
answer: t("faq.question4.answer"),
},
{
id: "faq-5",
question: t("faq.question5.question"),
answer: t("faq.question5.answer"),
},
];
return (
<div className="bg-[#1e1d1c] py-20 pb-50 space-y-8">
{/* header */}

1
lib/demoData.ts
View File

@@ -1,3 +1,4 @@
export const DATA = [
{
name: "P-0834405",

17
messages/en.json
View File

@@ -158,28 +158,31 @@
"subtitle": "General Questions",
"topic": "ABOUT WORK"
},
"questions": [
{
"question1": {
"question": "How to choose a fire alarm system?",
"answer": "Depending on the area, type and features of the facility, our specialists will offer you the most optimal solution. You can get a free consultation."
},
{
"question2": {
"question": "How long does equipment installation take?",
"answer": "Installation time depends on the project scope. Usually, 1-3 days for small facilities, 1-2 weeks for large facilities."
},
{
"question3": {
"question": "How is maintenance carried out?",
"answer": "We offer regular maintenance and 24/7 emergency service. Preventive inspections are conducted every six months."
},
{
"question4": {
"question": "What is the warranty period?",
"answer": "All our equipment comes with a 2-year warranty and 10-year maintenance guarantee."
},
{
"question5": {
"question": "For which facilities are they suitable?",
"answer": "We have suitable solutions for office buildings, warehouses, industrial plants, shopping malls, residential buildings and all types of public places."
},
"ask": {
"question": "Do you still have questions?",
"subtitle": "Contact us and our specialists will answer you",
"btn": "Ask Question"
}
]
},
"services": {
"banner": {

17
messages/ru.json
View File

@@ -158,28 +158,31 @@
"subtitle": "Общие Вопросы",
"topic": "О РАБОТЕ"
},
"questions": [
{
"question1": {
"question": "Как выбрать систему пожарной сигнализации?",
"answer": "В зависимости от площади, типа и особенностей объекта наши специалисты предложат вам наиболее оптимальное решение. Вы можете получить бесплатную консультацию."
},
{
"question2": {
"question": "Сколько времени занимает установка оборудования?",
"answer": "Время установки зависит от объема проекта. Обычно для небольших объектов требуется 1-3 дня, для крупных объектов - 1-2 недели."
},
{
"question3": {
"question": "Как проводится техническое обслуживание?",
"answer": "Мы предлагаем регулярное техническое обслуживание и экстренную службу 24/7. Профилактические проверки проводятся каждые шесть месяцев."
},
{
"question4": {
"question": "Какой срок гарантии?",
"answer": "На все наше оборудование предоставляется 2-летняя гарантия и 10-летняя гарантия на техническое обслуживание."
},
{
"question5": {
"question": "Для каких объектов подходят?",
"answer": "У нас есть подходящие решения для офисных зданий, складов, промышленных предприятий, торговых центров, жилых зданий и всех видов общественных мест."
},
"ask": {
"question": "Остались вопросы?",
"subtitle": "Свяжитесь с нами, и наши специалисты ответят вам",
"btn": "Задать вопрос"
}
]
},
"services": {
"banner": {

21
messages/uz.json
View File

@@ -53,7 +53,7 @@
}
},
"viewMoreServices": "Ko'proq Xizmatlar",
"viewMore": "Ko'proq"
"viewMore": "Ko'proq ko'rish"
},
"testimonials": {
"title": "Mijozlar Fikrlari",
@@ -80,7 +80,7 @@
},
"blog": {
"title": "Blog & Maqolalar",
"subtitle": "SO'NGI BLOG & YANGILIKLAR",
"subtitle": "BLOG & SO'NGI YANGILIKLAR",
"articles": {
"article1": "YONG'IN HIMOYASI TIZIMLARI: QANDAY ISHLAYDI?",
"article2": "YANGI TEXNOLOGIYALAR: AQLLI O'CHIRISH TIZIMLARI",
@@ -158,28 +158,31 @@
"subtitle": "Umumiy Savollar",
"topic": "ISH HAQIDA"
},
"questions": [
{
"question1": {
"question": "Yong'in signalizatsiya tizimini qanday tanlash kerak?",
"answer": "Ob'ektning maydoni, turi va xususiyatlariga qarab mutaxassislarimiz sizga eng optimal yechimni taklif qiladilar. Bepul konsultatsiya olishingiz mumkin."
},
{
"question2": {
"question": "Uskunalarni o'rnatish qancha vaqt oladi?",
"answer": "O'rnatish vaqti loyiha hajmiga bog'liq. Odatda, kichik ob'ektlar uchun 1-3 kun, yirik ob'ektlar uchun 1-2 hafta kerak bo'ladi."
},
{
"question3": {
"question": "Texnik xizmat ko'rsatish qanday amalga oshiriladi?",
"answer": "Biz muntazam texnik xizmat ko'rsatish va 24/7 favqulodda xizmatni taklif etamiz. Har olti oyda bir marta profilaktik tekshiruvlar o'tkaziladi."
},
{
"question4": {
"question": "Kafolatiy muddati qancha?",
"answer": "Barcha uskunalarimiz uchun 2 yillik kafolat va 10 yillik texnik xizmat ko'rsatish kafolati beriladi."
},
{
"question5": {
"question": "Qanday ob'ektlar uchun mos?",
"answer": "Ofis binalari, omborxonalar, sanoat korxonalari, savdo markazlari, turar-joy binolari va barcha turdagi jamoat joylari uchun mos yechimlarimiz mavjud."
},
"ask":{
"question":"Hali ham savolingiz bormi?",
"subtitle":"Bizga bo'glaning va bizni hodilarimiz sizga javob berishadi",
"btn":"Savollingizni yo'llang"
}
]
},
"services": {
"banner": {