import Image from "next/image"; import Link from "next/link"; import React from "react"; import Iconss from "../ui/icons"; import { FOOTERLINKS } from "@/constants"; import Logo from "./Logo"; const Footer = () => { const currentYear = new Date().getFullYear(); return ( <> <footer className="flex flex-col w-full transition-all bg-zinc-50 text-black dark:bg-[#0308033b] border-t dark:text-white"> <div className="px-6 md:px-12 lg:px-24 py-10 w-full mx-auto max-w-screen-2xl"> <div className="flex flex-col lg:flex-row justify-between max-lg:items-start max-md:items-center items-center mb-6 "> <div className="flex items-center mb-6 lg:mb-0"> <Logo width={200} height={80} /> </div> <div className="flex flex-col items-center md:items-start md:flex-row justify-between w-full lg:w-auto space-y-6 md:space-y-0 md:space-x-6 xl:space-x-16"> <div className="flex flex-col items-center md:items-start"> <div className="text-2xl font-light text-primary"> Quick Links </div> {FOOTERLINKS.otherPages.map((link) => ( <span key={link.href}> <Link href={link.href} className="text-base font-light dark:hover:text-green-100/70 hover:text-green-500 hover:underline" > {link.label} </Link> </span> ))} </div> <div className="flex flex-col items-center md:items-start"> <div className="text-2xl font-light text-primary"> Resources </div> {FOOTERLINKS.plans.map((link) => ( <span key={link.href}> <Link href={link.href} className="text-base font-light dark:hover:text-green-100/70 hover:text-green-500 hover:underline" > {link.label} </Link> </span> ))} </div> <div className="flex flex-col items-center md:items-start"> <div className="text-2xl font-light text-primary"> Additional </div> {FOOTERLINKS.additional.map((link) => ( <span key={link.href}> <Link href={link.href} className="text-base font-light dark:hover:text-green-100/70 hover:text-green-500 hover:underline" > {link.label} </Link> </span> ))} </div> <div className="flex flex-col items-center md:items-start"> <div className="text-2xl font-light text-primary">Social</div> <p className="text-base font-light"> {FOOTERLINKS.social.supportText} </p> <div className="flex space-x-1 py-3"> <Iconss /> </div> </div> </div> </div> <div className="border-t mb-6 border-gray-300 dark:border-white/30"></div> <div className="flex flex-col lg:flex-row justify-between items-center space-y-4 lg:space-y-0 px-4"> <span className="text-sm font-light"> Copyright © 2023-{currentYear}{" "} <Link href={FOOTERLINKS.footerBottom.rightsReserved.href} className="text-primary font-semibold" > {FOOTERLINKS.footerBottom.rightsReserved.label} </Link> </span> <span className="text-sm font-light"> <Link href={FOOTERLINKS.footerBottom.termsofService.href} className="text-primary font-medium transition-all underline-offset-4 hover:underline" > {FOOTERLINKS.footerBottom.termsofService.label}{" "} </Link> |{" "} <Link href={FOOTERLINKS.footerBottom.privacyPolicy.href} className="text-primary font-medium transition-all underline-offset-4 hover:underline" > {FOOTERLINKS.footerBottom.privacyPolicy.label} </Link> </span> </div> </div> </footer> </> ); }; export default Footer;