257 lines
8.9 KiB
TypeScript
257 lines
8.9 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) {
|
|
formRequest.mutate({ number: email });
|
|
}
|
|
};
|
|
|
|
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 for gitea */}
|
|
<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-[#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">
|
|
{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-8">
|
|
<div className="mx-auto max-w-6xl">
|
|
<div className="font-almarai flex flex-col justify-center gap-4 text-sm text-gray-400 md:flex-row md:items-center">
|
|
<a href="http://felix-its.uz/">{t("footer.create", { name: "Felix-its.uz" })}</a>
|
|
{/* <div className="flex gap-6">
|
|
<a href="#terms" className="hover:text-white">
|
|
Terms & Conditions
|
|
</a>
|
|
<a href="#privacy" className="hover:text-white">
|
|
Privacy Policy
|
|
</a>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|