<div>
  <div class="relative min-h-screen grid bg-black">
    <div
      class="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0 ">
      <div
        class="sm:w-1/2 xl:w-3/5 bg-primary-500 h-full hidden md:flex flex-auto items-center justify-center p-10 overflow-hidden  text-white bg-no-repeat bg-cover relative"
        style="background-image: url(/images/client-login.jpg); background-position: 0% 60%;">
        <div class="absolute bg-black  opacity-25 inset-0 z-0"></div>
        <div class="w-full  lg:max-w-2xl md:max-w-md z-10 items-center text-center ">
          <div class=" font-bold leading-tight mb-6 mx-auto w-full content-center items-center ">
           <img src="/images/logo-white.svg" class="ml-3 w-auto lg:h-20 h-15 inline" />
          </div>
        </div>
      </div>
      <div
        class="md:flex md:items-center md:justify-left w-full sm:w-auto md:h-full xl:w-1/2 p-8 md:p-10 lg:p-14 sm:rounded-lg md:rounded-none ">
        <div class="max-w-xl w-full space-y-4">
          <div class="lg:text-left text-center">
            <h2 class="mt-6  font-bold text-gray-100">
              <img src="/images/logo.svg" class="h-10 w-auto inline" />
            </h2>
            <h2 class="mt-6 text-4xl md:text-6xl font-bold text-gray-100">
              <%= gettext("It's time to empower your presentations.") %>
            </h2>
            <p class="mt-10 text-2xl md:text-4xl text-gray-200"><%= gettext("Connect to your account") %></p>
          </div>
          <div class="flex flex-row justify-center items-center space-x-3"></div>

            <.form let={f} for={@conn} action={Routes.user_session_path(@conn, :create)} as={:user} class="mt-12 mb-4">
              <%= if @error_message do %>
                <ClaperWeb.Component.Alert.error message={@error_message} stick={true} />
              <% end %>
              <input type="hidden" name="remember" value="true">
              <ClaperWeb.Component.Input.email form={f} key={:email} labelClass="text-white sr-only" placeholder={gettext "Enter your address email..."} fieldClass="bg-gray-700 text-white" name={gettext "Email"} autofocus="true" required="true" />

              <div class="pt-5">
                <button type="submit" class="w-full flex justify-center text-white p-4 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline shadow-lg bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500">
                  <%= gettext "Send link by email" %>
                </button>
              </div>
            </.form>
        </div>
      </div>
    </div>
  </div>
</div>