Gradient Side Contact

<!--
  The gradient panel paints its own dark surface, so the white text on it needs
  no dark: variant — it looks identical on a light or dark page. Only the form
  side inherits the theme and carries dark: utilities.
-->
<section class="mx-auto w-full max-w-4xl px-4 py-12 sm:py-16">
  <div class="grid overflow-hidden rounded-2xl border border-gray-200 md:grid-cols-2 dark:border-gray-800">
    <div class="bg-gradient-to-br from-blue-600 via-indigo-600 to-purple-700 p-6 sm:p-8">
      <h2 class="text-2xl font-bold tracking-tight text-white">Let's build something</h2>
      <p class="mt-3 text-sm leading-relaxed text-blue-50">Tell us about your project. We'll come back with next steps, not a sales script.</p>
    </div>
    <form class="space-y-4 bg-white p-6 sm:p-8 dark:bg-gray-950">
      <div>
        <label for="cg-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
        <input id="cg-name" name="name" type="text" autocomplete="name" required class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400" />
      </div>
      <div>
        <label for="cg-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
        <input id="cg-email" name="email" type="email" autocomplete="email" required class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400" />
      </div>
      <div>
        <label for="cg-message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
        <textarea id="cg-message" name="message" rows="4" required class="mt-1.5 block w-full resize-y rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400"></textarea>
      </div>
      <button type="submit" class="inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">Send message</button>
    </form>
  </div>
</section>