Book Opt-In Form Section with Progress Indicator

<div class="w-full max-w-full mr-auto ml-auto">
  <!-- Progress Indicator -->
  <div class="text-center mb-6">
    <h2 class="text-xl font-semibold text-white tracking-tight mb-3">
      33% Complete ...
    </h2>
    <div class="overflow-hidden bg-zinc-800 w-full h-3 border-white/10 border rounded-full relative shadow-lg">
      <div class="h-full w-1/3 bg-gradient-to-r from-blue-600 via-indigo-500 to-purple-500 relative animate-stripes">
        <div class="absolute inset-0 bg-white/20"></div>
      </div>
    </div>
  </div>

  <!-- Card Container -->
  <section
    class="bg-center z-[70] md:pb-2 md:pt-10 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/77f55872-adf5-4910-9a7c-d21c0041bbe1_3840w.webp)] bg-cover pt-40 pb-40 relative"
    style="mask-image: linear-gradient(180deg, transparent, black 55%, black 60%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 55%, black 60%, transparent);"
    id="contact">
    <div class="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
      <div class="absolute -left-40 top-10 h-[70vh] w-[60vh] rounded-full blur-3xl opacity-25"
        style="background: radial-gradient(closest-side, rgba(255,255,255,0.15), rgba(0,0,0,0));"></div>
    </div>

    <div class="max-w-6xl mr-auto ml-auto pr-6 pl-6">
      <div class="text-center">

        <h2 class="mt-4 text-4xl sm:text-6xl tracking-tight font-semibold text-white animate-in" data-delay="100">
          Get your <span class="font-medium italic text-neutral-200 font-instrument-serif">free copy</span>
        </h2>
        <p class="animate-in text-lg text-neutral-400 max-w-2xl mt-4 mr-auto ml-auto" data-delay="200">Join thousands of
          others. Enter your details below to get instant access to the book.</p>
      </div>

      <div class="mt-12 max-w-xl mx-auto">
        <!-- Opt-in Form -->
        <div class="relative rounded-2xl border border-white/10 bg-white/5 p-8 shadow-2xl backdrop-blur animate-in"
          data-delay="300">
          <h3 class="text-xl font-semibold text-white mb-6">Enter your details</h3>

          <form class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <!-- First Name -->
              <div class="space-y-2">
                <label for="firstname" class="text-sm font-medium text-zinc-300">
              First name
            </label>
                <input type="text" id="firstname" value="" class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-neutral-100 placeholder-neutral-400 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/20 transition-all" required="">
              </div>

              <!-- Last Name -->
              <div class="space-y-2">
                <label for="lastname" class="text-sm font-medium text-zinc-300">
              Last name
            </label>
                <input type="text" id="lastname" value="" class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-neutral-100 placeholder-neutral-400 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/20 transition-all" required="">
              </div>
            </div>

            <!-- Work Email -->
            <div class="space-y-2">
              <label for="email" class="text-sm font-medium text-zinc-300">
            Work E-mail
          </label>
              <input type="email" id="email" value="" class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-neutral-100 placeholder-neutral-400 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/20 transition-all" required="">
            </div>

            <!-- Company Name -->
            <div class="space-y-2">
              <label for="company" class="text-sm font-medium text-zinc-300">
            Company Name
          </label>
              <input type="text" id="company" value="" class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-neutral-100 placeholder-neutral-400 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/20 transition-all" required="">
            </div>

            <!-- Job Title -->
            <div class="space-y-2">
              <label for="jobtitle" class="text-sm font-medium text-zinc-300">
            Job Title
          </label>
              <input type="text" id="jobtitle" value="" class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-neutral-100 placeholder-neutral-400 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/20 transition-all" required="">
            </div>

            <!-- Phone -->
            <div class="space-y-2">
              <label for="phone" class="text-sm font-medium text-zinc-300">
            Phone
          </label>
              <input type="tel" id="phone" value="" class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-neutral-100 placeholder-neutral-400 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/20 transition-all" required="">
            </div>

            <!-- Submit Button -->
            <div class="pt-4">
              <button type="submit" class="group relative w-full py-4 rounded-lg bg-white/10 border border-white/20 hover:bg-white/15 text-neutral-100 font-semibold text-lg transition-all transform active:scale-[0.99] flex items-center justify-center gap-3 overflow-hidden">
            <span class="relative z-10">Get Your Free Copy</span>
          </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="absolute bottom-0 left-0 right-0 pointer-events-none">
      <div class="absolute bottom-0 left-1/2 -translate-x-1/2 opacity-25 w-[60%] h-8"
        style="background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.2) 30%, transparent 70%);">
      </div>
      <div class="h-px bg-white/10 w-full"></div>
    </div>
  </section>

  <!-- Bottom Disclaimer -->
  <p class="text-center text-xs text-zinc-600 mt-6 font-light">
    We respect your privacy and will not share your information.
  </p>
</div>