const Footer = () => {
  return (
    <div className="lg:px-20 xs:px-6 py-20 mt-10">
      <img
        className=""
        src="../img/mango-markets-logo.svg"
        alt="Mango Markets Logo"
      />
      <div className="flex flex-wrap xl:flex-nowrap xl:space-x-20 mt-10 mb-20">
        <div className="xl:w-5/12 w-full">
          <p className="text-2xl lg:text-3xl xl:text-4xl leading-normal lg:leading-normal xl:leading-normal text-th-fgd-1">
            Transparency and integrity are core values in our mission to create
            products that empower individual financial freedom.
          </p>
        </div>
        <div className="flex flex-wrap lg:flex-nowrap xl:w-7/12 w-full">
          <div className="w-full mt-10 xl:mt-3">
            <p className="font-bold mb-4 font-display text-th-fgd-4">Product</p>
            <a className="block leading-loose" href="">
              Exchange
            </a>
            <a className="block leading-loose" href="">
              Mobile App
            </a>
          </div>
          <div className="w-full mt-10 xl:mt-3">
            <p className="font-bold mb-4 font-display text-th-fgd-4">
              Governance
            </p>
            <a className="block leading-loose" href="">
              Dashboard
            </a>
            <a className="block leading-loose" href="">
              Community
            </a>
            <a className="block leading-loose" href="">
              MNGO token
            </a>
          </div>
          <div className="w-full mt-10 xl:mt-3">
            <p className="font-bold mb-4 font-display text-th-fgd-4">About</p>
            <a className="block leading-loose" href="">
              Mission
            </a>
            <a className="block leading-loose" href="">
              Career
            </a>
            <a className="block leading-loose" href="">
              Blog
            </a>
            <a className="block leading-loose" href="">
              Press
            </a>
            <a className="block leading-loose" href="">
              Merch
            </a>
          </div>
          <div className="w-full mt-10 xl:mt-3">
            <p className="font-bold mb-4 font-display text-th-fgd-4">Support</p>
            <a className="block leading-loose" href="">
              Twitter
            </a>
            <a className="block leading-loose" href="">
              Discord
            </a>
            <a className="block leading-loose" href="">
              For beginners
            </a>
            <a className="block leading-loose" href="">
              For developers
            </a>
          </div>
        </div>
      </div>
      <hr />
      <div className="flex justify-between mt-10">
        <span className="text-sm">© Mango DAO 2023. All rights reserved.</span>
        <div className="space-x-5 ">
          <a href="" className="text-sm">
            Privacy policy
          </a>
          <a href="" className="text-sm">
            Terms of use
          </a>
        </div>
      </div>
    </div>
  )
}

export default Footer
