498 lines
26 KiB
HTML
498 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description"
|
||
content="Contacta a VettaIO. Transformamos tus desafíos tecnológicos en soluciones reales. Email, teléfono y formulario de contacto.">
|
||
<title>Contacto | VettaIO</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800;900&display=swap"
|
||
rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||
<!-- Google reCAPTCHA -->
|
||
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- Particle Network Canvas -->
|
||
<canvas id="particleCanvas"></canvas>
|
||
|
||
<!-- Navigation -->
|
||
<nav class="navbar">
|
||
<div class="nav-container">
|
||
<a href="index.html" class="logo">
|
||
<img src="img/logovertical.png" alt="VettaIO">
|
||
</a>
|
||
|
||
<div class="nav-links" id="navLinks">
|
||
<a href="index.html" class="nav-link">Inicio</a>
|
||
|
||
<div class="nav-item">
|
||
<div class="nav-link-group">
|
||
<a href="javascript:void(0)" class="nav-link" role="button">Divisiones</a>
|
||
<button class="dropdown-toggle" aria-label="Abrir submenu" aria-expanded="false">
|
||
<svg class="dropdown-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="dropdown">
|
||
<a href="vettacore.html" class="dropdown-link">
|
||
<span class="dd-dot dd-dot--core"></span>VettaCore
|
||
</a>
|
||
<a href="vettaflex.html" class="dropdown-link">
|
||
<span class="dd-dot dd-dot--flex"></span>VettaFlex
|
||
</a>
|
||
<a href="vettamind.html" class="dropdown-link">
|
||
<span class="dd-dot dd-dot--mind"></span>VettaMind
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="contacto.html" class="nav-link active">Contacto</a>
|
||
</div>
|
||
|
||
<button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Abrir menú">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero -->
|
||
<section class="contact-page-hero">
|
||
<div class="container">
|
||
<div class="contact-page-badge" style="margin-top: 15px;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
|
||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
||
</svg>
|
||
Hablemos
|
||
</div>
|
||
<h1 class="section-title">¿Cómo podemos <span class="text-gradient">ayudarte?</span></h1>
|
||
<p class="section-subtitle">
|
||
Estamos listos para escuchar tus desafíos tecnológicos y transformarlos en soluciones concretas.
|
||
Respondemos en menos de 24 horas.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Info Cards -->
|
||
<section style="padding: 2rem 0 0; position: relative; z-index: 10;">
|
||
<div class="container">
|
||
<div class="contact-info-grid">
|
||
<div class="contact-info-card">
|
||
<div class="card-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" 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>
|
||
<a href="mailto:info@vettaio.com">info@vettaio.com</a>
|
||
</div>
|
||
|
||
<div class="contact-info-card">
|
||
<div class="card-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" 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.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.4 2 2 0 0 1 3.6 1.22h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 8.81a16 16 0 0 0 6 6l.86-.86a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 21.5 16z"></path>
|
||
</svg>
|
||
</div>
|
||
<h3>Teléfono</h3>
|
||
<a href="tel:+5438846465589">+54 388 584-2292</a>
|
||
</div>
|
||
|
||
<div class="contact-info-card">
|
||
<div class="card-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" 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>Argentina</p>
|
||
</div>
|
||
|
||
<div class="contact-info-card">
|
||
<div class="card-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" 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>Lun–Vie, 9:00–21:00 ARG</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Main: Form + Sidebar -->
|
||
<section style="padding: 2rem 0 6rem; position: relative; z-index: 10;">
|
||
<div class="container">
|
||
<div class="contact-main-grid">
|
||
|
||
<!-- FORMULARIO CON RECAPTCHA -->
|
||
<div class="contact-big-form-container">
|
||
<h2>Envíanos un <span class="text-gradient">mensaje</span></h2>
|
||
<p>Completá el formulario y nos ponemos en contacto a la brevedad.</p>
|
||
|
||
<!-- Contenedor de mensajes -->
|
||
<div id="formMessages" style="display: none;"></div>
|
||
|
||
<form id="contactForm" method="POST" action="enviar_contacto.php">
|
||
<!-- Row 1 -->
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="nombre">Nombre *</label>
|
||
<input type="text" id="nombre" name="nombre" placeholder="Tu nombre completo" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="empresa">Empresa</label>
|
||
<input type="text" id="empresa" name="empresa" placeholder="Nombre de tu empresa">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Row 2 -->
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="email">Email *</label>
|
||
<input type="email" id="email" name="email" placeholder="tu@email.com" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="telefono">Teléfono</label>
|
||
<input type="tel" id="telefono" name="telefono" placeholder="+54 xxx xxx-xxxx">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Division & Type Row -->
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="division">División de Interés *</label>
|
||
<select id="division" name="division" required>
|
||
<option value="">Selecciona una opción</option>
|
||
<option value="VettaCore — Infraestructura">VettaCore — Infraestructura</option>
|
||
<option value="VettaFlex — Automatización">VettaFlex — Automatización</option>
|
||
<option value="VettaMind — Inteligencia Artificial">VettaMind — Inteligencia Artificial</option>
|
||
<option value="Desarrollo a Medida">Desarrollo a Medida</option>
|
||
<option value="Soluciones IoT">Soluciones IoT</option>
|
||
<option value="Consulta General">Consulta General</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="tipo">Tipo de consulta</label>
|
||
<select id="tipo" name="tipo">
|
||
<option value="">Selecciona una opción</option>
|
||
<option value="Nuevo proyecto">Nuevo proyecto</option>
|
||
<option value="Consultoría">Consultoría</option>
|
||
<option value="Soporte técnico">Soporte técnico</option>
|
||
<option value="Partnership">Partnership</option>
|
||
<option value="Otro">Otro</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mensaje -->
|
||
<div class="form-group">
|
||
<label for="mensaje">Mensaje *</label>
|
||
<textarea id="mensaje" name="mensaje" rows="5"
|
||
placeholder="Contanos sobre tu proyecto, los desafíos que enfrentás y qué tipo de solución estás buscando…"
|
||
required></textarea>
|
||
</div>
|
||
|
||
<!-- ¿Cómo nos encontraste? -->
|
||
<div class="form-group">
|
||
<label for="referencia">¿Cómo nos encontraste?</label>
|
||
<select id="referencia" name="referencia">
|
||
<option value="">Selecciona una opción</option>
|
||
<option value="Google / Buscador">Google / Buscador</option>
|
||
<option value="LinkedIn">LinkedIn</option>
|
||
<option value="Referido / Conocido">Referido / Conocido</option>
|
||
<option value="Redes sociales">Redes sociales</option>
|
||
<option value="Otro">Otro</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Honeypot anti-spam -->
|
||
<input type="text" name="_honey" id="_honey" style="display:none" tabindex="-1" autocomplete="off">
|
||
|
||
<!-- Google reCAPTCHA -->
|
||
<div class="form-group">
|
||
<div class="g-recaptcha" data-sitekey="6Lfim6gsAAAAANjaMaPSYu__KO7y2g_pxZonzsD4"></div>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-primary btn-full" id="submitBtn">
|
||
<svg xmlns="http://www.w3.org/2000/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: 8px;">
|
||
<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>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Sidebar -->
|
||
<aside class="contact-sidebar">
|
||
<div class="sidebar-card">
|
||
<h3>¿Por qué VettaIO?</h3>
|
||
<div class="sidebar-item">
|
||
<div class="sidebar-item-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="20 6 9 17 4 12"></polyline>
|
||
</svg>
|
||
</div>
|
||
<span>Respuesta garantizada dentro de 24 h</span>
|
||
</div>
|
||
<div class="sidebar-item">
|
||
<div class="sidebar-item-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="20 6 9 17 4 12"></polyline>
|
||
</svg>
|
||
</div>
|
||
<span>Soluciones 100% a medida, sin plantillas</span>
|
||
</div>
|
||
<div class="sidebar-item">
|
||
<div class="sidebar-item-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="20 6 9 17 4 12"></polyline>
|
||
</svg>
|
||
</div>
|
||
<span>Proyectos ya en producción y funcionando</span>
|
||
</div>
|
||
<div class="sidebar-item">
|
||
<div class="sidebar-item-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="20 6 9 17 4 12"></polyline>
|
||
</svg>
|
||
</div>
|
||
<span>Equipo especializado en cada división</span>
|
||
</div>
|
||
<div class="sidebar-item">
|
||
<div class="sidebar-item-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="20 6 9 17 4 12"></polyline>
|
||
</svg>
|
||
</div>
|
||
<span>Soporte y mantenimiento continuos</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-card">
|
||
<h3>Nuestras Divisiones</h3>
|
||
<div class="divisions-quick-nav">
|
||
<a href="vettacore.html" class="division-quick-link">
|
||
<span class="dql-dot dd-dot--core"></span>
|
||
<div>
|
||
<strong>VettaCore</strong><br>
|
||
<small style="color: var(--text-muted);">Infraestructura & DevOps</small>
|
||
</div>
|
||
</a>
|
||
<a href="vettaflex.html" class="division-quick-link">
|
||
<span class="dql-dot dd-dot--flex"></span>
|
||
<div>
|
||
<strong>VettaFlex</strong><br>
|
||
<small style="color: var(--text-muted);">Automatización & Workflows</small>
|
||
</div>
|
||
</a>
|
||
<a href="vettamind.html" class="division-quick-link">
|
||
<span class="dql-dot dd-dot--mind"></span>
|
||
<div>
|
||
<strong>VettaMind</strong><br>
|
||
<small style="color: var(--text-muted);">Inteligencia Artificial</small>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-card">
|
||
<h3>Seguinos</h3>
|
||
<div class="social-links">
|
||
<a href="https://wa.me/5493885842292?text=Hola%20VettaIO,%20quiero%20más%20información"
|
||
target="_blank" rel="noopener noreferrer" class="social-link">
|
||
<i class="fab fa-whatsapp"></i>
|
||
WhatsApp
|
||
</a>
|
||
</div>
|
||
<div class="social-links" style="margin-top: 12px;">
|
||
<a href="https://www.linkedin.com/company/vettaio"
|
||
target="_blank" rel="noopener noreferrer" class="social-link">
|
||
<i class="fab fa-linkedin-in"></i>
|
||
LinkedIn
|
||
</a>
|
||
</div>
|
||
<div class="social-links" style="margin-top: 12px;">
|
||
<a href="https://www.instagram.com/vettaio/"
|
||
target="_blank" rel="noopener noreferrer" class="social-link">
|
||
<i class="fab fa-instagram"></i>
|
||
Instagram
|
||
</a>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div class="footer-column">
|
||
<div class="footer-logo">
|
||
<div class="footer-logo-icon">
|
||
<img src="img/logovertical.png" alt="VettaIO">
|
||
</div>
|
||
</div>
|
||
<p class="footer-description">Transformando ideas en soluciones tecnológicas de impacto.</p>
|
||
</div>
|
||
|
||
<div class="footer-column">
|
||
<h4>Divisiones</h4>
|
||
<ul class="footer-links">
|
||
<li><a href="vettacore.html">VettaCore</a></li>
|
||
<li><a href="vettaflex.html">VettaFlex</a></li>
|
||
<li><a href="vettamind.html">VettaMind</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer-column">
|
||
<h4>Servicios</h4>
|
||
<ul class="footer-links">
|
||
<li><a href="index.html#custom-dev">Desarrollo a Medida</a></li>
|
||
<li><a href="index.html#divisions">Consultoría</a></li>
|
||
<li><a href="contacto.html">Soporte</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer-column">
|
||
<h4>Contacto</h4>
|
||
<ul class="footer-contact">
|
||
<li><a href="mailto:info@vettaio.com">info@vettaio.com</a></li>
|
||
<li>+54 388 584-2292</li>
|
||
<li>Jujuy, Argentina</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-bottom">
|
||
<p>© <span id="year"></span> VettaIO. Todos los derechos reservados.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="scripts.js"></script>
|
||
|
||
<script>
|
||
// Actualizar año en footer
|
||
document.getElementById("year").textContent = new Date().getFullYear();
|
||
|
||
// Manejo del formulario con AJAX para evitar redirección
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const form = document.getElementById('contactForm');
|
||
const submitBtn = document.getElementById('submitBtn');
|
||
const messagesDiv = document.getElementById('formMessages');
|
||
|
||
function showMessage(type, text) {
|
||
messagesDiv.style.display = 'block';
|
||
messagesDiv.className = type === 'success' ? 'form-success' : 'form-error';
|
||
messagesDiv.innerHTML = `
|
||
<div style="display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 8px;">
|
||
<div style="flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: ${type === 'success' ? '#10b981' : '#ef4444'}; display: flex; align-items: center; justify-content: center;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||
stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
${type === 'success'
|
||
? '<polyline points="20 6 9 17 4 12"></polyline>'
|
||
: '<circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line>'
|
||
}
|
||
</svg>
|
||
</div>
|
||
<div style="flex: 1;">
|
||
<h3 style="margin: 0 0 5px 0; font-size: 1.1rem;">${type === 'success' ? '¡Mensaje enviado!' : 'Error al enviar'}</h3>
|
||
<p style="margin: 0; font-size: 0.9rem;">${text}</p>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
if (type === 'success') {
|
||
setTimeout(() => {
|
||
messagesDiv.style.display = 'none';
|
||
}, 5000);
|
||
}
|
||
|
||
messagesDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
}
|
||
|
||
if (form) {
|
||
form.addEventListener('submit', async function(e) {
|
||
e.preventDefault();
|
||
|
||
// Validar honeypot
|
||
const honey = document.getElementById('_honey');
|
||
if (honey && honey.value !== "") {
|
||
return false;
|
||
}
|
||
|
||
// Validar reCAPTCHA
|
||
const captchaResponse = grecaptcha.getResponse();
|
||
if (!captchaResponse) {
|
||
showMessage('error', 'Por favor, completa el reCAPTCHA "No soy un robot".');
|
||
return;
|
||
}
|
||
|
||
// Estado de carga
|
||
submitBtn.disabled = true;
|
||
const originalText = submitBtn.innerHTML;
|
||
submitBtn.innerHTML = '<span style="display: inline-flex; align-items: center; gap: 8px;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="animation: spin 1s linear infinite;"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>Enviando...</span>';
|
||
|
||
// Recopilar datos
|
||
const formData = new FormData(form);
|
||
|
||
try {
|
||
const response = await fetch('enviar_contacto.php', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
showMessage('success', result.message);
|
||
form.reset();
|
||
grecaptcha.reset();
|
||
} else {
|
||
showMessage('error', result.message);
|
||
grecaptcha.reset();
|
||
}
|
||
} catch (error) {
|
||
console.error('Error:', error);
|
||
showMessage('error', 'Hubo un problema de conexión. Por favor, intentá de nuevo.');
|
||
grecaptcha.reset();
|
||
} finally {
|
||
submitBtn.disabled = false;
|
||
submitBtn.innerHTML = originalText;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
// Agregar animación spin
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
@keyframes spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
</script>
|
||
</body>
|
||
|
||
</html> |