openaustralia/planningalerts

<div class="max-w-lg mx-auto">
  <%= render Tailwind::Heading.new(tag: :h1, extra_classes: "mt-20 mb-12 text-center") do %>
    Sign in to Planning&nbsp;Alerts
  <% end %>
  <%= form_with model: resource, url: session_path(resource_name), builder: FormBuilders::Tailwind do |f| %>
    <%# TODO: Add error display and styling %>
    <div class="flex flex-col items-center">
      <div class="w-full">
        <%= f.label :email, "Your email", class: "mb-1 block" %>
        <%= f.email_field :email, class: "block mb-5 w-full", placeholder: "your@email.com", autofocus: true, autocomplete: "email", required: true %>
      </div>
      <div class="w-full">
        <%= f.label :password, class: "mb-1 block" %>
        <%= f.password_field :password, class: "block mb-2 w-full", placeholder: "••••••••", autocomplete: "current-password", required: true %>
        <%= link_to "Forgot your password?", new_password_path(resource_name), class: "text-xl text-navy font-light underline block mb-8" %>
      </div>
      <%= f.hidden_field :remember_me, value: true %>
      <%= f.button "Sign in" %>
    </div>
  <% end %>

  <hr class="mt-14 text-[#D2CFC1]">

  <div class="flex flex-col items-center mb-36">
    <%= render Tailwind::Heading.new(tag: :h2, font: "sans", extra_classes: "mt-20 text-center").with_content("New to Planning Alerts?") %>
    <p class="text-xl text-center text-navy">Get started here. It's easy.</p>

    <div class="my-12">
      <%= image_tag "tailwind/illustration/new-to-planning-alerts.svg", alt: "" %>
    </div>

    <%= render Tailwind::ButtonComponent.new(tag: :a, size: "xl", type: :primary, href: new_user_registration_path) do %>
      Create account
    <% end %>
  </div>
</div>