footer navbar linkes change with work asyn lamguage

2026-01-28 13:45:59 +05:00
parent ce8d14c9b2
commit 638e5518e4
8 changed files with 106 additions and 59 deletions
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -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">
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -4,9 +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";
+import { useLocale, useTranslations } from "next-intl";

 export function Navbar() {
+  const locale = useLocale();
  const t = useTranslations();
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -37,7 +38,7 @@ export function Navbar() {
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-20">
            {/* Logo */}
-            <Link href="/" className="hover:cursor-pointer">
+            <Link href={`/${locale}/home`} className="hover:cursor-pointer">
              <div className="flex items-center gap-2">
                <div className=" flex items-center justify-center">
                  <Image
@@ -54,13 +55,13 @@ export function Navbar() {
            {/* Desktop Navigation Menu */}
            <div className="hidden h-full lg:flex items-center gap-8">
              <Link
-                href="/"
+                href={`/${locale}/home`}
                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"
+                href={`/${locale}/about`}
                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")}
@@ -88,21 +89,21 @@ export function Navbar() {
               pointer-events-none group-hover:pointer-events-auto overflow-hidden"
                >
                  <Link
-                    href="/faq"
+                    href={`/${locale}/faq`}
                    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"
+                    href={`/${locale}/services`}
                    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"
+                    href={`/${locale}/blog`}
                    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"
                  >
@@ -112,13 +113,13 @@ export function Navbar() {
              </div>

              <Link
-                href="/products"
+                href={`/${locale}/products`}
                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"
+                href={`/${locale}/contact`}
                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")}
@@ -130,14 +131,16 @@ export function Navbar() {
              <LanguageSelectRadix />

              {/* Emergency Call Button - Hidden on mobile */}
-              <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 className="hidden lg:flex items-center hover:cursor-pointer gap-3 px-4 py-2 rounded-full">
+                <span
+                  className="shrink-0 w-10 h-10 bg-red-600 rounded-full flex items-center justify-center
+                  shadow-[0_0_0px_4px_rgba(239,68,68,0.1)]"
+                >
+                  <Phone size={20} className="text-white" />
+                </span>
                <div>
-                  <div className="font-unbounded uppercase text-white text-xs font-semibold">
-                    {t("navbar.emergency")}
-                  </div>
                  <div className="text-white text-sm font-bold">
-                    +123-456-7890
+                    <div>+998-98-099-21-21</div> <div>+998-77-372-21-21</div>
                  </div>
                </div>
              </div>
@@ -173,7 +176,7 @@ 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">
+          <Link href={`/${locale}/home`} className="hover:cursor-pointer">
            <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
@@ -197,14 +200,14 @@ export function Navbar() {
        {/* Mobile Menu Links */}
        <div className="flex flex-col p-6 gap-4">
          <Link
-            href="/"
+            href={`/${locale}/home`}
            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"
+            href={`/${locale}/about`}
            className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition py-2"
            onClick={() => setIsMobileMenuOpen(false)}
          >
@@ -226,14 +229,14 @@ export function Navbar() {
            {isDropdownOpen && (
              <div className="ml-4 mt-2 flex flex-col gap-2">
                <Link
-                  href="/faq"
+                  href={`/${locale}/faq`}
                  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"
+                  href={`/${locale}/services`}
                  className="font-unbounded uppercase text-white/80 text-sm hover:text-red-500 transition py-2"
                  onClick={() => setIsMobileMenuOpen(false)}
                >
@@ -244,14 +247,14 @@ export function Navbar() {
          </div>

          <Link
-            href="/products"
+            href={`/${locale}/products`}
            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"
+            href={`/${locale}/contact`}
            className="font-unbounded uppercase text-white text-base font-semibold hover:text-red-500 transition py-2"
            onClick={() => setIsMobileMenuOpen(false)}
          >
--- a/components/pages/contact/main.tsx
+++ b/components/pages/contact/main.tsx
@@ -9,18 +9,18 @@ export function Contact() {
  const contactInfo = [
    {
      icon: Mail,
-      title:t("contact.email"),
-      detail: t("contact.emailAddress"),
+      title:t("contact.form.email"),
+      detail: t("contact.form.emailAddress"),
    },
    {
      icon: MapPin,
-      title: t("contact.location"),
-      detail: t("contact.address"),
+      title: t("contact.form.location"),
+      detail: t("contact.form.address"),
    },
    {
      icon: Phone,
-      title: t("contact.phone"),
-      detail: "+123-456-7890",
+      title: t("contact.form.phone"),
+      detail: "+998-77-372-21-21",
    },
  ];

@@ -40,7 +40,7 @@ export function Contact() {
          className="absolute inset-0"
          style={{
            background:
-              "radial-gradient(ellipse at bottom center, #d2610ab0 0%, #1e1d1ce3 70%)",
+              "radial-gradient(ellipse at bottom center, #d2610a 0%, #1e1d1ce9 70% , #1e1d1ce9 70%)",
          }}
        />
      </div>
--- a/components/pages/home/banner.tsx
+++ b/components/pages/home/banner.tsx
@@ -67,17 +67,18 @@ export function Banner() {
            </div>

            {/* Right side - Text Content */}
-            <div className="lg:inline-block hidden space-y-6 text-white mb-20">
+            <div className="lg:inline-block hidden space-y-6 mb-20">
              {/* Badge */}
              <div className="flex items-center gap-2 w-fit">
                <DotAnimatsiya />
-                <span className="text-sm font-semibold tracking-wide font-almarai">
+                <span className="text-sm font-semibold text-white tracking-wide font-almarai">
                  {t("home.banner.title1")}
                </span>
              </div>

              {/* Main Heading */}
-              <h1 className="font-unbounded gradient-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty">
+              <h1 className="font-unbounded uppercase 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 text-pretty">
                {t("home.banner.title2")}
              </h1>

--- a/components/pages/home/video.tsx
+++ b/components/pages/home/video.tsx
@@ -1,15 +1,27 @@
+import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
 import HomeMarquee from "@/components/HomeMarquee";
 import { Play } from "lucide-react";
+import { useTranslations } from "next-intl";

 export function Video() {
+  const t = useTranslations();
  return (
    <>
      <div
        className="bg-[#1e1d1c] bg-fixed max-sm:bg-center"
        style={{ backgroundImage: "url(/images/img7.jpg)" }}
      >
-        <div className="flex items-center justify-center bg-linear-to-t from-[#1e1d1c] to-[#1e1d1c02] h-80 w-full relative">
-          
+        <div className="flex flex-col items-center justify-center bg-linear-to-t from-[#1e1d1c] to-[#1e1d1c02] h-80 w-full relative">
+          <div className="flex items-center gap-2 w-fit text-white ">
+            <DotAnimatsiya />
+            <span className="text-sm font-semibold tracking-wide font-almarai">
+              {t("rasmlar")}
+            </span>
+          </div>
+          <h1 className="font-unbounded uppercase 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 text-pretty">
+            {t("fotogalereya")}
+          </h1>
        </div>
      </div>
      <div>