271 lines
9.5 KiB
TypeScript
271 lines
9.5 KiB
TypeScript
"use client";
|
||
|
||
import React from "react";
|
||
|
||
import { useState } from "react";
|
||
import { Mail, Phone, MapPin, Instagram, Send } from "lucide-react";
|
||
import { useLocale, useTranslations } from "next-intl";
|
||
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { useMutation } from "@tanstack/react-query";
|
||
import { toast } from "react-toastify";
|
||
import httpClient from "@/request/api";
|
||
import { endPoints } from "@/request/links";
|
||
|
||
export function Footer() {
|
||
const locale = useLocale();
|
||
const [errors, setErrors] = useState<any>({});
|
||
const t = useTranslations();
|
||
const [email, setEmail] = useState("");
|
||
const [subscribed, setSubscribed] = useState(false);
|
||
|
||
const formRequest = useMutation({
|
||
mutationKey: [],
|
||
mutationFn: (data: any) => httpClient.post(endPoints.post.sendNumber, data),
|
||
onSuccess: () => {
|
||
toast.success(t("succes"));
|
||
setSubscribed(true);
|
||
setEmail("");
|
||
setTimeout(() => setSubscribed(false), 3000);
|
||
},
|
||
onError: (error) => {
|
||
console.log("error: ", error);
|
||
toast.error(t("error"));
|
||
},
|
||
});
|
||
|
||
const formatPhoneNumber = (value: string) => {
|
||
const numbers = value.replace(/\D/g, "");
|
||
if (!numbers.startsWith("998")) {
|
||
return "+998 ";
|
||
}
|
||
|
||
let formatted = "+998 ";
|
||
const rest = numbers.slice(3);
|
||
if (rest.length > 0) formatted += rest.slice(0, 2);
|
||
if (rest.length > 2) formatted += " " + rest.slice(2, 5);
|
||
if (rest.length > 5) formatted += " " + rest.slice(5, 7);
|
||
if (rest.length > 7) formatted += " " + rest.slice(7, 9);
|
||
|
||
return formatted;
|
||
};
|
||
|
||
const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const formatted = formatPhoneNumber(e.target.value);
|
||
setEmail(formatted);
|
||
if (errors.address) {
|
||
setErrors({ ...errors, address: "" });
|
||
}
|
||
};
|
||
|
||
const handleSubscribe = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (email) {
|
||
// Telefon raqamni tozalash (faqat raqamlar)
|
||
const cleanPhone = email.replace(/\D/g, "");
|
||
formRequest.mutate({ number: Number(cleanPhone.slice(3)) });
|
||
}
|
||
};
|
||
|
||
return (
|
||
<footer
|
||
className="relative bg-linear-to-tr from-[#452811] via-black to-black text-white lg:pt-20 sm:pt-28 pt-50"
|
||
style={{
|
||
backgroundImage:
|
||
"linear-gradient(to top right, #452811 0%, #000000 20%, #000000 40%, #000000 60%, #000000 80%, #000000 100%)",
|
||
}}
|
||
>
|
||
{/* Newsletter Section */}
|
||
<div className=" absolute w-full -top-40 px-4 py-12 md:py-16">
|
||
<div className="mx-auto max-w-6xl">
|
||
<div className="rounded-2xl bg-red-600 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">
|
||
{t("contactTitle")}
|
||
</h2>
|
||
<p className="font-almarai mt-2 text-gray-100">
|
||
{t("contactSubTitle")}
|
||
</p>
|
||
</div>
|
||
|
||
<form
|
||
onSubmit={handleSubscribe}
|
||
className="flex sm:flex-row flex-col w-full gap-2 md:w-auto"
|
||
>
|
||
<input
|
||
type="tel"
|
||
id="phone"
|
||
name="phone"
|
||
value={email}
|
||
onChange={handlePhoneChange}
|
||
className={`font-almarai 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 ${
|
||
errors.email ? "border-red-500" : "border-transparent"
|
||
}`}
|
||
placeholder="+998 90 123 45 67"
|
||
maxLength={17}
|
||
/>
|
||
<button
|
||
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" : t("send")}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Main Footer Content */}
|
||
<div className="px-4 py-16 md:py-24">
|
||
<div className="mx-auto max-w-6xl">
|
||
<div className="grid gap-12 md:grid-cols-4">
|
||
{/* Brand Section */}
|
||
<div>
|
||
<div className="mb-4 flex items-center gap-2">
|
||
<div className=" flex items-center justify-center">
|
||
<Image
|
||
src="/images/IGNUM/PNG/1.@6x.png"
|
||
alt="logo image"
|
||
width={70}
|
||
height={70}
|
||
className=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<p className="font-almarai text-sm leading-relaxed text-gray-300">
|
||
{t("footer.description")}
|
||
</p>
|
||
<div className="flex items-center gap-5 mt-5">
|
||
{/* <a
|
||
href=""
|
||
className="p-2 rounded-md bg-gray-700 hover:bg-red-500"
|
||
>
|
||
<Instagram />
|
||
</a> */}
|
||
<a
|
||
href="https://t.me/ignum_tech"
|
||
className="p-2 rounded-md bg-gray-700 hover:bg-red-500"
|
||
>
|
||
<Send />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Quick Links */}
|
||
<div>
|
||
<h3 className="font-unbounded uppercase mb-6 text-lg font-bold text-white">
|
||
{t("footer.quickLinks.title")}
|
||
</h3>
|
||
<ul className="space-y-3 text-gray-300">
|
||
<li>
|
||
<Link
|
||
href={`/${locale}/home`}
|
||
className="font-almarai transition hover:text-[#fa1d1d]"
|
||
>
|
||
{t("footer.quickLinks.home")}
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link
|
||
href={`/${locale}/about`}
|
||
className="font-almarai transition hover:text-[#fa1d1d]"
|
||
>
|
||
{t("footer.quickLinks.about")}
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link
|
||
href={`/${locale}/services`}
|
||
className="font-almarai transition hover:text-[#fa1d1d]"
|
||
>
|
||
{t("footer.quickLinks.services")}
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link
|
||
href={`/${locale}/blog`}
|
||
className="font-almarai transition hover:text-[#fa1d1d]"
|
||
>
|
||
{t("footer.quickLinks.products")}
|
||
</Link>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Support */}
|
||
<div>
|
||
<h3 className="font-unbounded mb-6 text-lg font-bold text-white">
|
||
{t("footer.support.title")}
|
||
</h3>
|
||
<ul className="font-almarai space-y-3 text-gray-300">
|
||
<li>
|
||
<a href="#help" className="transition hover:text-[#fa1d1d]">
|
||
{t("footer.support.contact")}
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Contact */}
|
||
<div>
|
||
<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:+998773722121" className="hover:text-[#fa1d1d]">
|
||
+998-77-372-21-21
|
||
</a>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<Mail className="mt-1 h-5 w-5 shrink-0 text-white" />
|
||
<a
|
||
href="mailto:support@fireforce.com"
|
||
className="hover:text-[#fa1d1d]"
|
||
>
|
||
info@ignum-tech.com
|
||
</a>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<MapPin className="mt-1 h-5 w-5 shrink-0 text-white" />
|
||
<span>{t("footer.address")}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Copyright Section */}
|
||
<div className="border-t border-gray-800 px-4 py-6">
|
||
<div className="mx-auto max-w-6xl">
|
||
<div className="font-almarai flex flex-col justify-end items-end w-full gap-4 text-lg text-gray-400 md:flex-row md:items-center">
|
||
{locale === "uz" ? (
|
||
<div className="flex gap-2 w-full justify-center items-end ">
|
||
<a
|
||
href="http://felix-its.uz/"
|
||
className="hover:text-red-600 hover:cursor-pointer text-blue-300 underline"
|
||
>
|
||
Felix-its.uz
|
||
</a>
|
||
<p>- Jamoasi tomonidan ishlab chiqilgan</p>
|
||
</div>
|
||
) : (
|
||
<div className="flex w-full justify-center items-end gap-2">
|
||
{locale === "ru" ? <p>Разработано -</p> : <p>Created by - </p>}
|
||
<a
|
||
href="http://felix-its.uz/"
|
||
className="hover:text-red-600 hover:cursor-pointer text-blue-300 underline"
|
||
>
|
||
Felix-its.uz
|
||
</a>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
}
|