import FooterLogo from "./components/FooterLogo";
import QuickLinks from "./components/QuickLinks";
import SupportLinks from "./components/SupportLinks";
import JoinUs from "./components/JoinUs";
import FooterCopyright from "./components/FooterCopyright";

const Footer: React.FC = () => {
  return (
    <footer className="text-white bg-primary-midnight_green-main py-10 px-5 sm:px-10 md:px-20 md:py-20">
      <FooterLogo />
      <div className=" w-full h-px bg-secondary-coral_blue-main my-5 sm:my-8" />
      <div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 lg:gap-12">
        <QuickLinks />
        <SupportLinks />
        <div className="block lg:hidden w-full h-px col-span-3 bg-secondary-coral_blue-main my-5 sm:my-8" />
        <JoinUs />
      </div>
      <div className="w-full h-px bg-secondary-coral_blue-main my-5 sm:my-8" />
      <FooterCopyright />
    </footer>
  );
};

export default Footer;