Dark Themed Signup Form with Benefit Highlights

<div class="bg-neutral-900/30 ring-neutral-800 ring-1 rounded-xl pt-8 pr-8 pb-8 pl-8 max-w-6xl">
  <div class="text-center mb-12">
    <h2 class="text-5xl font-light text-white tracking-tight font-merriweather mb-4"
      style="font-variation-settings: 'wght' 600;">
      Get started with Mira today
    </h2>
    <p class="text-lg text-slate-300/85 max-w-2xl mx-auto">
      Join thousands of creative professionals who are already transforming their workflow with AI-powered assistance.
    </p>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
    <!-- Left: Contact Form -->
    <div class="space-y-6">
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label class="block text-sm font-medium text-neutral-300 mb-2">First Name</label>
          <input type="text" class="w-full bg-neutral-950/70 ring-1 ring-neutral-800 rounded-lg px-4 py-3 text-sm text-neutral-200 placeholder:text-neutral-600 focus:ring-2 focus:ring-sky-400/40 focus:outline-none transition-all" placeholder="Enter your first name">
        </div>
        <div>
          <label class="block text-sm font-medium text-neutral-300 mb-2">Last Name</label>
          <input type="text" class="w-full bg-neutral-950/70 ring-1 ring-neutral-800 rounded-lg px-4 py-3 text-sm text-neutral-200 placeholder:text-neutral-600 focus:ring-2 focus:ring-sky-400/40 focus:outline-none transition-all" placeholder="Enter your last name">
        </div>
      </div>

      <div>
        <label class="block text-sm font-medium text-neutral-300 mb-2">Email Address</label>
        <input type="email" class="w-full bg-neutral-950/70 ring-1 ring-neutral-800 rounded-lg px-4 py-3 text-sm text-neutral-200 placeholder:text-neutral-600 focus:ring-2 focus:ring-sky-400/40 focus:outline-none transition-all" placeholder="your.email@company.com">
      </div>

      <div>
        <label class="block text-sm font-medium text-neutral-300 mb-2">How can Mira help you?</label>
        <textarea class="w-full bg-neutral-950/70 ring-1 ring-neutral-800 rounded-lg px-4 py-3 text-sm text-neutral-200 placeholder:text-neutral-600 focus:ring-2 focus:ring-sky-400/40 focus:outline-none transition-all resize-none h-32" placeholder="Tell us about your creative projects and how you'd like to use Mira..."></textarea>
      </div>

      <button class="relative inline-flex items-center justify-center gap-2 overflow-hidden shadow-[0_0_0_1px_rgba(56,189,248,0.25),inset_0_0_0_1px_rgba(255,255,255,0.08)] transition-all duration-300 hover:ring-sky-400/60 hover:shadow-[0_0_0_1px_rgba(56,189,248,0.35),0_40px_80px_rgba(56,189,248,0.18)] hover:bg-sky-500/10 ring-sky-400/30 ring-1 text-base font-semibold text-white tracking-tight bg-sky-500/10 border-0 rounded-full px-8 py-4 w-full">
        <span class="relative z-[1]">Start your AI journey</span>
        <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="relative z-[1]">
          <path d="M5 12h14" class=""></path>
          <path d="m12 5 7 7-7 7" class=""></path>
        </svg>
        <span aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-full opacity-80 hover:opacity-100 transition-opacity duration-300" style="box-shadow: 0 0 0 1px rgba(56,189,248,0.45), 0 18px 60px rgba(56,189,248,0.25); background: radial-gradient(140% 160% at 50% -20%, rgba(56,189,248,0.22) 0%, rgba(56,189,248,0.08) 35%, rgba(56,189,248,0.00) 60%);"></span>
      </button>
    </div>

    <!-- Right: Benefits -->
    <div class="space-y-6">
      <div class="flex items-start gap-4">
        <div
          class="h-10 w-10 rounded-lg bg-sky-500/10 ring-1 ring-sky-400/30 flex items-center justify-center flex-shrink-0">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="text-sky-200">
            <path d="M22 12h-4l-3 9L9 3l-3 9H2" class=""></path>
          </svg>
        </div>
        <div>
          <h3 class="text-lg font-semibold text-white mb-2">Instant Setup</h3>
          <p class="text-sm text-slate-300/80">Get started in minutes, not hours. Mira integrates seamlessly with your
            existing tools and workflow.</p>
        </div>
      </div>

      <div class="flex items-start gap-4">
        <div
          class="h-10 w-10 rounded-lg bg-green-500/10 ring-1 ring-green-400/30 flex items-center justify-center flex-shrink-0">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="text-green-200">
            <path d="M9 12l2 2 4-4" class=""></path>
            <circle cx="12" cy="12" r="10" class=""></circle>
          </svg>
        </div>
        <div>
          <h3 class="text-lg font-semibold text-white mb-2">Free Trial</h3>
          <p class="text-sm text-slate-300/80">Try all Pro features free for 14 days. No credit card required, cancel
            anytime.</p>
        </div>
      </div>

      <div class="flex items-start gap-4">
        <div
          class="h-10 w-10 rounded-lg bg-purple-500/10 ring-1 ring-purple-400/30 flex items-center justify-center flex-shrink-0">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="text-purple-200">
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" class=""></path>
          </svg>
        </div>
        <div>
          <h3 class="text-lg font-semibold text-white mb-2">Enterprise Security</h3>
          <p class="text-sm text-slate-300/80">Your data is protected with bank-level security and encryption. SOC 2
            compliant.</p>
        </div>
      </div>
    </div>
  </div>
</div>