252 lines
9.9 KiB
JavaScript
252 lines
9.9 KiB
JavaScript
"use client";
|
|
import CustomLink from "@/components/Common/CustomLink";
|
|
import { FaFacebook, FaLinkedin, FaPinterest } from "react-icons/fa";
|
|
import { FaInstagram, FaSquareXTwitter } from "react-icons/fa6";
|
|
import { SlLocationPin } from "react-icons/sl";
|
|
import { RiMailSendFill } from "react-icons/ri";
|
|
import { BiPhoneCall } from "react-icons/bi";
|
|
import { t } from "@/utils";
|
|
import { quickLinks } from "@/utils/constants";
|
|
import { useSelector } from "react-redux";
|
|
import { settingsData } from "@/redux/reducer/settingSlice";
|
|
import googleDownload from "../../public/assets/Google Download.png";
|
|
import appleDownload from "../../public/assets/iOS Download.png";
|
|
import { usePathname } from "next/navigation";
|
|
import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
|
|
import CustomImage from "../Common/CustomImage";
|
|
import Link from "next/link";
|
|
|
|
export default function Footer() {
|
|
const CurrentLanguage = useSelector(CurrentLanguageData);
|
|
const settings = useSelector(settingsData);
|
|
const currentYear = new Date().getFullYear();
|
|
const showGetInTouchSection =
|
|
settings?.company_address ||
|
|
settings?.company_email ||
|
|
settings?.company_tel1 ||
|
|
settings?.company_tel2;
|
|
|
|
const showDownloadLinks =
|
|
settings?.play_store_link && settings?.app_store_link;
|
|
|
|
const marginTop = showDownloadLinks ? "mt-[150px]" : "mt-48";
|
|
|
|
return (
|
|
<footer className={`bg-[#1a1a1a] text-white ${marginTop}`}>
|
|
<div className="container py-12 relative">
|
|
{showDownloadLinks && (
|
|
<div className="relative bg-[#FF7F50] top-[-140px] lg:top-[-125px] xl:top-[-150px] p-6 xl:p-12 rounded-md flex flex-col lg:flex-row items-center justify-between">
|
|
<h2 className="text-3xl md:text-4xl xl:text-5xl text-center lg:text-left text-balance font-light mb-4 md:mb-0 w-full">
|
|
{t("experienceTheMagic")} {settings?.company_name} {t("app")}
|
|
</h2>
|
|
<div className="flex flex-row lg:flex-row items-center">
|
|
{settings?.app_store_link && (
|
|
<Link href={settings?.play_store_link}>
|
|
<CustomImage
|
|
src={googleDownload}
|
|
alt="google"
|
|
className="storeIcons"
|
|
width={235}
|
|
height={85}
|
|
/>
|
|
</Link>
|
|
)}
|
|
{settings?.app_store_link && (
|
|
<Link href={settings?.app_store_link}>
|
|
<CustomImage
|
|
src={appleDownload}
|
|
alt="apple"
|
|
className="storeIcons"
|
|
width={235}
|
|
height={85}
|
|
/>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
className={`grid grid-1 sm:grid-cols-12 gap-12 ${
|
|
showDownloadLinks && "mt-[-70px] lg:mt-[-64px] xl:mt-[-75px]"
|
|
}`}
|
|
>
|
|
{/* Company Info */}
|
|
<div className="space-y-6 sm:col-span-12 lg:col-span-4">
|
|
<CustomLink href="/">
|
|
<CustomImage
|
|
src={settings?.footer_logo}
|
|
alt="eClassify"
|
|
width={195}
|
|
height={52}
|
|
className="w-full h-[52px] object-contain ltr:object-left rtl:object-right max-w-[195px]"
|
|
/>
|
|
</CustomLink>
|
|
<p className="text-gray-300 text-sm max-w-md">
|
|
{settings?.footer_description}
|
|
</p>
|
|
<div className="flex items-center flex-wrap gap-6">
|
|
{settings?.facebook_link && (
|
|
<CustomLink
|
|
href={settings?.facebook_link}
|
|
target="_blank"
|
|
className="footerSocialLinks"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<FaFacebook size={22} />
|
|
</CustomLink>
|
|
)}
|
|
|
|
{settings?.instagram_link && (
|
|
<Link
|
|
href={settings?.instagram_link}
|
|
target="_blank"
|
|
className="footerSocialLinks"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<FaInstagram size={22} />
|
|
</Link>
|
|
)}
|
|
|
|
{settings?.x_link && (
|
|
<Link
|
|
href={settings?.x_link}
|
|
target="_blank"
|
|
className="footerSocialLinks"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<FaSquareXTwitter size={22} />
|
|
</Link>
|
|
)}
|
|
|
|
{settings?.linkedin_link && (
|
|
<Link
|
|
href={settings?.linkedin_link}
|
|
target="_blank"
|
|
className="footerSocialLinks"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<FaLinkedin size={22} />
|
|
</Link>
|
|
)}
|
|
|
|
{settings?.pinterest_link && (
|
|
<Link
|
|
href={settings?.pinterest_link}
|
|
target="_blank"
|
|
className="footerSocialLinks"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<FaPinterest size={22} />
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="sm:col-span-12 lg:hidden border-t-2 border-dashed border-gray-500 w-full"></div>
|
|
|
|
{/* Quick Links */}
|
|
<div className="ltr:lg:border-l-2 rtl:lg:border-r-2 lg:border-dashed lg:border-gray-500 ltr:lg:pl-6 rtl:lg:pr-6 sm:col-span-6 lg:col-span-4">
|
|
<h3 className="text-xl font-semibold mb-6">{t("quickLinks")}</h3>
|
|
<nav className="space-y-4">
|
|
{quickLinks.map((link) => (
|
|
<CustomLink
|
|
key={link.id}
|
|
href={link.href}
|
|
className="group block hover:text-[var(--primary-color)] transition-colors"
|
|
>
|
|
<span className="relative flex items-center">
|
|
<span className="absolute left-0 top-1/2 transform -translate-y-1/2 h-[10px] w-[10px] bg-[var(--primary-color)] rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500"></span>
|
|
<span className="opacity-65 group-hover:text-[var(--primary-color)] group-hover:opacity-100 group-hover:ml-4 transition-all duration-500">
|
|
{t(link.labelKey)}
|
|
</span>
|
|
</span>
|
|
</CustomLink>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Contact Information */}
|
|
|
|
{showGetInTouchSection && (
|
|
<div className="ltr:lg:border-l-2 rtl:lg:border-r-2 lg:border-dashed lg:border-gray-500 ltr:lg:pl-6 rtl:lg:pr-6 sm:col-span-6 lg:col-span-4">
|
|
<h3 className="text-xl font-semibold mb-6">{t("getInTouch")}</h3>
|
|
<div className="space-y-6">
|
|
{settings?.company_address && (
|
|
<div className="flex items-center gap-3">
|
|
<div className="footerContactIcons">
|
|
<SlLocationPin size={22} />
|
|
</div>
|
|
<p className="footerLabel">{settings?.company_address}</p>
|
|
</div>
|
|
)}
|
|
|
|
{settings?.company_email && (
|
|
<div className="flex items-center gap-3">
|
|
<div className="footerContactIcons">
|
|
<RiMailSendFill size={22} />
|
|
</div>
|
|
<CustomLink
|
|
href={`mailto:${settings?.company_email}`}
|
|
className="footerLabel"
|
|
>
|
|
{settings?.company_email}
|
|
</CustomLink>
|
|
</div>
|
|
)}
|
|
|
|
{(settings?.company_tel1 || settings?.company_tel2) && (
|
|
<div className="flex items-center gap-3">
|
|
<div className="footerContactIcons">
|
|
<BiPhoneCall size={22} />
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
{settings?.company_tel1 && (
|
|
<CustomLink
|
|
href={`tel:${settings?.company_tel1}`}
|
|
className="footerLabel"
|
|
>
|
|
{settings?.company_tel1}
|
|
</CustomLink>
|
|
)}
|
|
{settings?.company_tel2 && (
|
|
<CustomLink
|
|
href={`tel:${settings?.company_tel2}`}
|
|
className="footerLabel"
|
|
>
|
|
{settings?.company_tel2}
|
|
</CustomLink>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Copyright */}
|
|
<div className="container">
|
|
<div className="py-4 flex flex-wrap gap-3 justify-between items-center border-t-2 border-dashed border-gray-500">
|
|
<p className="footerLabel">
|
|
{t("copyright")} © {settings?.company_name} {currentYear}.{" "}
|
|
{t("allRightsReserved")}
|
|
</p>
|
|
<div className="flex flex-wrap gap-4 whitespace-nowrap">
|
|
<CustomLink href="/privacy-policy" className="footerLabel">
|
|
{t("privacyPolicy")}
|
|
</CustomLink>
|
|
<CustomLink href="/terms-and-condition" className="footerLabel">
|
|
{t("termsConditions")}
|
|
</CustomLink>
|
|
<CustomLink href="/refund-policy" className="footerLabel">
|
|
{t("refundPolicy")}
|
|
</CustomLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|