Hero With Form

<section class="ws-hero relative overflow-hidden bg-[var(--ws-hero-bg)] text-[var(--ws-hero-text)]">
  <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-indigo-500/20 via-transparent to-cyan-400/20"></div>
  <div class="mx-auto grid max-w-7xl gap-10 px-6 py-20 lg:grid-cols-2 lg:items-center lg:py-28">
    <div class="relative z-10">
      <p class="mb-4 inline-flex rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs font-medium uppercase tracking-[0.2em] text-[var(--ws-hero-text-soft)]">Start for free</p>
      <h1 class="text-balance text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">Launch your next project in minutes.</h1>
      <p class="mt-5 max-w-xl text-pretty text-lg text-[var(--ws-hero-text-soft)]">Get access to hundreds of production-ready patterns, components, and templates. No credit card required.</p>
    </div>
    <div class="relative z-10">
      <div class="rounded-2xl border border-white/15 bg-white/5 p-6 shadow-2xl backdrop-blur sm:p-8">
        <h2 class="text-lg font-semibold text-white">Create your account</h2>
        <form class="mt-6 space-y-4" aria-label="Signup form">
          <div>
            <label for="hero-name" class="block text-sm font-medium text-slate-300">Name</label>
            <input type="text" id="hero-name" name="name" autocomplete="name" placeholder="Jane Doe" class="mt-1 block w-full rounded-lg border border-white/15 bg-white/10 px-3 py-2.5 text-sm text-white shadow-sm placeholder:text-slate-500 focus:border-cyan-400 focus:outline-none focus:ring-1 focus:ring-cyan-400" />
          </div>
          <div>
            <label for="hero-email" class="block text-sm font-medium text-slate-300">Email</label>
            <input type="email" id="hero-email" name="email" autocomplete="email" placeholder="jane@example.com" class="mt-1 block w-full rounded-lg border border-white/15 bg-white/10 px-3 py-2.5 text-sm text-white shadow-sm placeholder:text-slate-500 focus:border-cyan-400 focus:outline-none focus:ring-1 focus:ring-cyan-400" />
          </div>
          <button type="submit" class="w-full rounded-lg bg-cyan-300 px-4 py-2.5 text-sm font-semibold text-slate-900 transition hover:bg-cyan-200">Get Started</button>
        </form>
        <p class="mt-4 text-center text-xs text-[var(--ws-hero-text-muted)]">No credit card required. Free plan available.</p>
      </div>
    </div>
  </div>
</section>