jaecoo-kelapagading/components/landing-page/footer.tsx

import Image from "next/image";

export default function Footer() {
  return (
    <footer className="bg-black text-[#c7dbe3] px-6 md:px-20 py-16">
      <div className="flex flex-col md:flex-row gap-10">
        <div className="w-full md:w-4/12">
          <Image
            src="/masjaecoo.png"
            alt="Jaecoo"
            width={300}
            height={200}
            className="ml-4"
          />

          <div className="flex gap-4 mt-6 ml-24 md:ml-20 text-xl text-[#c7dbe3]">
            <div className="hover:text-white cursor-pointer">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
                viewBox="0 0 24 24"
              >
                <g
                  fill="none"
                  stroke="currentColor"
                  // stroke-width="1.5"
                >
                  <path
                    // stroke-linecap="round"
                    // stroke-linejoin="round"
                    d="M12 16a4 4 0 1 0 0-8a4 4 0 0 0 0 8"
                  />
                  <path d="M3 16V8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5Z" />
                  <path
                    // stroke-linecap="round"
                    // stroke-linejoin="round"
                    d="m17.5 6.51l.01-.011"
                  />
                </g>
              </svg>
            </div>
            <div className="hover:text-white cursor-pointer">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
                viewBox="0 0 24 24"
              >
                <path
                  fill="currentColor"
                  d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
                />
              </svg>
            </div>
            <div className="hover:text-white cursor-pointer">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
                viewBox="0 0 24 24"
              >
                <path
                  fill="currentColor"
                  d="M16 8.245V15.5a6.5 6.5 0 1 1-5-6.326v3.163a3.5 3.5 0 1 0 2 3.163V2h3a5 5 0 0 0 5 5v3a7.97 7.97 0 0 1-5-1.755"
                />
              </svg>
            </div>
            <div className="hover:text-white cursor-pointer">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
                viewBox="0 0 24 24"
              >
                <path
                  fill="currentColor"
                  d="M12.244 4c.534.003 1.87.016 3.29.073l.504.022c1.429.067 2.857.183 3.566.38c.945.266 1.687 1.04 1.938 2.022c.4 1.56.45 4.602.456 5.339l.001.152v.174c-.007.737-.057 3.78-.457 5.339c-.254.985-.997 1.76-1.938 2.022c-.709.197-2.137.313-3.566.38l-.504.023c-1.42.056-2.756.07-3.29.072l-.235.001h-.255c-1.13-.007-5.856-.058-7.36-.476c-.944-.266-1.687-1.04-1.938-2.022c-.4-1.56-.45-4.602-.456-5.339v-.326c.006-.737.056-3.78.456-5.339c.254-.985.997-1.76 1.939-2.021c1.503-.419 6.23-.47 7.36-.476zM9.999 8.5v7l6-3.5z"
                />
              </svg>
            </div>
          </div>
        </div>
        <div className="md:w-8/12 ">
          <div className="flex flex-wrap md:flex-row gap-10 md:gap-28">
            <div>
              <h4 className="font-semibold text-white mb-4">ABOUT</h4>
              <ul className="space-y-4 text-sm">
                <li>
                  <a href="#">Partnership</a>
                </li>
                <li>
                  <a href="#">Terms of Use</a>
                </li>
                <li>
                  <a href="#">Privacy</a>
                </li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold text-white mb-4">PRODUCT</h4>
              <ul className="space-y-4 text-sm">
                <li>
                  <a href="#">About</a>
                </li>
                <li>
                  <a href="#">Features</a>
                </li>
                <li>
                  <a href="#">Support</a>
                </li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold text-white mb-4">RESOURCES</h4>
              <ul className="space-y-4 text-sm">
                <li>
                  <a href="#">Career</a>
                </li>
                <li>
                  <a href="#">Blog</a>
                </li>
                <li>
                  <a href="#">Legal</a>
                </li>
              </ul>
            </div>

            <div>
              <h4 className="font-semibold text-white mb-4">CONTACT</h4>
              <ul className="space-y-4 text-sm">
                <li>
                  <a href="https://jaecoo.com" target="_blank" rel="noreferrer">
                    jaecoo.com
                  </a>
                </li>
                <li>0851-1234-567</li>
                <li>
                  <p className="font-semibold text-white">
                    Jaecoo Kelapa Gading
                  </p>
                  <p>
                    Jl. Boulevard Raya Blok LA 6 No. 34-35,
                    <br />
                    Kelapa Gading, Jakarta Utara 14240
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}