<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>ContratandoGT</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap -->
  <link rel="stylesheet" href="css/bootstrap.min.css">

  <!-- Bootstrap iconos-->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

  
  <!-- css -->
  <link rel="stylesheet" href="css/style.css">
  
</head>

<body>

<!--  NAVBAR -->
  <nav class="navbar navbar-expand-lg bg-white shadow-sm">
  <div class="container">
    
  <!--  <a class="navbar-brand fw-bold" href="#">CONTRATANDOGT</a> -->

    <a class="navbar-brand logo" href="#">
        <img src="img/logo_1.png" alt="Logo">
    </a>

    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menu">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="menu">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item"><a class="nav-link active" href="index.html">Inicio</a></li>
        <li class="nav-item"><a class="nav-link" href="empleo.html">Empleos</a></li>
        <li class="nav-item"><a class="nav-link" href="empresa.html">Empresas</a></li>
        <li class="nav-item"><a class="nav-link" href="recursos.html">Recursos</a></li>
      </ul>

    <!--  <a href="#" class="btn btn-outline-primary me-2">Login</a>   -->
    <!--  <a href="#" class="btn btn-primary">Registrarse</a>   -->

        <button type="button" class="btn btn-outline-primary me-2" data-bs-toggle="modal" data-bs-target="#loginModal">
            Login
        </button>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#registroModal">
            Registrarse
        </button>

    </div>
  </div>
</nav>

<!--  HERO -->
<section class="hero hero-home">
    
  <div class="container">
    
    <h1 class="fw-bold">
      Encuentra el trabajo <span class="text-primary">que mereces</span>
    </h1>
    <p class="text-muted">Más de 10,000 oportunidades en tu ciudad y remoto</p>

    <div class="search-box mt-4">
      <div class="row g-2">
        <div class="col-md-5">
          <div class="input-group">
            <span class="input-group-text"><i class="bi bi-search"></i></span>
            <input type="text" class="form-control" placeholder="Puesto o palabra clave">
          </div>
        </div>
        <div class="col-md-4">
          <div class="input-group">
            <span class="input-group-text"><i class="bi bi-geo-alt"></i></span>
            <input type="text" class="form-control" placeholder="Ubicación">
          </div>  
        </div>
        <div class="col-md-3">
          <button class="btn btn-primary w-100">Buscar</button>
        </div>
      </div>
    </div>
  </div>
</section>

<!--  EMPLEOS -->
<section class="section">
  <div class="container">
    <h4 class="mb-4">Empleos destacados</h4>

    <div class="row">
      <div class="col-md-4">
        <div class="card card-job p-3">
          <h5>Frontend Developer</h5>
          <p class="text-muted">Empresa X</p>
          <p>Q1200 - Q1600 / mes</p>
          <button class="btn btn-primary">Aplicar</button>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card card-job p-3">
          <h5>Diseñador UI</h5>
          <p class="text-muted">Empresa Y</p>
          <p>Remoto</p>
          <button class="btn btn-primary">Aplicar</button>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card card-job p-3">
          <h5>Soporte IT</h5>
          <p class="text-muted">Empresa Z</p>
          <p>Tiempo completo</p>
          <button class="btn btn-primary">Aplicar</button>
        </div>
      </div>
    </div>
  </div>
</section>

<!--  BENEFICIOS -->
<section class="section bg-white">
  <div class="container">
    <div class="row align-items-center">

      <div class="col-md-6">
        <h4>¿Por qué usar nuestra plataforma?</h4>
        <ul class="mt-3">
          <li>Miles de ofertas actualizadas diariamente</li>
          <li>Filtros inteligentes</li>
          <li>Aplicación rápida</li>
          <li>Empresas verificadas</li>
        </ul>
      </div>

      <div class="col-md-6">
        <img src="img/mujer-trabajando.png" class="img-fluid rounded">
      </div>

    </div>
  </div>
</section>


<!--  PARA EMPRESAS -->
<section class="section">
<div class="container mt-5">
  <div class="row">
    
    <div class="col-md-4">
      <div class="card h-100 p-4 border-light shadow-sm">
        <h4 class="fw-bold mb-3">Para empresas</h4>
        <p class="text-muted">Publica vacantes y encuentra talento rápidamente</p>
        <div class="mt-auto">
          <button class="btn btn-primary w-100 py-2 fw-bold">Publicar empleo</button>
        </div>
      </div>
    </div>

    <!-- CATEGORIAS -->
    <div class="col-md-8">
      
      <div class="card p-4 border-light shadow-sm mb-4">
        <h4 class="fw-bold mb-3">Categorías populares</h4>
        <div class="d-flex flex-wrap gap-2">
          <button class="btn btn-outline-primary px-4">Tecnología</button>
          <button class="btn btn-outline-secondary px-4 text-dark">Marketing</button>
          <button class="btn btn-outline-secondary px-4 text-dark">Ventas</button>
          <button class="btn btn-outline-secondary px-4 text-dark">Diseño</button>
          <button class="btn btn-outline-secondary px-4 text-dark">Administración</button>
        </div>
      </div>

      <!-- TESTIMONIOS -->
      <div>
        <h4 class="fw-bold mb-3"><i class="bi bi-chat-square-quote-fill me-2"></i>Testimonios</h4>
        
        <div class="card p-3 mb-3 border-light shadow-sm d-flex flex-row align-items-center">
          <img src="img/persona1.jpg" width="77" height="70" class="rounded-circle me-3" alt="Juan">
          <span>“Encontré trabajo en 2 semanas” — <strong>Juan Pérez</strong></span>
        </div>

        <div class="card p-3 border-light shadow-sm d-flex flex-row align-items-center">
          <img src="img/persona2.jpg" width="77" height="70" class="rounded-circle me-3" alt="María">
          <span>“Excelente plataforma” — <strong>María López</strong></span>
        </div>
      </div>

    </div> </div> </div></section>

    <!--  NEWSLETTER -->
<section class="bg-white section text-center">
  <div class="container">
    <h4>Recibe alertas de empleo</h4>

    <div class="row justify-content-center mt-3">
      <div class="col-md-6">
        <div class="input-group">
          <input type="email" class="form-control" placeholder="Tu correo aquí">
          <button class="btn btn-primary">Suscribirme</button>
        </div>
      </div>
    </div>
  </div>
</section>

<footer class=" pt-5 pb-3 border-top">
  <div class="container text-center">

    
    <hr>

    <!-- Links -->
    <div class="d-flex justify-content-center gap-4 mb-3">
      <a href="nosotros.html" class="text-muted text-decoration-none">Sobre nosotros</a>
      <a href="contacto.html" class="text-muted text-decoration-none">Contacto</a>
      <a href="terminos.html" class="text-muted text-decoration-none">Términos</a>
      <a href="#" class="text-muted text-decoration-none">Redes</a>
    </div>

    <!-- Redes sociales -->
    <div class="d-flex justify-content-center gap-3 mb-2">
      <a href="#" class="text-dark fs-5">
        <i class="bi bi-facebook"></i>
      </a>
      <a href="#" class="text-dark fs-5">
        <i class="bi bi-twitter"></i>
      </a>
      <a href="#" class="text-dark fs-5">
        <i class="bi bi-linkedin"></i>
      </a>
    </div>

    <!-- Copyright -->
    <p class="text-muted small mt-2 mb-0">
      © 2026 CONTRATANDOGT
    </p>

  </div>
</footer>
<script src="js/bootstrap.bundle.min.js"></script>

<script src="js/auth.js"></script>


<div class="modal fade" id="loginModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg" style="border-radius: 20px;">
      <div class="modal-body p-5">
        <div class="text-center mb-4">
          <h3 class="fw-bold">Bienvenido de nuevo</h3>
          <p class="text-muted">Accede a las mejores ofertas</p>
        </div>
        
        <button class="btn btn-outline-dark w-100 mb-3 d-flex align-items-center justify-content-center py-2">
          <img src="img/logo_google.png" style="width: 18px;" class="me-2">
          Continuar con Google
        </button>

        <div class="text-center my-3 text-muted small">o con tu correo</div>

        <form id="formLogin">
          <div class="mb-3">
            <input type="email" class="form-control py-2" placeholder="Correo electrónico">
          </div>
          <div class="mb-3">
            <input type="password" class="form-control py-2" placeholder="Contraseña">
          </div>
          <button type="submit" class="btn btn-primary w-100 py-2 fw-bold shadow-sm">Entrar</button>
        </form>

        
        <div class="text-center mt-4">
          <p class="text-muted small mb-0">¿No tienes cuenta? 
            <a href="#" class="text-primary text-decoration-none fw-bold" data-bs-target="#registroModal" data-bs-toggle="modal">Regístrate</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="registroModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg" style="border-radius: 20px;">
      <div class="modal-body p-5">
        <div class="text-center mb-4">
          <h3 class="fw-bold">Crear cuenta</h3>
          <p class="text-muted">Empieza a postular hoy mismo</p>
        </div>

        <form>
          <div class="mb-3">
            <input type="text" class="form-control py-2" placeholder="Nombre completo">
          </div>
          <div class="mb-3">
            <input type="text" class="form-control py-2" placeholder="Apellidos completos">
          </div>
          <div class="mb-3">
            <input type="email" class="form-control py-2" placeholder="Correo electrónico">
          </div>
          <div class="mb-3">
            <input type="password" class="form-control py-2" placeholder="Crear contraseña">
          </div>
          <div class="mb-3">
            <select class="form-select py-2" aria-label="Puesto deseado">
              <option selected disabled>Puesto deseado</option>
                <optgroup label="Tecnología">
                    <option value="Frontend Developer">Frontend Developer</option>
                    <option value="Backend Developer">Backend Developer</option>
                    <option value="Fullstack Developer">Fullstack Developer</option>
                    <option value="Soporte Técnico / IT">Soporte Técnico / IT</option>
                    <option value="Analista de Datos">Analista de Datos</option>
                </optgroup>
                <optgroup label="Administración y Ventas">
                    <option value="Administrador de Empresas">Administrador de Empresas</option>
                    <option value="Asistente Administrativo">Asistente Administrativo</option>
                    <option value="Vendedor / Ejecutivo de Ventas">Vendedor / Ejecutivo de Ventas</option>
                    <option value="Servicio al Cliente">Servicio al Cliente</option>
                </optgroup>
                <optgroup label="Salud y Otros">
                    <option value="Enfermería">Enfermería</option>
                    <option value="Farmacéutico">Farmacéutico</option>
                    <option value="Perito Mecánico">Perito Mecánico</option>
                    <option value="Diseñador Gráfico / UI">Diseñador Gráfico / UI</option>
                </optgroup>
            </select>
          </div>
          <div class="mb-3">
            <select class="form-select py-2" aria-label="Selecciona tu departamento">
              <option selected disabled>Selecciona tu departamento</option>
              <option value="Alta Verapaz">Alta Verapaz</option>
              <option value="Baja Verapaz">Baja Verapaz</option>
              <option value="Chimaltenango">Chimaltenango</option>
              <option value="Chiquimula">Chiquimula</option>
              <option value="El Progreso">El Progreso</option>
              <option value="Escuintla">Escuintla</option>
              <option value="Guatemala">Guatemala</option>
              <option value="Huehuetenango">Huehuetenango</option>
              <option value="Izabal">Izabal</option>
              <option value="Jalapa">Jalapa</option>
              <option value="Jutiapa">Jutiapa</option>
              <option value="Petén">Petén</option>
              <option value="Quetzaltenango">Quetzaltenango</option>
              <option value="Quiché">Quiché</option>
              <option value="Retalhuleu">Retalhuleu</option>
              <option value="Sacatepéquez">Sacatepéquez</option>
              <option value="San Marcos">San Marcos</option>
              <option value="Santa Rosa">Santa Rosa</option>
              <option value="Sololá">Sololá</option>
              <option value="Suchitepéquez">Suchitepéquez</option>
              <option value="Totonicapán">Totonicapán</option>
              <option value="Zacapa">Zacapa</option>
            </select>
          </div>

          <div class="mb-3">
              <label class="form-label text-muted small">¿Cómo quieres usar la plataforma?</label>
                  <div class="d-flex gap-3">
                      <div class="form-check">
                        <input class="form-check-input" type="radio" name="tipo" id="tipoPostulante" value="1" checked>
                        <label class="form-check-label" for="tipoPostulante">
                        <i class="bi bi-person me-1"></i>Busco empleo
              </label>
          </div>
          <div class="form-check">
                <input class="form-check-input" type="radio" name="tipo" id="tipoEmpresa" value="2">
              <label class="form-check-label" for="tipoEmpresa">
                  <i class="bi bi-building me-1"></i>Publico empleos
              </label>
           </div>
            </div>
          </div>
        

          <button type="submit" class="btn btn-primary w-100 py-2 fw-bold shadow-sm">Crear Cuenta</button>
        </form>

        <p class="text-center text-muted small mt-4">
          Al registrarte, aceptas nuestros términos y condiciones.
        </p>
      </div>
    </div>
  </div>
</div>



</body>
</html>