RulzCo - Callback Request Form

<section id="contact" class="bg-neutral-950 py-20"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(8)">
  <div class="mx-auto max-w-7xl px-6">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-start">
      <div class="">
        <h2 class="text-3xl sm:text-4xl tracking-tight text-white font-normal font-instrument-serif" style="">Speak to
          an Automation Specialist</h2>
        <p class="mt-4 text-white/80 font-geist" style="">Tell us about your business and we’ll show you the fastest
          path to 60‑second responses.</p>
        <div class="mt-6 rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur">
          <div class="flex items-start gap-3">
            <div
              class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-white text-neutral-900 font-medium font-geist"
              style="">R</div>
            <div class="">
              <p class="text-sm text-white/90 font-geist" style="">Average first response time: under 15 minutes during
                business hours.</p>
              <p class="text-xs text-white/60 mt-1 font-geist" style="">Manchester-based. Serving clients UK-wide.</p>
            </div>
          </div>
          <div class="mt-4 flex items-center gap-3 text-sm">
            <a href="mailto:hello@rulz.ai"
              class="inline-flex items-center gap-2 hover:text-white text-white/90 font-geist"
              style="">hello@rulz.co<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                class="w-[16px] h-[16px]" data-icon-replaced="true" data-lucide="mail"
                style="width: 16px; height: 16px; color: rgb(255, 255, 255);">
                <rect width="20" height="16" x="2" y="4" rx="2" class=""></rect>
                <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" class=""></path>
              </svg></a>
            <span class="text-white/30 font-geist" style="">•</span>
            <a href="tel:+441612345678" class="inline-flex items-center gap-2 text-white/90 hover:text-white font-geist"
              style="">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                class="w-[16px] h-[16px]" data-icon-replaced="true" data-lucide="phone"
                style="color: rgb(255, 255, 255); width: 16px; height: 16px;">
                <path
                  d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
                  class=""></path>
              </svg>
              +44 161 234 5678
            </a>
          </div>
        </div>
      </div>

      <form class="rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur space-y-4" action="#" method="POST"
        aria-label="Contact form">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="">
            <label for="name" class="block text-sm text-white/80 mb-1 font-geist" style="">Full name</label>
            <input id="name" name="name" type="text" required="" class="w-full rounded-xl bg-black/30 border border-white/10 text-white placeholder-white/40 px-3 py-2 outline-none focus:border-white/30" placeholder="Alex Johnson">
          </div>
          <div>
            <label for="business" class="block text-sm text-white/80 mb-1 font-geist" style="">Business name</label>
            <input id="business" name="business" type="text" class="w-full rounded-xl bg-black/30 border border-white/10 text-white placeholder-white/40 px-3 py-2 outline-none focus:border-white/30" placeholder="AJ Plumbing Ltd">
          </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="">
            <label for="email" class="block text-sm text-white/80 mb-1 font-geist" style="">Email</label>
            <input id="email" name="email" type="email" required="" class="w-full rounded-xl bg-black/30 border border-white/10 text-white placeholder-white/40 px-3 py-2 outline-none focus:border-white/30" placeholder="you@company.com">
          </div>
          <div>
            <label for="phone" class="block text-sm text-white/80 mb-1 font-geist" style="">Phone</label>
            <input id="phone" name="phone" type="tel" class="w-full rounded-xl bg-black/30 border border-white/10 text-white placeholder-white/40 px-3 py-2 outline-none focus:border-white/30" placeholder="+44 7xxx xxx xxx">
          </div>
        </div>
        <div class="">
          <label for="service" class="block text-sm text-white/80 mb-1 font-geist" style="">Interested in</label>
          <select id="service" name="service" class="w-full rounded-xl bg-black/30 border border-white/10 text-white px-3 py-2 outline-none focus:border-white/30">
                <option class="bg-neutral-900 font-geist" style="">Speed-to-Lead System</option>
                <option class="bg-neutral-900 font-geist" style="">AI Receptionist</option>
                <option class="bg-neutral-900 font-geist" style="">WhatsApp/SMS Booking</option>
                <option class="bg-neutral-900 font-geist" style="">Social Media DM Bot</option>
                <option class="bg-neutral-900 font-geist" style="">Not sure yet</option>
              </select>
        </div>
        <div class="">
          <label for="message" class="block text-sm text-white/80 mb-1 font-geist" style="">What are you trying to improve?</label>
          <textarea id="message" name="message" rows="4" class="w-full rounded-xl bg-black/30 border border-white/10 text-white placeholder-white/40 px-3 py-2 outline-none focus:border-white/30" placeholder="e.g., We miss after-hours calls and want WhatsApp booking."></textarea>
        </div>
        <button type="submit" class="inline-flex items-center justify-center w-full rounded-xl bg-white text-neutral-900 hover:bg-white/90 transition-colors px-4 py-3 text-sm font-medium font-geist" style="">
              Request a Callback
            </button>
        <p class="text-xs text-white/50 text-center font-geist" style="">By submitting, you agree to our privacy policy.
        </p>
      </form>
    </div>
  </div>
</section>