footer navbar linkes change with work asyn lamguage

This commit is contained in:
nabijonovdavronbek619@gmail.com
2026-01-28 13:45:59 +05:00
parent ce8d14c9b2
commit 638e5518e4
8 changed files with 106 additions and 59 deletions

View File

@@ -4,10 +4,12 @@ import React from "react";
import { useState } from "react";
import { Mail, Phone, MapPin } from "lucide-react";
import { useTranslations } from "next-intl";
import { useLocale, useTranslations } from "next-intl";
import Image from "next/image";
import Link from "next/link";
export function Footer() {
const locale = useLocale();
const t = useTranslations();
const [email, setEmail] = useState("");
const [subscribed, setSubscribed] = useState(false);
@@ -35,10 +37,10 @@ export function Footer() {
<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="font-unbounded text-2xl font-bold text-white md:text-3xl">
SUBSCRIBE OUR NEWSLETTER
{t("contactTitle")}
</h2>
<p className="font-almarai mt-2 text-gray-100">
Expect a friendly letter from us once a week. No spam.
{t("contactSubTitle")}
</p>
</div>
@@ -48,7 +50,7 @@ export function Footer() {
>
<input
type="email"
placeholder="Enter your email address"
placeholder={t("enterPhone")}
value={email}
onChange={(e) => setEmail(e.target.value)}
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"
@@ -58,7 +60,7 @@ export function Footer() {
type="submit"
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"}
{subscribed ? "✓ Sent" : t("send")}
</button>
</form>
</div>
@@ -94,27 +96,36 @@ export function Footer() {
</h3>
<ul className="space-y-3 text-gray-300">
<li>
<a href="#home" className="font-almarai transition hover:text-[#fa1d1d]">
<Link
href={`/${locale}/home`}
className="font-almarai transition hover:text-[#fa1d1d]"
>
{t("footer.quickLinks.home")}
</a>
</Link>
</li>
<li>
<a href="#about" className="font-almarai transition hover:text-[#fa1d1d]">
<Link
href={`/${locale}/about`}
className="font-almarai transition hover:text-[#fa1d1d]"
>
{t("footer.quickLinks.about")}
</a>
</Link>
</li>
<li>
<a
href="#services"
<Link
href={`/${locale}/services`}
className="font-almarai transition hover:text-[#fa1d1d]"
>
{t("footer.quickLinks.services")}
</a>
</Link>
</li>
<li>
<a href="#blog" className="font-almarai transition hover:text-[#fa1d1d]">
<Link
href={`/${locale}/blog`}
className="font-almarai transition hover:text-[#fa1d1d]"
>
{t("footer.quickLinks.products")}
</a>
</Link>
</li>
</ul>
</div>
@@ -135,12 +146,14 @@ export function Footer() {
{/* Contact */}
<div>
<h3 className="font-unbounded uppercase mb-6 text-lg font-bold text-white">{t("footer.support.contact")}</h3>
<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]">
+123-456-7890
<a href="tel:+998773722121" className="hover:text-[#fa1d1d]">
+998-77-372-21-21
</a>
</li>
<li className="flex items-start gap-3">