contact

<section class="bg-white px-6 py-24 lg:px-8">
  <div class="mx-auto max-w-5xl">
    <div class="grid grid-cols-1 gap-16 sm:grid-cols-2 sm:items-start">
      <!-- Left: info -->
      <div>
        <p
          class="mb-3 text-xs font-semibold uppercase tracking-widest text-violet-600"
        >
          Contact
        </p>
        <h2
          class="text-4xl font-extrabold tracking-tight text-gray-950 sm:text-5xl"
        >
          Get in touch.
        </h2>
        <p class="mt-4 text-base leading-7 text-gray-500">
          Have a question, a feature request, or just want to say hello? We'd
          love to hear from you.
        </p>
        <ul class="mt-10 space-y-6">
          <li>
            <p
              class="mb-1 text-xs font-semibold uppercase tracking-widest text-gray-400"
            >
              Email
            </p>
            <a
              href="mailto:hello@blockui.dev"
              class="text-sm font-medium text-gray-950 transition hover:text-violet-600"
            >
              hello@blockui.dev
            </a>
          </li>
          <li>
            <p
              class="mb-1 text-xs font-semibold uppercase tracking-widest text-gray-400"
            >
              Twitter / X
            </p>
            <a
              href="#"
              class="text-sm font-medium text-gray-950 transition hover:text-violet-600"
            >
              @blockui
            </a>
          </li>
          <li>
            <p
              class="mb-1 text-xs font-semibold uppercase tracking-widest text-gray-400"
            >
              GitHub
            </p>
            <a
              href="#"
              class="text-sm font-medium text-gray-950 transition hover:text-violet-600"
            >
              github.com/blockui
            </a>
          </li>
        </ul>
      </div>
      <!-- Right: form -->
      <form class="space-y-5">
        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
          <div>
            <label
              for="first-name"
              class="mb-1.5 block text-xs font-semibold text-gray-700"
            >
              First name
            </label>
            <input
              id="first-name"
              type="text"
              name="first-name"
              autocomplete="given-name"
              class="w-full rounded-xl border border-gray-200 bg-gray-50 px-4 py-2.5 text-sm text-gray-950 outline-none transition placeholder:text-gray-400 focus:border-violet-400 focus:ring-2 focus:ring-violet-100"
              placeholder="Ada"
            />
          </div>
          <div>
            <label
              for="last-name"
              class="mb-1.5 block text-xs font-semibold text-gray-700"
            >
              Last name
            </label>
            <input
              id="last-name"
              type="text"
              name="last-name"
              autocomplete="family-name"
              class="w-full rounded-xl border border-gray-200 bg-gray-50 px-4 py-2.5 text-sm text-gray-950 outline-none transition placeholder:text-gray-400 focus:border-violet-400 focus:ring-2 focus:ring-violet-100"
              placeholder="Lovelace"
            />
          </div>
        </div>
        <div>
          <label
            for="email"
            class="mb-1.5 block text-xs font-semibold text-gray-700"
          >
            Email
          </label>
          <input
            id="email"
            type="email"
            name="email"
            autocomplete="email"
            class="w-full rounded-xl border border-gray-200 bg-gray-50 px-4 py-2.5 text-sm text-gray-950 outline-none transition placeholder:text-gray-400 focus:border-violet-400 focus:ring-2 focus:ring-violet-100"
            placeholder="ada@example.com"
          />
        </div>
        <div>
          <label
            for="message"
            class="mb-1.5 block text-xs font-semibold text-gray-700"
          >
            Message
          </label>
          <textarea
            id="message"
            name="message"
            rows="5"
            class="w-full resize-none rounded-xl border border-gray-200 bg-gray-50 px-4 py-2.5 text-sm text-gray-950 outline-none transition placeholder:text-gray-400 focus:border-violet-400 focus:ring-2 focus:ring-violet-100"
            placeholder="Tell us what's on your mind…"
          ></textarea>
        </div>
        <button
          type="submit"
          class="rounded-xl bg-gray-950 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-gray-800"
        >
          Send message
        </button>
      </form>
    </div>
  </div>
</section>

<section class="bg-gray-50 px-6 py-24 lg:px-8">
  <div class="mx-auto max-w-xl">
    <div class="mb-10 text-center">
      <p
        class="mb-3 text-xs font-semibold uppercase tracking-widest text-violet-600"
      >
        Contact
      </p>
      <h2 class="text-4xl font-extrabold tracking-tight text-gray-950">
        Say hello.
      </h2>
      <p class="mt-3 text-sm leading-6 text-gray-500">
        We read every message and reply within one business day.
      </p>
    </div>
    <form class="space-y-4">
      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div>
          <label
            for="name"
            class="mb-1.5 block text-xs font-semibold text-gray-700"
            >Name</label
          >
          <input
            id="name"
            type="text"
            name="name"
            autocomplete="name"
            class="w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm text-gray-950 shadow-xs outline-none transition placeholder:text-gray-400 focus:border-violet-400 focus:ring-2 focus:ring-violet-100"
            placeholder="Ada Lovelace"
          />
        </div>
        <div>
          <label
            for="email"
            class="mb-1.5 block text-xs font-semibold text-gray-700"
            >Email</label
          >
          <input
            id="email"
            type="email"
            name="email"
            autocomplete="email"
            class="w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm text-gray-950 shadow-xs outline-none transition placeholder:text-gray-400 focus:border-violet-400 focus:ring-2 focus:ring-violet-100"
            placeholder="ada@example.com"
          />
        </div>
      </div>
      <div>
        <label
          for="subject"
          class="mb-1.5 block text-xs font-semibold text-gray-700"
          >Subject</label
        >
        <input
          id="subject"
          type="text"
          name="subject"
          class="w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm text-gray-950 shadow-xs outline-none transition placeholder:text-gray-400 focus:border-violet-400 focus:ring-2 focus:ring-violet-100"
          placeholder="What's this about?"
        />
      </div>
      <div>
        <label
          for="message"
          class="mb-1.5 block text-xs font-semibold text-gray-700"
          >Message</label
        >
        <textarea
          id="message"
          name="message"
          rows="5"
          class="w-full resize-none rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm text-gray-950 shadow-xs outline-none transition placeholder:text-gray-400 focus:border-violet-400 focus:ring-2 focus:ring-violet-100"
          placeholder="Tell us what's on your mind…"
        ></textarea>
      </div>
      <button
        type="submit"
        class="w-full rounded-xl bg-gray-950 py-2.5 text-sm font-semibold text-white transition hover:bg-gray-800"
      >
        Send message
      </button>
    </form>
  </div>
</section>

<section class="border-t border-gray-100 bg-white px-6 py-24 lg:px-8">
  <div class="mx-auto max-w-3xl">
    <div class="mb-12">
      <p
        class="mb-2 text-xs font-semibold uppercase tracking-widest text-gray-400"
      >
        Contact
      </p>
      <h2 class="text-3xl font-bold tracking-tight text-gray-950">
        Get in touch.
      </h2>
    </div>
    <form class="grid grid-cols-1 gap-6 sm:grid-cols-2">
      <div>
        <label for="name" class="mb-1.5 block text-xs font-medium text-gray-500"
          >Name</label
        >
        <input
          id="name"
          type="text"
          name="name"
          autocomplete="name"
          class="w-full border-b border-gray-200 bg-transparent pb-2 text-sm text-gray-950 outline-none transition placeholder:text-gray-300 focus:border-gray-950"
          placeholder="Ada Lovelace"
        />
      </div>
      <div>
        <label
          for="email"
          class="mb-1.5 block text-xs font-medium text-gray-500"
          >Email</label
        >
        <input
          id="email"
          type="email"
          name="email"
          autocomplete="email"
          class="w-full border-b border-gray-200 bg-transparent pb-2 text-sm text-gray-950 outline-none transition placeholder:text-gray-300 focus:border-gray-950"
          placeholder="ada@example.com"
        />
      </div>
      <div class="sm:col-span-2">
        <label
          for="message"
          class="mb-1.5 block text-xs font-medium text-gray-500"
          >Message</label
        >
        <textarea
          id="message"
          name="message"
          rows="4"
          class="w-full resize-none border-b border-gray-200 bg-transparent pb-2 text-sm text-gray-950 outline-none transition placeholder:text-gray-300 focus:border-gray-950"
          placeholder="Tell us what's on your mind…"
        ></textarea>
      </div>
      <div class="flex items-center justify-between sm:col-span-2">
        <p class="text-xs text-gray-400">We reply within one business day.</p>
        <button
          type="submit"
          class="rounded-full bg-gray-950 px-5 py-2 text-sm font-semibold text-white transition hover:bg-gray-800"
        >
          Send →
        </button>
      </div>
    </form>
  </div>
</section>