<!DOCTYPE html>
<html lang="es" class="position-relative">
  <head>
    <%- include('partials/head.ejs') %>
  </head>

  <body>
    <%- include('partials/header.ejs') %>

    <!-- Mensaje de feedback -->
    <%- include('components/alerts.ejs') %>

    <!-- BANNER -->
    <section>
      <div class="position-relative opacity-75">
        <img
          class="img-fluid"
          src="img/fondo-banner.jpg"
          alt="Manos tecleando"
          style="height: 40rem; width: 100%"
        />
        <h5
          class="position-absolute top-50 start-50 translate-middle text-center texto-banner display-3 fw-bold"
        >
          FORMULARIOS WEB
        </h5>
      </div>
    </section>

    <!-- CREAR FORMULARIO -->
    <section class="container my-5">
      <div class="d-flex align-items-center">
        <div class="text-center">
          <img
            src="img/fondo-mascara.jpg"
            class="img-fluid rounded-circle w-75"
            alt="..."
          />
        </div>
        <div class="flex-grow-1 ms-5 text-center">
          <div class="display-5 mb-3">
            Lúcete y crea FORMULARIOS impactantes...
          </div>
          <a href="/forms" id="boton-form" class="btn btn-crear">CREAR</a>
        </div>
      </div>
    </section>

    <div class="py-3 barra-separacion"></div>

    <!-- CÍRCULOS -->
      <section class="my-4 text-center">
        <div class="row d-flex justify-content-evenly">
        <div class="col-lg-4">
          <div class="bg-secondary rounded-circle mx-auto p-4" style="width: 100px; height: 100px;">
            <i class="bi bi-hand-index fs-1 text-white"></i>
          </div>
          <h4 class="font-weight-bold text-center mt-3">Accesible</h4>
        </div>

        <div class="col-lg-4 mx-auto">
          <div class="bg-secondary rounded-circle mx-auto p-4" style="width: 100px; height: 100px;">
            <i class="bi bi-share fs-1 text-white"></i>
          </div>
          <h4 class="font-weight-bold text-center mt-3">Dinámico</h4>
        </div>

        <div class="col-lg-4 mx-auto">
          <div class="bg-secondary rounded-circle mx-auto p-4" style="width: 100px; height: 100px;">
            <i class="bi bi-lock fs-1 text-white"></i>
          </div>
          <h4 class="font-weight-bold text-center mt-3">Seguro</h4>
        </div>
     </section>

    <div class="py-3 barra-separacion"></div>

    <!-- TEAM -->
    <div class="background-color mb-4">
      <h1 class="pt-5 d-flex justify-content-center title-team-color">
        Equipo de Desarrollo
      </h1>
      <div
        class="row row-cols-1 row-cols-md-5 g-3 py-5 d-flex justify-content-center"
      >
        <% members.forEach((member, i) => { %>
          <div class="col" style="width: 350px;">
              <a href="https://github.com/<%= member.github %>" target="_blank">
              <div class="card border-white bg-transparent">
                <img
                  src="<%= member.image %>"
                  class="card-img-top"
                  alt="<%= member.name %>"
                />
                <div class="card-body">
                  <h5 class="card-title"><%= member.name %></h5>
                </div>
              </div>
            </a>
          </div>
        <% }) %>
      </div>
    </div>

    <%- include('partials/footer.ejs') %>
  </body>
</html>
