<div class="container">
  <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
    <div class="col-10 col-sm-8 col-lg-6">

      <%= image_tag "tdd-logo.png", class: "d-block mx-lg-auto img-fluid", alt: "Bootstrap Themes", width: "500", height: "500", loading: "lazy" %>
    </div>
    <div class="col-lg-6">
      <h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">Taste the test-driven difference</h1>
      <p class="lead">Let's make learning RSpec deliciously fun with recipes for tasty food and confident code!</p>
      <div class="d-grid gap-2 d-md-flex justify-content-md-start">
        <%= link_to "Sign up", sign_up_path, class: "btn btn-primary btn-lg px-4 me-md-2" %>
        <%= link_to "Sign in", sign_in_path, class: "btn btn-outline-secondary btn-lg px-4" %>
      </div>
    </div>
  </div>
</div>
