valeainversionesca/contacto.html

<!doctype html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="theme-color" content="#1F4E79" />
  <meta name="description" content="Contáctenos para solicitar información sobre nuestros servicios de ingeniería industrial y mantenimiento." />
  <title>Contacto - VALEA Inversiones</title>
  <link rel="icon" type="image/svg+xml" href="assets/favicon.svg" />
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
  <nav class="nav">
    <div class="container nav-inner">
      <a href="index.html" class="nav-logo"><img src="https://horizons-cdn.hostinger.com/f282ce11-7db1-4077-b550-1caec7979db1/37ca80aa9cc5a842ca701b01a0ba6065.png" alt="VALEA Inversiones Logo" /></a>
      <div class="nav-desktop">
        <a href="index.html" class="nav-link" data-nav="index.html">Inicio</a>
        <a href="servicios.html" class="nav-link" data-nav="servicios.html">Servicios</a>
        <a href="acerca-de.html" class="nav-link" data-nav="acerca-de.html">Acerca de</a>
        <a href="proyectos.html" class="nav-link" data-nav="proyectos.html">Proyectos</a>
        <a href="contacto.html" class="nav-link" data-nav="contacto.html">Contacto</a>
        <a href="contacto.html" class="btn btn-cta btn-rounded-full nav-cta">Solicitar Cotización</a>
      </div>
      <button class="nav-toggle" aria-label="Menú"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>
    </div>
    <div class="nav-mobile">
      <div class="nav-mobile-inner">
        <a href="index.html" class="nav-mobile-link" data-nav="index.html">Inicio</a>
        <a href="servicios.html" class="nav-mobile-link" data-nav="servicios.html">Servicios</a>
        <a href="acerca-de.html" class="nav-mobile-link" data-nav="acerca-de.html">Acerca de</a>
        <a href="proyectos.html" class="nav-mobile-link" data-nav="proyectos.html">Proyectos</a>
        <a href="contacto.html" class="nav-mobile-link" data-nav="contacto.html">Contacto</a>
        <a href="contacto.html" class="nav-mobile-cta">Solicitar Cotización</a>
      </div>
    </div>
  </nav>

  <main class="pt-20" style="background:var(--blanco)">
    <section class="page-hero">
      <div class="page-hero-bg"><img src="https://images.unsplash.com/photo-1579719558505-ad4a5fee0847" alt="Contact" /><div class="page-hero-overlay"></div></div>
      <div class="container page-hero-content reveal">
        <h1><span>Contáctenos</span></h1>
        <p>Estamos aquí para responder sus consultas y ayudarle con sus proyectos</p>
      </div>
    </section>

    <section class="section section-light">
      <div class="container">
        <!-- Contact info cards -->
        <div class="grid grid-4" style="margin-bottom:4rem">
          <div class="contact-info-card reveal"><div class="contact-info-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg></div><h3>Email</h3><p><a href="mailto:valeainversiones@gmail.com">valeainversiones@gmail.com</a></p></div>
          <div class="contact-info-card reveal reveal-delay-1"><div class="contact-info-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg></div><h3>Teléfono</h3><p>Dayana Velásquez: 0414-7748343</p></div>
          <div class="contact-info-card reveal reveal-delay-2"><div class="contact-info-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg></div><h3>Ubicación</h3><p>Barcelona</p><p>Estado Anzoátegui</p><p>Venezuela</p></div>
          <div class="contact-info-card reveal reveal-delay-3"><div class="contact-info-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></div><h3>Horario</h3><p>Lunes - Viernes: 8:00 AM - 5:00 PM</p><p>Sábado: 8:00 AM - 12:00 PM</p></div>
        </div>

        <!-- Form -->
        <div style="max-width:48rem;margin:0 auto">
          <div class="section-head reveal" style="margin-bottom:2rem">
            <h2>Envíenos un Mensaje</h2>
            <p>Complete el formulario y nos pondremos en contacto con usted</p>
          </div>
          <form id="contact-form" class="form reveal" novalidate>
            <div class="form-grid">
              <div class="form-group" style="margin-bottom:0">
                <label class="form-label" for="nombre">Nombre <span class="req">*</span></label>
                <input class="form-input" type="text" id="nombre" name="nombre" placeholder="Su nombre completo" />
                <p class="form-error" data-error="nombre"></p>
              </div>
              <div class="form-group" style="margin-bottom:0">
                <label class="form-label" for="email">Email <span class="req">*</span></label>
                <input class="form-input" type="email" id="email" name="email" placeholder="correo@ejemplo.com" />
                <p class="form-error" data-error="email"></p>
              </div>
              <div class="form-group" style="margin-bottom:0">
                <label class="form-label" for="telefono">Teléfono <span class="req">*</span></label>
                <input class="form-input" type="tel" id="telefono" name="telefono" placeholder="0414-1234567" />
                <p class="form-error" data-error="telefono"></p>
              </div>
              <div class="form-group" style="margin-bottom:0">
                <label class="form-label" for="empresa">Empresa <span class="opt">(Opcional)</span></label>
                <input class="form-input" type="text" id="empresa" name="empresa" placeholder="Nombre de su empresa" />
                <p class="form-error" data-error="empresa"></p>
              </div>
            </div>
            <div class="form-group">
              <label class="form-label" for="asunto">Asunto <span class="req">*</span></label>
              <input class="form-input" type="text" id="asunto" name="asunto" placeholder="Asunto de su consulta" />
              <p class="form-error" data-error="asunto"></p>
            </div>
            <div class="form-group">
              <label class="form-label" for="mensaje">Mensaje <span class="req">*</span></label>
              <textarea class="form-textarea" id="mensaje" name="mensaje" rows="6" placeholder="Escriba su mensaje aquí..."></textarea>
              <p class="form-error" data-error="mensaje"></p>
            </div>
            <button type="submit" class="btn btn-cta btn-lg btn-block btn-shadow">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:.5rem"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
              Enviar Mensaje
            </button>
            <p style="margin-top:1rem;font-size:.8rem;color:var(--grisMedio);text-align:center">Al enviar, se abrirá su cliente de correo con los datos rellenos hacia valeainversiones@gmail.com.</p>
          </form>
        </div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="container">
      <div class="footer-grid">
        <div><h3>VALEA Inversiones</h3><p>Soluciones Integrales en Ingeniería Industrial y Mantenimiento</p></div>
        <div><h4>Enlaces Rápidos</h4><nav class="footer-links"><a href="index.html">Inicio</a><a href="servicios.html">Servicios</a><a href="acerca-de.html">Acerca de</a><a href="proyectos.html">Proyectos</a><a href="contacto.html">Contacto</a></nav></div>
        <div><h4>Contacto</h4><div class="footer-contact">
          <div class="footer-contact-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg><a href="mailto:valeainversiones@gmail.com">valeainversiones@gmail.com</a></div>
          <div class="footer-contact-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg><span>0414-7748343</span></div>
          <div class="footer-contact-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg><span>Barcelona, Estado Anzoátegui, Venezuela</span></div>
        </div></div>
      </div>
      <div class="footer-bottom">© <span id="year"></span> VALEA Inversiones. Todos los derechos reservados.</div>
    </div>
  </footer>

  <div class="toast-viewport"></div>
  <script>document.getElementById('year').textContent = new Date().getFullYear();</script>
  <script src="js/main.js"></script>
</body>
</html>