Auth Split

<section class="ws-auth flex min-h-screen">
  <!-- Left: Form -->
  <div class="flex flex-1 items-center justify-center bg-[var(--ws-auth-bg)] px-6 py-12">
    <div class="w-full max-w-md">
      <div>
        <p class="text-2xl font-bold text-[var(--ws-auth-text)]">Webspire</p>
        <h1 class="mt-6 text-2xl font-bold text-[var(--ws-auth-text)]">Create your account</h1>
        <p class="mt-2 text-sm text-[var(--ws-auth-text-soft)]">Start your free trial. No credit card required.</p>
      </div>

      <form class="mt-8 space-y-5">
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label for="first-name" class="block text-sm font-medium text-[var(--ws-auth-text-soft)]">First name</label>
            <input type="text" id="first-name" name="first-name" autocomplete="given-name" required
              class="mt-1.5 block w-full rounded-lg border border-[var(--ws-auth-input-border)] bg-[var(--ws-auth-card-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-auth-text)] placeholder:text-[var(--ws-auth-text-soft)] focus:border-[var(--ws-auth-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-auth-action-bg)]"
              placeholder="Jane">
          </div>
          <div>
            <label for="last-name" class="block text-sm font-medium text-[var(--ws-auth-text-soft)]">Last name</label>
            <input type="text" id="last-name" name="last-name" autocomplete="family-name" required
              class="mt-1.5 block w-full rounded-lg border border-[var(--ws-auth-input-border)] bg-[var(--ws-auth-card-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-auth-text)] placeholder:text-[var(--ws-auth-text-soft)] focus:border-[var(--ws-auth-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-auth-action-bg)]"
              placeholder="Doe">
          </div>
        </div>

        <div>
          <label for="signup-email" class="block text-sm font-medium text-[var(--ws-auth-text-soft)]">Email</label>
          <input type="email" id="signup-email" name="email" autocomplete="email" required
            class="mt-1.5 block w-full rounded-lg border border-[var(--ws-auth-input-border)] bg-[var(--ws-auth-card-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-auth-text)] placeholder:text-[var(--ws-auth-text-soft)] focus:border-[var(--ws-auth-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-auth-action-bg)]"
            placeholder="jane@company.com">
        </div>

        <div>
          <label for="signup-password" class="block text-sm font-medium text-[var(--ws-auth-text-soft)]">Password</label>
          <input type="password" id="signup-password" name="password" autocomplete="new-password" required
            class="mt-1.5 block w-full rounded-lg border border-[var(--ws-auth-input-border)] bg-[var(--ws-auth-card-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-auth-text)] placeholder:text-[var(--ws-auth-text-soft)] focus:border-[var(--ws-auth-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-auth-action-bg)]"
            placeholder="8+ characters">
        </div>

        <div class="flex items-start gap-2">
          <input type="checkbox" id="terms" name="terms" required class="mt-0.5 h-4 w-4 rounded border-[var(--ws-auth-input-border)]">
          <label for="terms" class="text-sm text-[var(--ws-auth-text-soft)]">
            I agree to the <a href="#" class="text-[var(--ws-auth-action-bg)]">Terms</a> and <a href="#" class="text-[var(--ws-auth-action-bg)]">Privacy Policy</a>
          </label>
        </div>

        <button type="submit" class="w-full rounded-lg bg-[var(--ws-auth-action-bg)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-auth-action-text)] transition hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-[var(--ws-auth-action-bg)] focus:ring-offset-2">
          Create account
        </button>
      </form>

      <p class="mt-6 text-sm text-[var(--ws-auth-text-soft)]">
        Already have an account? <a href="#" class="font-semibold text-[var(--ws-auth-action-bg)]">Sign in</a>
      </p>
    </div>
  </div>

  <!-- Right: Image / Brand panel -->
  <div class="hidden flex-1 items-center justify-center bg-indigo-600 p-12 lg:flex">
    <div class="max-w-md text-center text-white">
      <p class="text-4xl font-bold leading-tight">Ship beautiful products faster than ever.</p>
      <p class="mt-4 text-lg text-indigo-100">Join 500+ teams building with Webspire patterns and CSS effects.</p>
      <div class="mt-8 flex justify-center gap-6 text-sm text-indigo-200">
        <div class="text-center">
          <p class="text-2xl font-bold text-white">500+</p>
          <p>Teams</p>
        </div>
        <div class="text-center">
          <p class="text-2xl font-bold text-white">50k+</p>
          <p>Developers</p>
        </div>
        <div class="text-center">
          <p class="text-2xl font-bold text-white">99%</p>
          <p>Uptime</p>
        </div>
      </div>
    </div>
  </div>
</section>