footer navbar linkes change with work asyn lamguage
This commit is contained in:
nabijonovdavronbek619@gmail.com
@@ -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">
|
||||
|
||||
@@ -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)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user