<!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="/style.css" />
  <script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
  <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
  <title>Favela Connect | Criando Conexões!</title>
</head>

<body>
  <header>
    <nav class="navbar">
      <a href="#">
        <img src="/img/logo-fundo-preto.svg" alt="Logo" class="logo">
      </a>
      <ul class="menu-links">
        <li><a href="#">Início</a></li>
        <li><a href="#quemSomos">Quem Somos</a></li>
        <li><a href="#empregos">Vagas</a></li>
        <li><a href="#empresas">Empresas</a></li>
        <li class="join-btn"><a href="/login">Acessar</a></li>
        <span id="close-menu-btn" class="material-symbols-outlined">close</span>
      </ul>
      <span id="hamburger-btn" class="material-symbols-outlined">menu</span>
    </nav>
  </header>

  <main>
    <section class="hero-section">
      <div class="hero-container">
        <div class="hero-content">
          <h1>Encontre o <span class="text-span">emprego</span> que você merece!</h1>
          <form action="#" class="search-form">
            <input type="text" placeholder="Pesquise por algum trabalho..." required>
            <button class="material-symbols-outlined" type="sumbit">search</button>
          </form>
          <div class="popular-tags">
            Popular:
            <ul class="tags">
              <li><a href="#">Webite Design</a></li>
              <li><a href="#">Logo Design</a></li>
              <li><a href="#">WordPress</a></li>
              <li><a href="#">AI Design</a></li>
            </ul>
          </div>
        </div>
        <img src="/img/team.svg" alt="" class="hero-image">
      </div>
    </section>

    <section id="quemSomos">
      <div class="quemSomos-img">
        <img src="/img/about-us.svg">
      </div>
      <div class="quemSomos-text-container">
        <div class="quemSomos-text">
          <h2>Quem somos nós?</h2>
          <p>Na Favela Connect, acreditamos na força da comunidade. Nascemos para conectar pessoas em situação de
            vulnerabilidade social a oportunidades de emprego, promovendo crescimento e transformação.</p>
          <hr>
        </div>
        <div class="quemSomos-text">
          <h2>Como podemos te ajudar?</h2>
          <p>Estamos aqui para ser a ponte que une talentos às oportunidades. Se você busca empoderamento através do
            trabalho, junte-se a nós no caminho para um futuro mais inclusivo e promissor</p>
        </div>
      </div>
    </section>

    <section id="empregos">
      <div class="empregos-container">
        <h2 class="section-heading">Ache um <span class="text-span">emprego</span> na sua área</h2>

        <div class="cards-container">
          <div class="card-areas">
            <box-icon type='logo' name='dev-to' size='lg' color="white"></box-icon>
            <p>Tecnologia</p>
          </div>
          <div class="card-areas">
            <box-icon type='solid' name='wallet' size='lg' color="white"></box-icon>
            <p>Vendas</p>
          </div>
          <div class="card-areas">
            <box-icon name='buildings' type='solid' size='lg' color="white"></box-icon>
            <p>Administrativo</p>
          </div>
          <div class="card-areas">
            <box-icon name='health' size='lg' color="white"></box-icon>
            <p>Saúde</p>
          </div>
          <div class="card-areas">
            <box-icon type='solid' name='group' size='lg' color="white"></box-icon>
            <p>RH</p>
          </div>
          <div class="card-areas">
            <box-icon type='solid' name='dish' size='lg' color="white"></box-icon>
            <p>Cozinha</p>
          </div>
          <div class="card-areas">
            <box-icon name='book-bookmark' size='lg' color="white"></box-icon>
            <p>Educação</p>
          </div>
          <div class="card-areas">
            <box-icon name='handicap' size='lg' color="white"></box-icon>
            <p>PCD</p>
          </div>
        </div>
        <a href="#" class="botao-areas" role="button">
          <span>Ver todas as vagas</span></a>
      </div>
    </section>

    <section id="empresas">
      <h2 class="section-heading">Empresas que nos <span class="text-span">apoiam</span></h2>

      <div class="logos">
        <div class="logos-slide">
          <img src="/img/3m2.svg" />
          <img src="/img/barstool-store2.svg" />
          <img src="/img/budweiser2.svg" />
          <img src="/img/buzzfeed2.svg" />
          <img src="/img/forbes2.svg" />
          <img src="/img/macys2.svg" />
          <img src="/img/menshealth2.svg" />
          <img src="/img/mrbeast2.svg" />
        </div>
      </div>
    </section>

    <section id="depoimentos">
      <h2 class="section-heading">Depoimentos</h2>

      <swiper-container class="mySwiper" navigation="true">
        <swiper-slide>
          <img src="/img/foto-fabio.jpg" alt="">

          <div class="bio-depoimento">
            <h3>Fábio Martins</h3>
            <p>CEO na NexusEdge</p>
          </div>

          <p>O projeto <em>Favela Connect</em> me ajudou a encontrar o funcionário certo para minha empresa. Foi muito
            satisfatório! É o início de uma parceria de sucesso.</p>
        </swiper-slide>
        <swiper-slide>
          <img src="/img/foto-guilherme.jpg" alt="">

          <div class="bio-depoimento">
            <h3>Guilherme Antônio</h3>
            <p>Social Media<br> na TRW Propaganda</p>
          </div>

          <p>Eu gostaria de agradecer muito ao <em>Favela Connect</em> por me ajudar a encontrar um emprego home office,
            onde posso ficar perto dos meus filhos.</p>
        </swiper-slide>
        <swiper-slide>
          <img src="/img/foto-luciana.jpg" alt="">

          <div class="bio-depoimento">
            <h3>Luciana Santos</h3>
            <p>Analista de Marketing<br> na Agência Script</p>
          </div>

          <p>Eu estava desempregada a vários meses e já estava entrando em desespero. Porém o <em>Favela Connect</em> me
            ajudou a conseguir o tão sonhado emprego e uma excelente empresa.</p>
        </swiper-slide>
      </swiper-container>
    </section>
  </main>

  <footer class="footer">
    <div class="footer-logos">
      <img src="/img/LogoMais1Code.png" class="logoMais1code-footer" alt="">
      <img src="/img/logo-fundo-preto.svg" class="logoFavela-footer" alt="">
    </div>

    <div class="footer-box">
      <h3>Institucional</h3>
      <a href="#quemSomos">Quem Somos</a>
      <a href="#empregos">Vagas</a>
      <a href="#empresas">Empresas</a>
      <a href="#">Acessar</a>
    </div>

    <div class="footer-box-social">
      <h3>Social</h3>

      <a href="https://www.facebook.com/?locale=pt_BR" target="_blank"> <box-icon type='logo' name='meta' size="md"
          color="white"></box-icon></a>
      <a href="https://www.instagram.com/" target="_blank"><box-icon name='instagram' type='logo' size="md"
          color="white"></box-icon></a>
      <a href="https://www.linkedin.com/home" target="_blank"><box-icon name='linkedin' type='logo' size="md"
          color="white"></box-icon></a>

    </div>
  </footer>

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

  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
  <script src="main.js"></script>

</body>

</html>