<section
  class="flex min-h-svh items-center justify-center bg-gray-50 px-6 py-12 lg:px-8"
>
  <div class="w-full max-w-sm">
    <div class="mb-8 text-center">
      <div
        class="mx-auto mb-4 flex h-10 w-10 items-center justify-center rounded-2xl bg-gray-950"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="h-5 w-5 text-white"
          aria-hidden="true"
        >
          <path
            fill-rule="evenodd"
            d="M12 1.5a5.25 5.25 0 0 0-5.25 5.25v3a3 3 0 0 0-3 3v6.75a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3v-6.75a3 3 0 0 0-3-3v-3c0-2.9-2.35-5.25-5.25-5.25Zm3.75 8.25v-3a3.75 3.75 0 1 0-7.5 0v3h7.5Z"
            clip-rule="evenodd"
          ></path>
        </svg>
      </div>
      <h1 class="text-2xl font-bold tracking-tight text-gray-950">
        Welcome back
      </h1>
      <p class="mt-1 text-sm text-gray-500">
        Sign in to your account to continue.
      </p>
    </div>
    <form class="space-y-4">
      <div>
        <label
          for="email"
          class="mb-1.5 block text-xs font-semibold text-gray-700"
          >Email</label
        >
        <input
          id="email"
          type="email"
          name="email"
          autocomplete="email"
          required
          class="w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm text-gray-950 shadow-xs outline-none transition placeholder:text-gray-400 focus:border-violet-400 focus:ring-2 focus:ring-violet-100"
          placeholder="[email protected]"
        />
      </div>
      <div>
        <div class="mb-1.5 flex items-center justify-between">
          <label for="password" class="text-xs font-semibold text-gray-700"
            >Password</label
          >
          <a
            href="#"
            class="text-xs text-violet-600 transition hover:text-violet-700"
            >Forgot password?</a
          >
        </div>
        <input
          id="password"
          type="password"
          name="password"
          autocomplete="current-password"
          required
          class="w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm text-gray-950 shadow-xs outline-none transition placeholder:text-gray-400 focus:border-violet-400 focus:ring-2 focus:ring-violet-100"
          placeholder="••••••••"
        />
      </div>
      <button
        type="submit"
        class="w-full rounded-xl bg-gray-950 py-2.5 text-sm font-semibold text-white transition hover:bg-gray-800"
      >
        Sign in
      </button>
    </form>
    <div class="my-6 flex items-center gap-3">
      <div class="h-px flex-1 bg-gray-100"></div>
      <span class="text-xs text-gray-400">or continue with</span>
      <div class="h-px flex-1 bg-gray-100"></div>
    </div>
    <button
      type="button"
      class="flex w-full items-center justify-center gap-3 rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold text-gray-700 shadow-xs transition hover:bg-gray-50"
    >
      <svg viewBox="0 0 24 24" class="h-4 w-4" aria-hidden="true">
        <path
          d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
          fill="#4285F4"
        ></path>
        <path
          d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
          fill="#34A853"
        ></path>
        <path
          d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
          fill="#FBBC05"
        ></path>
        <path
          d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
          fill="#EA4335"
        ></path>
      </svg>
      Continue with Google
    </button>
    <p class="mt-6 text-center text-xs text-gray-400">
      Don't have an account?
      <a
        href="#"
        class="font-semibold text-gray-950 transition hover:text-violet-600"
        >Sign up</a
      >
    </p>
  </div>
</section>

<section class="grid min-h-svh grid-cols-1 lg:grid-cols-2">
  <!-- Left: form -->
  <div class="flex items-center justify-center px-6 py-16 lg:px-16">
    <div class="w-full max-w-sm">
      <div class="mb-8">
        <p
          class="mb-1 text-xs font-semibold uppercase tracking-widest text-violet-600"
        >
          BlockUI
        </p>
        <h1 class="text-2xl font-bold tracking-tight text-gray-950">
          Welcome back
        </h1>
        <p class="mt-1 text-sm text-gray-500">
          Sign in to your account to continue.
        </p>
      </div>
      <form class="space-y-4">
        <div>
          <label
            for="email"
            class="mb-1.5 block text-xs font-semibold text-gray-700"
            >Email</label
          >
          <input
            id="email"
            type="email"
            name="email"
            autocomplete="email"
            required
            class="w-full rounded-xl border border-gray-200 bg-gray-50 px-4 py-2.5 text-sm text-gray-950 outline-none transition placeholder:text-gray-400 focus:border-violet-400 focus:bg-white focus:ring-2 focus:ring-violet-100"
            placeholder="[email protected]"
          />
        </div>
        <div>
          <div class="mb-1.5 flex items-center justify-between">
            <label for="password" class="text-xs font-semibold text-gray-700"
              >Password</label
            >
            <a
              href="#"
              class="text-xs text-violet-600 transition hover:text-violet-700"
              >Forgot password?</a
            >
          </div>
          <input
            id="password"
            type="password"
            name="password"
            autocomplete="current-password"
            required
            class="w-full rounded-xl border border-gray-200 bg-gray-50 px-4 py-2.5 text-sm text-gray-950 outline-none transition placeholder:text-gray-400 focus:border-violet-400 focus:bg-white focus:ring-2 focus:ring-violet-100"
            placeholder="••••••••"
          />
        </div>
        <div class="flex items-center gap-2">
          <input
            id="remember"
            type="checkbox"
            name="remember"
            class="h-4 w-4 rounded border-gray-300 accent-violet-600"
          />
          <label for="remember" class="text-xs text-gray-500"
            >Remember me for 30 days</label
          >
        </div>
        <button
          type="submit"
          class="w-full rounded-xl bg-gray-950 py-2.5 text-sm font-semibold text-white transition hover:bg-gray-800"
        >
          Sign in
        </button>
      </form>
      <div class="my-6 flex items-center gap-3">
        <div class="h-px flex-1 bg-gray-100"></div>
        <span class="text-xs text-gray-400">or</span>
        <div class="h-px flex-1 bg-gray-100"></div>
      </div>
      <button
        type="button"
        class="flex w-full items-center justify-center gap-3 rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold text-gray-700 shadow-xs transition hover:bg-gray-50"
      >
        <svg viewBox="0 0 24 24" class="h-4 w-4" aria-hidden="true">
          <path
            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
            fill="#4285F4"
          ></path>
          <path
            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
            fill="#34A853"
          ></path>
          <path
            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
            fill="#FBBC05"
          ></path>
          <path
            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
            fill="#EA4335"
          ></path>
        </svg>
        Continue with Google
      </button>
      <p class="mt-6 text-center text-xs text-gray-400">
        Don't have an account?
        <a
          href="#"
          class="font-semibold text-gray-950 transition hover:text-violet-600"
          >Sign up</a
        >
      </p>
    </div>
  </div>
  <!-- Right: brand panel -->
  <div class="relative hidden overflow-hidden bg-gray-950 lg:block">
    <div
      class="absolute -top-32 -right-32 h-96 w-96 rounded-full bg-violet-700 opacity-25 blur-3xl"
    ></div>
    <div
      class="absolute -bottom-24 -left-24 h-80 w-80 rounded-full bg-fuchsia-600 opacity-20 blur-3xl"
    ></div>
    <div class="relative flex h-full flex-col items-start justify-end p-16">
      <p
        class="mb-4 text-xs font-semibold uppercase tracking-widest text-violet-400"
      >
        BlockUI
      </p>
      <h2 class="text-3xl font-bold text-white">
        Beautiful blocks,<br />ready to ship.
      </h2>
      <p class="mt-3 max-w-xs text-sm leading-6 text-gray-400">
        Copy-paste UI blocks built with Astro and Tailwind CSS. No setup, no
        dependencies.
      </p>
    </div>
  </div>
</section>

<section class="flex min-h-svh items-center justify-center bg-white px-6">
  <div class="w-full max-w-xs">
    <div class="mb-10">
      <h1 class="text-2xl font-bold tracking-tight text-gray-950">Sign in</h1>
      <p class="mt-1 text-sm text-gray-400">
        Enter your credentials to continue.
      </p>
    </div>
    <form class="space-y-5">
      <div>
        <label
          for="email"
          class="mb-1.5 block text-xs font-medium text-gray-500"
          >Email</label
        >
        <input
          id="email"
          type="email"
          name="email"
          autocomplete="email"
          required
          class="w-full border-b border-gray-200 bg-transparent pb-2 text-sm text-gray-950 outline-none transition placeholder:text-gray-300 focus:border-gray-950"
          placeholder="[email protected]"
        />
      </div>
      <div>
        <div class="mb-1.5 flex items-center justify-between">
          <label for="password" class="text-xs font-medium text-gray-500"
            >Password</label
          >
          <a
            href="#"
            class="text-xs text-gray-400 transition hover:text-gray-600"
            >Forgot?</a
          >
        </div>
        <input
          id="password"
          type="password"
          name="password"
          autocomplete="current-password"
          required
          class="w-full border-b border-gray-200 bg-transparent pb-2 text-sm text-gray-950 outline-none transition placeholder:text-gray-300 focus:border-gray-950"
          placeholder="••••••••"
        />
      </div>
      <button
        type="submit"
        class="w-full rounded-full bg-gray-950 py-2.5 text-sm font-semibold text-white transition hover:bg-gray-800"
      >
        Sign in →
      </button>
    </form>
    <p class="mt-8 text-center text-xs text-gray-400">
      No account?
      <a
        href="#"
        class="font-semibold text-gray-700 transition hover:text-gray-950"
        >Sign up</a
      >
    </p>
  </div>
</section>