<div class="vt-bg-surface-page vt-flex vt-items-center vt-justify-center vt-p-8 vt-rounded-xl vt-min-h-[480px]">
  <div class="vt-w-full vt-max-w-sm">
    <div class="vt-text-center vt-mb-8">
      <img src="/logo.svg" alt="Veritheme" class="vt-w-10 vt-h-10 vt-mx-auto vt-mb-4">
      <h1 class="vt-text-2xl vt-font-bold">Welcome back</h1>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-1">Sign in to your account</p>
    </div>
    <div class="vt-card vt-p-6 vt-space-y-4">
      <div>
        <label class="vt-label vt-mb-1.5 vt-block" for="auth-1-1">Email</label>
        <input type="email" placeholder="you@example.com" class="vt-input" id="auth-1-1">
      </div>
      <div>
        <div class="vt-flex vt-items-center vt-justify-between vt-mb-1.5">
          <label class="vt-label" for="auth-1-2">Password</label>
          <a href="#" class="vt-text-xs vt-text-info-fill">Forgot password?</a>
        </div>
        <input type="password" placeholder="••••••••" class="vt-input" id="auth-1-2">
      </div>
      <button class="vt-btn vt-btn-primary vt-w-full">Sign in</button>
    </div>
    <p class="vt-text-center vt-text-sm vt-text-foreground-muted vt-mt-4">No account? <a href="#" class="vt-text-info-fill vt-font-medium">Sign up</a></p>
  </div>
</div>

<div class="vt-bg-surface-page vt-flex vt-items-center vt-justify-center vt-p-8 vt-rounded-xl vt-min-h-[560px]">
  <div class="vt-w-full vt-max-w-sm">
    <div class="vt-text-center vt-mb-8">
      <img src="/logo.svg" alt="Veritheme" class="vt-w-10 vt-h-10 vt-mx-auto vt-mb-4">
      <h1 class="vt-text-2xl vt-font-bold">Create an account</h1>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-1">Start your free trial today</p>
    </div>
    <div class="vt-card vt-p-6 vt-space-y-4">
      <div class="vt-grid vt-grid-cols-2 vt-gap-3">
        <div>
          <label class="vt-label vt-mb-1.5 vt-block" for="auth-2-1">First name</label>
          <input type="text" placeholder="John" class="vt-input" id="auth-2-1">
        </div>
        <div>
          <label class="vt-label vt-mb-1.5 vt-block" for="auth-2-2">Last name</label>
          <input type="text" placeholder="Doe" class="vt-input" id="auth-2-2">
        </div>
      </div>
      <div>
        <label class="vt-label vt-mb-1.5 vt-block" for="auth-2-3">Email</label>
        <input type="email" placeholder="you@example.com" class="vt-input" id="auth-2-3" aria-describedby="auth-2-5">
      </div>
      <div>
        <label class="vt-label vt-mb-1.5 vt-block" for="auth-2-4">Password</label>
        <input type="password" placeholder="Min. 8 characters" class="vt-input" id="auth-2-4" aria-describedby="auth-2-5">
      </div>
      <button class="vt-btn vt-btn-primary vt-w-full">Create account</button>
      <p class="vt-text-xs vt-text-foreground-muted vt-text-center" id="auth-2-5">By creating an account you agree to our <a href="#" class="vt-text-info-fill">Terms</a> and <a href="#" class="vt-text-info-fill">Privacy Policy</a>.</p>
    </div>
    <p class="vt-text-center vt-text-sm vt-text-foreground-muted vt-mt-4">Already have an account? <a href="#" class="vt-text-info-fill vt-font-medium">Sign in</a></p>
  </div>
</div>

<div class="vt-bg-surface-page vt-flex vt-items-center vt-justify-center vt-p-8 vt-rounded-xl vt-min-h-[400px]">
  <div class="vt-w-full vt-max-w-sm">
    <div class="vt-text-center vt-mb-8">
      <img src="/logo.svg" alt="Veritheme" class="vt-w-10 vt-h-10 vt-mx-auto vt-mb-4">
      <h1 class="vt-text-2xl vt-font-bold">Forgot password?</h1>
      <p class="vt-text-sm vt-text-foreground-muted vt-mt-1">Enter your email and we'll send a reset link</p>
    </div>
    <div class="vt-card vt-p-6 vt-space-y-4">
      <div>
        <label class="vt-label vt-mb-1.5 vt-block" for="auth-3-1">Email</label>
        <input type="email" placeholder="you@example.com" class="vt-input" id="auth-3-1">
      </div>
      <button class="vt-btn vt-btn-primary vt-w-full">Send reset link</button>
    </div>
    <p class="vt-text-center vt-text-sm vt-text-foreground-muted vt-mt-4"><a href="#" class="vt-text-info-fill vt-font-medium">Back to sign in</a></p>
  </div>
</div>

<div class="vt-rounded-xl vt-overflow-hidden vt-min-h-[440px] vt-flex vt-border vt-border-border-default">
  <div class="vt-hidden vt-lg:flex vt-flex-col vt-justify-end vt-w-5/12 vt-bg-surface-moderate vt-p-10">
    <p class="vt-text-lg vt-font-semibold vt-leading-snug">"The best UI kit I've ever worked with."</p>
    <p class="vt-text-sm vt-text-foreground-secondary vt-mt-2">— Jane Smith, Product Designer</p>
  </div>
  <div class="vt-flex vt-flex-1 vt-items-center vt-justify-center vt-p-8 vt-bg-surface-page">
    <div class="vt-w-full vt-max-w-xs vt-space-y-5">
      <div>
        <h1 class="vt-text-xl vt-font-bold">Sign in</h1>
        <p class="vt-text-sm vt-text-foreground-muted vt-mt-1">Welcome back</p>
      </div>
      <div class="vt-space-y-3">
        <div>
          <label class="vt-label vt-mb-1.5 vt-block" for="auth-4-1">Email</label>
          <input type="email" placeholder="you@example.com" class="vt-input" id="auth-4-1">
        </div>
        <div>
          <label class="vt-label vt-mb-1.5 vt-block" for="auth-4-2">Password</label>
          <input type="password" placeholder="••••••••" class="vt-input" id="auth-4-2">
        </div>
        <button class="vt-btn vt-btn-primary vt-w-full">Sign in</button>
      </div>
      <p class="vt-text-sm vt-text-foreground-muted">No account? <a href="#" class="vt-text-info-fill vt-font-medium">Sign up</a></p>
    </div>
  </div>
</div>