<section class="h-screen w-full grid grid-rows-2 md:grid-cols-2 md:grid-rows-1 items-center">
  <div class="w-full h-full flex justify-center items-center">
    <div class="flex flex-col items-center gap-3">
      <h1 class="text-3xl font-semibold">Hey I&apos;m John</h1>
      <div class="flex flex-col items-center gap-1">
        <p class="text-3xl font-semibold text-white">Let&apos;s build something together</p>
      </div>
      <div class="py-10 flex gap-5 items-center">
        <a href="">
          <img src="" class="h-10 w-10" alt="" />
        </a>
        <a href="">
          <img src="" class="h-10 w-10" alt="" />
        </a>
        <a href="">
          <img src="" class="h-10 w-10" alt="" />
        </a>
        <a href="">
          <img src="" class="h-10 w-10" alt="" />
        </a>
      </div>
    </div>
  </div>
  <div class="w-full flex items-center justify-center">
    <form class="w-full max-w-2xl flex flex-col p-10 gap-5">
      <div class="w-full">
        <h2 class="text-center text-white font-semibold text-2xl">
         Lemme know 
        </h2>
      </div>
      <div class="flex flex-col">
        <label class="text-white">Name</label>
        <input
          required
          placeholder="What should I call you?"
          type="text"
          name="user_name"
          class="text-black py-1 px-2 rounded-md"
        />
      </div>
      <div class="flex flex-col">
        <label class="text-white">Email</label>
        <input
          placeholder="youremail@email.com"
          required
          type="email"
          name="user_email"
          class="text-black py-1 px-2 rounded-md"
        />
      </div>
      <div class="flex flex-col">
        <label class="text-white">Phone number</label>
        <input
          type="text"
          name="user_phone"
          placeholder="Optional"
          class="text-black py-1 px-2 rounded-md"
        />
      </div>
      <div class="flex flex-col">
        <label class="text-white">Message</label>
        <textarea
          required
          placeholder="Tell me what I can do for you."
          name="message"
          class="text-black py-1 px-2 rounded-md"></textarea>
      </div>
      <button
        class="text-white cursor-pointer px-3 py-2 gradient active:scale-95 font-bold rounded-lg
         bg-gradient-to-br from-emerald-600 to-teal-700"
        type="submit">Send</button
      >
    </form>
  </div>