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