svrjs-nextjs-website/components/shared/Footer.tsx

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;