<!DOCTYPE html>
<html lang="PT-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sócio 5 estrelas - Cruzeiro </title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="shortcut icon" href="/img/Escudo9.png">
</head>

<body id="sobe">
    <header class="faixa">
        <img src="/img/Escudo9.png" alt="Imagem do escudo do Cruzeiro" width="80px">
        <ul>
            <li><a href="#sobe">Home</a></li>
            <li><a href="/criar">Cadastro</a></li>
        </ul>
    </header>
    <main>
        <article>
            <h1>Um novo Cruzeiro está surgindo</h1>
            <p>Faça parte da recontruçao do cabuloso, nos ajude dando sugestões
                de novos planos de sócios torcedores pro clube, ou você pode modificar os já existentes, você pode inserir
                um nome, beneficios e o valor pra esse novo sócio.
            </p>
        </article>
        <article class="conteudoJs">
            <section id='cards'>

                <h2>Planos</h2>

                <% socios.forEach(item => { %>
                    <div class="card">
                        <a href="/socios/<%=item.id%>">Clique para saber mais</a>
                        <h1>
                            <%= item.nome %>
                        </h1>
                        
                        <p class="preco">Preço: <%= item.preco %>
                        </p>
                        <a id="editar" href="/editar/<%= item.id %>">Editar</a>
                    </div>
                    <% }) %>
            </section>
        </article>
    </main>
    <footer class="faixa">
        <p>Desenvolvido por @eucaiosilvawebs</p>
    </footer>
</body>

</html>