@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h2 class="display-4"><b>Legendary Guacamole</b></h1>
    <p>Your Real-Estates Company platform!</p>
</div>

<style>
  .card-container {
    display: flex;
  }
  .card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 2%;
    padding: 2%;
    border: 1px solid #ccc;
    text-align: center;
  }

  .recard-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .recard {
    flex: 0 0 calc(25% - 2rem);
    display: flex;
    flex-direction: column;
    margin: 2rem;
    padding: 1.8em;
    border: 1px solid #ccc;
    text-align: left;
  }
</style>

<div class="card-container">
  <div class="card">
    <h2>Great for Companies</h2>
    <br>
    <p>Real-Estate companies can quickly put and manage their sales</p>
  </div>
  <div class="card">
    <h2>Great for Users</h2>
    <br>
    <p>Clients can quickly and easily find their dream Real-Estates</p>
  </div>
  <div class="card">
    <h2>Quick and secure</h2>
    <br>
    <p>Plenty of options, all safely stored and ready for access!</p>
  </div>
</div>

<br>
<h2>Latest Real-Estates Available:</h2>
<div class="recard-container">

  <a asp-page="/Views/RealEstateProfile" asp-route-id=@Model.states[0].Id class="btn">
    <div class="recard">
      <h2>@Model.states[0].Name</h2>
      <p>@Model.states[0].Address</p>
      <p>R$: @Model.states[0].Price</p>
    </div>
  </a>

  <a asp-page="/Views/RealEstateProfile" asp-route-id=@Model.states[1].Id class="btn">
    <div class="recard">
      <h2>@Model.states[1].Name</h2>
      <p>@Model.states[1].Address</p>
      <p>R$: @Model.states[1].Price</p>
    </div>
  </a>

  <a asp-page="/Views/RealEstateProfile" asp-route-id=@Model.states[2].Id class="btn">
    <div class="recard">
      <h2>@Model.states[2].Name</h2>
      <p>@Model.states[2].Address</p>
      <p>R$: @Model.states[2].Price</p>
    </div>
  </a>
</div>

<footer class="border-top footer text-muted">
    <p></p>    
    <div class="container">
        &copy; <a asp-area="" asp-page="/About">About</a> this project</a>
    </div>
</footer>