import ContactUsForm from "./form";

const ContactUs = () => {
  return (
    <div className="flex flex-col items-center mt-20">
      <div className="flex flex-col items-center mb-16">
        <h6 className="text-lg w-fit font-semibold text-(--primary) bg-(--primary)/20 opacity-80 p-2 rounded-full">
          Contact Us
        </h6>

        <h1 className="font-extrabold my-6 text-4xl">Let's get in touch</h1>
        <div className=" text-center block md:flex gap-1">
          <p className="font-extralight text-xl">
            Or just reach out manually to
          </p>
          <a
            href="mailto:info@opples.com"
            className="text-(--primary) font-extralight text-xl">
            info@opplens.com
          </a>
        </div>
      </div>
      <section className="border border-gray-300 rounded-4xl w-10/12 flex flex-col items-center">
        <ContactUsForm />
      </section>
    </div>
  );
};

export default ContactUs;