<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="/home.css" />
        <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon" />
        <script
            type="module"
            src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"
        ></script>
        <script
            nomodule
            src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"
        ></script>
        <link
            rel="stylesheet"
            type="text/css"
            href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
        />
        <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" /> -->
        <title>Início | Favela Connect</title>
    </head>

    <body>
        <header>
            <nav class="nav-header">
                <img
                    src="/img/logo-fundo-preto.svg"
                    alt="Logo"
                    class="logo-header"
                />

                <div class="nav-user">
                    <!-- Aqui exibirá o nome e foto do usuário. -->
                    <p>Lucas Ponciano</p>
                    <a href="#"
                        ><img src="/img/sem_foto.png" alt="Foto do Usuário"
                    /></a>
                </div>
            </nav>
        </header>

        <main>
            <section id="jobs-cta">
                <h1>Encontre o emprego que você <span>merece!</span></h1>
            </section>

            <section id="jobs">
                <h2>Vagas disponíveis</h2>

                <div class="jobs-cards-container">
                    <div class="jobs-cards">
                        <div class="card-header">
                            <ion-icon name="business-outline"></ion-icon>
                            <div class="job-position">
                                <h4>Auxiliar Administrativo</h4>
                                <p>BuzzFeed</p>
                            </div>
                        </div>
                        <p class="job-description">
                            Profissional dedicado e organizado para desempenhar
                            eficientemente as tarefas administrativas,
                            garantindo o suporte necessário para o bom
                            funcionamento das operações da empresa.
                        </p>
                        <hr />
                        <div class="job-apply">
                            <h5>R$1,850/Mês</h5>

                            <a href="#" class="apply-btn" role="button">
                                <span>Se candidatar</span></a
                            >
                        </div>
                    </div>
                    <div class="jobs-cards">
                        <div class="card-header">
                            <ion-icon name="cash-outline"></ion-icon>
                            <div class="job-position">
                                <h4>Vendedor Externo</h4>
                                <p>Renner</p>
                            </div>
                        </div>
                        <p class="job-description">
                            Profissional dinâmico e comunicativo, responsável
                            por expandir a clientela da empresa, mantendo
                            excelentes relações e atingindo metas de vendas.
                        </p>
                        <hr />
                        <div class="job-apply">
                            <h5>R$2,100/Mês</h5>

                            <a href="#" class="apply-btn" role="button">
                                <span>Se candidatar</span></a
                            >
                        </div>
                    </div>
                    <div class="jobs-cards">
                        <div class="card-header">
                            <ion-icon name="code-outline"></ion-icon>
                            <div class="job-position">
                                <h4>Engenheiro de Software Junior</h4>
                                <p>Raizen</p>
                            </div>
                        </div>
                        <p class="job-description">
                            Profissional detalhista e proativo, apto a
                            desenvolver e manter sistemas de software,
                            contribuindo para a inovação e eficiência
                            tecnológica da empresa.
                        </p>
                        <hr />
                        <div class="job-apply">
                            <h5>R$4,500/Mês</h5>

                            <a href="#" class="apply-btn" role="button">
                                <span>Se candidatar</span></a
                            >
                        </div>
                    </div>
                    <div class="jobs-cards">
                        <div class="card-header">
                            <ion-icon name="brush-outline"></ion-icon>
                            <div class="job-position">
                                <h4>Pintor (Construção Cívil)</h4>
                                <p>Lux Color</p>
                            </div>
                        </div>
                        <p class="job-description">
                            Profissional habilidoso e preciso, encarregado de
                            aplicar revestimentos e acabamentos em superfícies,
                            garantindo a estética e qualidade das construções.
                        </p>
                        <hr />
                        <div class="job-apply">
                            <h5>R$2,100/Mês</h5>

                            <a href="#" class="apply-btn" role="button">
                                <span>Se candidatar</span></a
                            >
                        </div>
                    </div>
                    <div class="jobs-cards">
                        <div class="card-header">
                            <ion-icon name="school-outline"></ion-icon>
                            <div class="job-position">
                                <h4>Professor de Inglês</h4>
                                <p>Fisk</p>
                            </div>
                        </div>
                        <p class="job-description">
                            Educador entusiasta e paciente, capacitado para
                            ensinar inglês de forma envolvente e eficaz,
                            promovendo o aprendizado e fluência dos alunos.
                        </p>
                        <hr />
                        <div class="job-apply">
                            <h5>R$2,500/Mês</h5>

                            <a href="#" class="apply-btn" role="button">
                                <span>Se candidatar</span></a
                            >
                        </div>
                    </div>
                    <div class="jobs-cards">
                        <div class="card-header">
                            <ion-icon name="car-outline"></ion-icon>
                            <div class="job-position">
                                <h4>Mecânico Automotivo</h4>
                                <p>Betão AutoCar</p>
                            </div>
                        </div>
                        <p class="job-description">
                            Profissional técnico e detalhista, especializado em
                            diagnosticar e reparar veículos, assegurando a
                            segurança e desempenho dos automóveis.
                        </p>
                        <hr />
                        <div class="job-apply">
                            <h5>R$4,300/Mês</h5>

                            <a href="#" class="apply-btn" role="button">
                                <span>Se candidatar</span></a
                            >
                        </div>
                    </div>
                </div>
            </section>
        </main>

        <footer>
            <div class="footer-end">
                &copy; Favela Connect. Todos os direitos reservados.
            </div>
        </footer>
    </body>

    <script
        type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/toastify-js"
    ></script>
</html>
