Corporate_Professional_Contact_Form

<section class="py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-green-100 dark:from-gray-950 dark:to-gray-900 font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 md:p-12 border border-green-200 dark:border-gray-700">
    <div class="text-center mb-10">
      <h2 class="text-4xl font-extrabold text-green-800 dark:text-green-300 mb-4 tracking-tight leading-tight">
        Get in Touch
      </h2>
      <p class="text-lg text-green-700 dark:text-gray-400 max-w-2xl mx-auto">
        We'd love to hear from you. Whether you have a project in mind, a question, or just want to say hi, fill out the form below.
      </p>
    </div>

    <form class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div>
        <label for="first-name" class="block text-sm font-medium text-green-700 dark:text-gray-300 mb-1">First Name</label>
        <input type="text" id="first-name" name="first-name" autocomplete="given-name" placeholder="John" class="block w-full px-4 py-3 border border-green-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 bg-green-50 dark:bg-gray-700 text-green-900 dark:text-white placeholder-green-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
      </div>
      <div>
        <label for="last-name" class="block text-sm font-medium text-green-700 dark:text-gray-300 mb-1">Last Name</label>
        <input type="text" id="last-name" name="last-name" autocomplete="family-name" placeholder="Doe" class="block w-full px-4 py-3 border border-green-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 bg-green-50 dark:bg-gray-700 text-green-900 dark:text-white placeholder-green-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
      </div>
      <div class="md:col-span-2">
        <label for="email" class="block text-sm font-medium text-green-700 dark:text-gray-300 mb-1">Email Address</label>
        <input type="email" id="email" name="email" autocomplete="email" placeholder="[email protected]" class="block w-full px-4 py-3 border border-green-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 bg-green-50 dark:bg-gray-700 text-green-900 dark:text-white placeholder-green-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
      </div>
      <div class="md:col-span-2">
        <label for="phone" class="block text-sm font-medium text-green-700 dark:text-gray-300 mb-1">Phone Number (Optional)</label>
        <input type="tel" id="phone" name="phone" autocomplete="tel" placeholder="+1 (555) 123-4567" class="block w-full px-4 py-3 border border-green-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 bg-green-50 dark:bg-gray-700 text-green-900 dark:text-white placeholder-green-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
      </div>
      <div class="md:col-span-2">
        <label for="subject" class="block text-sm font-medium text-green-700 dark:text-gray-300 mb-1">Subject</label>
        <input type="text" id="subject" name="subject" placeholder="Project Inquiry" class="block w-full px-4 py-3 border border-green-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 bg-green-50 dark:bg-gray-700 text-green-900 dark:text-white placeholder-green-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
      </div>
      <div class="md:col-span-2">
        <label for="message" class="block text-sm font-medium text-green-700 dark:text-gray-300 mb-1">How can we help you?</label>
        <textarea id="message" name="message" rows="6" placeholder="Tell us about your project, your needs, or any questions you have..." class="block w-full px-4 py-3 border border-green-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 bg-green-50 dark:bg-gray-700 text-green-900 dark:text-white placeholder-green-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base"></textarea>
      </div>
      <div class="md:col-span-2 flex items-center">
        <input id="terms-and-privacy" name="terms-and-privacy" type="checkbox" class="h-4 w-4 text-green-600 dark:text-green-400 focus:ring-green-500 border-green-300 dark:border-gray-600 rounded">
        <label for="terms-and-privacy" class="ml-2 block text-sm text-green-700 dark:text-gray-400">
          By submitting, you agree to our
          <a href="#" class="text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-medium">Privacy Policy</a>.
        </label>
      </div>
      <div class="md:col-span-2 flex justify-end">
        <button type="submit" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-green-700 hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-500 transition duration-200 ease-in-out transform hover:-translate-y-0.5">
          Send Message
          <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </form>
  </div>
</section>