Contact Form

<section class="ws-forms bg-[var(--ws-forms-bg)] py-20">
  <div class="mx-auto max-w-2xl px-6">
    <div class="mb-8">
      <h2 class="text-2xl font-bold text-[var(--ws-forms-text)]">Contact Us</h2>
      <p class="mt-2 text-[var(--ws-forms-label)]">Have a question or want to work together? Fill out the form below and we'll get back to you.</p>
    </div>

    <form class="space-y-6">
      <!-- Name & Email -->
      <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
        <div>
          <label for="contact-name" class="block text-sm font-medium text-[var(--ws-forms-label)]">
            Name <span class="text-[var(--ws-color-danger)]" aria-hidden="true">*</span>
          </label>
          <input type="text" id="contact-name" name="name" required autocomplete="name"
            class="mt-1.5 block w-full rounded-lg border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-forms-text)] placeholder:text-[var(--ws-forms-label)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]"
            placeholder="Your full name">
        </div>
        <div>
          <label for="contact-email" class="block text-sm font-medium text-[var(--ws-forms-label)]">
            Email <span class="text-[var(--ws-color-danger)]" aria-hidden="true">*</span>
          </label>
          <input type="email" id="contact-email" name="email" required autocomplete="email"
            class="mt-1.5 block w-full rounded-lg border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-forms-text)] placeholder:text-[var(--ws-forms-label)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]"
            placeholder="you@example.com">
        </div>
      </div>

      <!-- Subject -->
      <div>
        <label for="contact-subject" class="block text-sm font-medium text-[var(--ws-forms-label)]">
          Subject <span class="text-[var(--ws-color-danger)]" aria-hidden="true">*</span>
        </label>
        <input type="text" id="contact-subject" name="subject" required
          class="mt-1.5 block w-full rounded-lg border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-forms-text)] placeholder:text-[var(--ws-forms-label)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]"
          placeholder="What is this regarding?">
      </div>

      <!-- Message -->
      <div>
        <label for="contact-message" class="block text-sm font-medium text-[var(--ws-forms-label)]">
          Message <span class="text-[var(--ws-color-danger)]" aria-hidden="true">*</span>
        </label>
        <textarea id="contact-message" name="message" rows="5" required
          class="mt-1.5 block w-full rounded-lg border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-forms-text)] placeholder:text-[var(--ws-forms-label)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]"
          placeholder="Tell us more about your inquiry..."></textarea>
        <p class="mt-1.5 text-xs text-[var(--ws-forms-label)]">All fields marked with <span class="text-[var(--ws-color-danger)]">*</span> are required.</p>
      </div>

      <!-- Submit -->
      <div>
        <button type="submit"
          class="w-full rounded-lg bg-[var(--ws-forms-action-bg)] px-5 py-3 text-sm font-semibold text-[var(--ws-forms-action-text)] transition hover:brightness-110 focus:outline-none focus:ring-2 focus:ring-[var(--ws-forms-input-focus)] focus:ring-offset-2">
          Send Message
        </button>
      </div>
    </form>
  </div>
</section>