Files
web_vetta/index.html
T
2026-08-21 12:07:47 -03:00

519 lines
30 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="VettaIO - Soluciones tecnológicas que transforman tu negocio. Infraestructura, automatización e inteligencia artificial a medida.">
<title>VettaIO - Soluciones Tecnológicas</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">
</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="#home" class="nav-link">Inicio</a>
<!-- Divisiones dropdown -->
<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" ...>
<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">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
============================================================ -->
<section id="home" class="hero">
<div class="hero-content">
<div class="hero-logo">
<div class="hero-logo-icon">
<img src="img/logotipo.png" alt="VettaIO" width="490" height="330">
</div>
</div>
<p class="hero-subtitle">El camino a la cima, con tecnología inteligente.</p>
<div class="animated-text-container">
<div class="animated-text active">Infraestructura de última generación</div>
<div class="animated-text">Automatización inteligente</div>
<div class="animated-text">IA que impulsa resultados</div>
<div class="animated-text">Desarrollo a medida</div>
<div class="animated-text">Soluciones IoT conectadas</div>
</div>
<div class="hero-buttons">
<a href="#divisions" class="btn btn-primary">
Explorar Soluciones
<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">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</a>
<a href="contacto.html" class="btn btn-secondary">Contáctanos</a>
</div>
</div>
</section>
<!-- ============================================================
Client Needs Section
============================================================ -->
<section id="needs" class="needs-section">
<div class="container">
<div class="section-header">
<h2 class="section-title">¿Te identificas con alguna de estas <span class="text-gradient">necesidades?</span></h2>
<p class="section-subtitle">Entendemos los desafíos tecnológicos que enfrentan las empresas modernas</p>
</div>
<div class="needs-grid">
<div class="need-card">
<div class="need-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
</div>
<h3>¿Tu infraestructura no escala con tu crecimiento?</h3>
<p>Servidores lentos, costos elevados en cloud y arquitecturas que no soportan el crecimiento de tu negocio.</p>
</div>
<div class="need-card">
<div class="need-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" 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>¿Pierdes tiempo en tareas repetitivas?</h3>
<p>Procesos manuales que consumen horas, datos que se copian a mano entre sistemas, workflows que se traban.</p>
</div>
<div class="need-card">
<div class="need-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="1" x2="12" y2="23"></line>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
</svg>
</div>
<h3>¿Tus sistemas no se hablan entre sí?</h3>
<p>CRM, ERP, facturación... cada herramienta en su isla. Necesitas unificar tus datos y operaciones.</p>
</div>
<div class="need-card">
<div class="need-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
</svg>
</div>
<h3>¿No aprovechas tus datos?</h3>
<p>Tienes información valiosa pero no la usas para predecir, optimizar o tomar mejores decisiones.</p>
</div>
<div class="need-card">
<div class="need-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
<line x1="12" y1="22.08" x2="12" y2="12"></line>
</svg>
</div>
<h3>¿Las soluciones genéricas no se adaptan?</h3>
<p>Software de terceros que no hace exactamente lo que necesitas. Tu negocio es único y merece soluciones a medida.</p>
</div>
<div class="need-card">
<div class="need-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
<line x1="8" y1="2" x2="8" y2="22"></line>
<line x1="16" y1="2" x2="16" y2="22"></line>
<line x1="2" y1="8" x2="22" y2="8"></line>
<line x1="2" y1="16" x2="22" y2="16"></line>
</svg>
</div>
<h3>¿Necesitas conectar el mundo físico con el digital?</h3>
<p>Sensores, maquinaria, flotas... Tienes activos valiosos que no están monitoreados ni optimizados. El IoT es la respuesta.</p>
</div>
<div class="need-card">
<div class="need-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
</svg>
</div>
<h3>¿Tu equipo técnico está saturado?</h3>
<p>Proyectos atrasados, mantenimiento que consume todo el tiempo, nuevas iniciativas que no arrancan.</p>
</div>
<!-- Tarjeta 7: Escalabilidad de datos -->
<div class="need-card">
<div class="need-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.66 0 3-4 3-9s-1.34-9-3-9m0 18c-1.66 0-3-4-3-9s1.34-9 3-9"></path>
<line x1="12" y1="3" x2="12" y2="21"></line>
<line x1="3" y1="12" x2="21" y2="12"></line>
</svg>
</div>
<h3>¿Tu negocio genera datos pero no sabes cómo gestionarlos?</h3>
<p>Sensores, equipos, clientes, operaciones... Los datos crecen exponencialmente y no tienes una estrategia para almacenarlos, procesarlos o extraer valor de ellos en tiempo real.</p>
</div>
<!-- Tarjeta 8: Seguridad y trazabilidad -->
<div class="need-card">
<div class="need-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
<path d="M12 8v4"></path>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
</div>
<h3>¿Te preocupa la seguridad de tus activos o la trazabilidad de tus productos?</h3>
<p>Falta de visibilidad de tu cadena de suministro, activos sin monitoreo, productos que no pueden rastrearse. Necesitas control y transparencia en toda tu operación.</p>
</div>
</div>
<div class="needs-cta">
<p class="needs-cta-text">Si te identificaste con alguna de estas situaciones, podemos ayudarte.</p>
<a href="contacto.html" class="btn btn-primary">
Contactanos para una consulta gratuita
<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">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</a>
</div>
</div>
</section>
<!-- ============================================================
Divisions Section
============================================================ -->
<section id="divisions" class="divisions">
<div class="container">
<div class="section-header">
<h2 class="section-title">Nuestras <span class="text-gradient">Divisiones</span></h2>
<p class="section-subtitle">Tres pilares tecnológicos que cubren todas tus necesidades digitales</p>
</div>
<div class="divisions-grid">
<!-- VettaCore -->
<div class="division-card" data-aos="fade-up">
<div class="division-icon">
<img src="img/icon_core.png" alt="VettaCore" width="210" height="120">
</div>
<p class="division-tagline tagline-core">Infraestructura Robusta</p>
<p class="division-description">Diseñamos y gestionamos infraestructuras tecnológicas escalables y seguras. Desde servidores en la nube hasta arquitecturas on-premise.</p>
<ul class="division-features">
<li>Cloud Architecture</li>
<li>DevOps Solutions</li>
<li>Infrastructure as Code</li>
<li>Monitoreo &amp; Seguridad</li>
</ul>
<a href="vettacore.html" class="division-btn">
Conocer Más
<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="9 18 15 12 9 6"></polyline>
</svg>
</a>
</div>
<!-- VettaFlex -->
<div class="division-card" data-aos="fade-up" data-aos-delay="100">
<div class="division-icon">
<img src="img/icon_flex.png" alt="VettaFlex" width="210" height="120">
</div>
<p class="division-tagline tagline-flex">Automatización Inteligente</p>
<p class="division-description">Optimizamos procesos mediante automatización avanzada. Integraciones, IoT, workflows y pipelines que transforman tu operación.</p>
<ul class="division-features">
<li>Automatización de Procesos</li>
<li>Integraciones con API</li>
<li>Dispositivos IoT</li>
<li>Workflows y Pipelines</li>
</ul>
<a href="vettaflex.html" class="division-btn">
Conocer Más
<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="9 18 15 12 9 6"></polyline>
</svg>
</a>
</div>
<!-- VettaMind -->
<div class="division-card" data-aos="fade-up" data-aos-delay="200">
<div class="division-icon">
<img src="img/icon_mind.png" alt="VettaMind" width="210" height="120">
</div>
<p class="division-tagline tagline-mind">Inteligencia Artificial</p>
<p class="division-description">Soluciones de IA personalizadas que potencian tu negocio. Machine Learning, procesamiento de lenguaje natural y analítica predictiva.</p>
<ul class="division-features">
<li>Agentes de IA a medida</li>
<li>Soluciones NLP</li>
<li>Analisis Predictivo</li>
<li>Modelos de IA Locales</li>
</ul>
<a href="vettamind.html" class="division-btn">
Conocer Más
<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="9 18 15 12 9 6"></polyline>
</svg>
</a>
</div>
</div>
</div>
</section>
<!-- ============================================================
IOT Section
============================================================ -->
<section id="iot-solutions" class="iot-solutions">
<div class="container">
<div class="section-header">
<div class="custom-dev-badge">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
</svg>
Nuestro Fuerte
</div>
<h2 class="section-title">Soluciones <span class="text-gradient">IoT</span></h2>
<p class="section-subtitle">Conectamos el mundo físico con tu ecosistema digital para tomar decisiones más inteligentes.</p>
</div>
<div class="iot-grid">
<div class="iot-card">
<div class="iot-icon">
<img src="img/marcas/agricultura_inteligente.png" alt="Agricultura Inteligente" width="45" height="45" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
</div>
<h3>Agricultura Inteligente</h3>
<p>Seguimiento en tiempo real del estado del suelo, humedad, ph y condiciones climáticas. Asistencia de IA para optimizar el rendimiento de los cultivos.</p>
</div>
<div class="iot-card">
<div class="iot-icon">
<img src="img/marcas/control_temperatura.png" alt="Cadena de Frio" width="45" height="45" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
</div>
<h3>Control de Cadena de Frío</h3>
<p>Sistema de monitoreo y control de temperatura para mantener la calidad de productos sensibles durante el transporte y almacenamiento.</p>
</div>
<div class="iot-card">
<div class="iot-icon">
<img src="img/marcas/energia.png" alt="Gestión Energética" width="45" height="45" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
</div>
<h3>Gestión de Energía</h3>
<p>Soluciones inteligentes para monitorear y optimizar el consumo de energía en tiempo real en nodos críticos y con múltiples fuestes de energía.</p>
</div>
<div class="iot-card">
<div class="iot-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.66 0 3-4 3-9s-1.34-9-3-9m0 18c-1.66 0-3-4-3-9s1.34-9 3-9"></path>
</svg>
</div>
<h3>Plataforma IoT a Medida</h3>
<p>Desarrollamos la plataforma, los tableros y la lógica de negocio que necesitas. Integración con tus sistemas actuales (ERP, CRM).</p>
</div>
</div>
<div class="iot-cta">
<p class="iot-cta-text">¿Tienes un caso de uso específico en mente?</p>
<a href="contacto.html" class="btn btn-primary">
Hablemos de tu proyecto IoT
<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">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</a>
</div>
</div>
</section>
<!-- ============================================================
Custom Development Section
============================================================ -->
<section id="custom-dev" class="custom-dev">
<div class="container">
<div class="custom-dev-card">
<div class="custom-dev-content">
<h2 class="custom-dev-title">Desarrollo a <span class="text-gradient">Medida</span></h2>
<p class="custom-dev-intro">Creamos soluciones únicas para cada cliente. No usamos plantillas ni soluciones genéricas.</p>
<p class="custom-dev-text">Desarrollamos plataformas de autogestión y CRM completamente personalizadas, ya en producción y funcionando con éxito. Tu visión, nuestro código.</p>
<ul class="custom-dev-features">
<li>
<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"><polyline points="9 18 15 12 9 6"></polyline></svg>
Plataformas CRM personalizadas
</li>
<li>
<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"><polyline points="9 18 15 12 9 6"></polyline></svg>
Sistemas de autogestión
</li>
<li>
<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"><polyline points="9 18 15 12 9 6"></polyline></svg>
Aplicaciones web y móviles
</li>
<li>
<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"><polyline points="9 18 15 12 9 6"></polyline></svg>
Integraciones complejas
</li>
<li>
<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"><polyline points="9 18 15 12 9 6"></polyline></svg>
APIs y microservicios
</li>
</ul>
<a href="contacto.html" class="btn btn-primary">
Iniciar un Proyecto
<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">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</a>
</div>
<div class="custom-dev-visual">
<div class="code-visual">
<div class="code-line line-1"></div>
<div class="code-line line-2"></div>
<div class="code-line line-3"></div>
<div class="code-blocks">
<div class="code-block block-1">
<div class="binary-container">
<div class="binary-line">01101001 10110010 11010110 01101011</div>
<div class="binary-line">10010110 01011010 10100101 01011010</div>
<div class="binary-line">11010110 01101011 10110010 01101001</div>
<div class="binary-line">10100101 01011010 10010110 01011010</div>
<div class="binary-line">01101011 11010110 01101001 10110010</div>
</div>
</div>
<div class="code-block block-2">
<div class="puzzle-container">
<div class="puzzle-piece piece-1"></div>
<div class="puzzle-piece piece-2"></div>
<div class="puzzle-piece piece-3"></div>
<div class="puzzle-piece piece-4"></div>
</div>
</div>
</div>
<div class="code-block block-3">
<div class="ui-adjust">
<div class="slider-track">
<div class="slider-fill"></div>
<div class="slider-thumb"></div>
</div>
<div class="ui-indicator">
<div class="cursor-dot"></div>
<div class="level-bar"></div>
</div>
</div>
</div>
</div>
<div class="visual-glow glow-1"></div>
<div class="visual-glow glow-2"></div>
</div>
</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="#custom-dev">Desarrollo a Medida</a></li>
<li><a href="#iot-solutions">Soluciones IoT</a></li>
<li><a href="#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>
<li><a href="politicas.html" target="_blank" rel="noopener noreferrer">Políticas de Privacidad</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; <span id="year"></span> VettaIO. Todos los derechos reservados.</p>
</div>
</div>
</footer>
<script src="scripts.js"></script>
<script>
document.getElementById("year").textContent = new Date().getFullYear();
</script>
<!-- ============================================================
Botón Flotante de WhatsApp con Transición Visual
============================================================ -->
<div class="whatsapp-float large initial" id="whatsappFloat" aria-label="Botón flotante de WhatsApp">
<a href="https://wa.me/543885842292?text=Hola%21%20Me%20interesa%20conocer%20m%C3%A1s%20sobre%20las%20soluciones%20de%20VettaIO"
class="whatsapp-button"
target="_blank"
rel="noopener noreferrer"
aria-label="Contactar por WhatsApp">
<span class="whatsapp-tooltip"><span class="text-gradient">¡Hablemos por WhatsApp!</span></span>
<img class="whatsapp-icon" src="img/marcas/whatsapp_icon.png" alt="WhatsApp">
</a>
</div>
</body>
</html>