primer desarrollo
This commit is contained in:
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 295 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,63 @@
|
|||||||
|
<?php
|
||||||
|
// LIMPIAR CUALQUIER SALIDA ANTES DE EMPEZAR
|
||||||
|
if (ob_get_length() > 0) { ob_clean(); }
|
||||||
|
|
||||||
|
// DESACTIVAR TODOS LOS ERRORES (en producción)
|
||||||
|
ini_set('display_errors', 0);
|
||||||
|
ini_set('display_startup_errors', 0);
|
||||||
|
error_reporting(0);
|
||||||
|
|
||||||
|
// CABECERAS PRIMERO
|
||||||
|
header("Access-Control-Allow-Origin: *");
|
||||||
|
header("Content-Type: application/json; charset=UTF-8");
|
||||||
|
|
||||||
|
// FUNCIÓN PARA ENVIAR RESPUESTAS
|
||||||
|
function sendResponse($status, $message, $code = 200) {
|
||||||
|
http_response_code($code);
|
||||||
|
echo json_encode([
|
||||||
|
"status" => $status,
|
||||||
|
"message" => $message
|
||||||
|
]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// VERIFICAR MÉTODO
|
||||||
|
if ($_SERVER["REQUEST_METHOD"] !== "POST") {
|
||||||
|
sendResponse("error", "Método no permitido", 405);
|
||||||
|
}
|
||||||
|
|
||||||
|
// OBTENER DATOS
|
||||||
|
$name = isset($_POST["name"]) ? strip_tags(trim($_POST["name"])) : '';
|
||||||
|
$email = isset($_POST["email"]) ? filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL) : '';
|
||||||
|
$phone = isset($_POST["phone"]) ? strip_tags(trim($_POST["phone"])) : '';
|
||||||
|
$company = isset($_POST["company"]) ? strip_tags(trim($_POST["company"])) : '';
|
||||||
|
$service = isset($_POST["service"]) ? strip_tags(trim($_POST["service"])) : '';
|
||||||
|
$message_text = isset($_POST["message"]) ? strip_tags(trim($_POST["message"])) : '';
|
||||||
|
|
||||||
|
// VALIDAR
|
||||||
|
if (empty($name) || empty($message_text) || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
|
||||||
|
sendResponse("error", "Por favor completa todos los campos requeridos correctamente.", 400);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ENVIAR EMAIL (ya sabemos que esto funciona)
|
||||||
|
$to = "info@vettaio.com";
|
||||||
|
$subject = "Nuevo mensaje de contacto de $name - VettaIO";
|
||||||
|
$email_content = "Nuevo mensaje de contacto:\n\n";
|
||||||
|
$email_content .= "Nombre: $name\n";
|
||||||
|
$email_content .= "Email: $email\n";
|
||||||
|
$email_content .= "Teléfono: $phone\n";
|
||||||
|
$email_content .= "Empresa: $company\n";
|
||||||
|
$email_content .= "Servicio de interés: $service\n\n";
|
||||||
|
$email_content .= "Mensaje:\n$message_text\n";
|
||||||
|
|
||||||
|
$email_headers = "From: $name <$email>\r\n";
|
||||||
|
$email_headers .= "Reply-To: $email\r\n";
|
||||||
|
|
||||||
|
if (mail($to, $subject, $email_content, $email_headers)) {
|
||||||
|
sendResponse("success", "¡Gracias! Tu mensaje ha sido enviado.", 200);
|
||||||
|
} else {
|
||||||
|
sendResponse("error", "Error al enviar el mensaje. Por favor, intenta nuevamente.", 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
// NO DEJAR NADA DESPUÉS DE ESTO - NI ESPACIOS, NI SALTOS DE LÍNEA
|
||||||
|
?>
|
||||||
+498
@@ -0,0 +1,498 @@
|
|||||||
|
<!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>
|
||||||
@@ -0,0 +1,165 @@
|
|||||||
|
<?php
|
||||||
|
header('Content-Type: application/json');
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// CONFIGURACIÓN - ¡CAMBIAR ESTOS VALORES!
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
// Tu Secret Key de Google reCAPTCHA (obtenida de https://www.google.com/recaptcha/admin)
|
||||||
|
$RECAPTCHA_SECRET_KEY = "6Lfim6gsAAAAAH6BpB7U09icA8bfy-kif4j1pIBn";
|
||||||
|
|
||||||
|
// Email donde recibirás los mensajes
|
||||||
|
$DESTINATION_EMAIL = "info@vettaio.com";
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// PROCESAR EL FORMULARIO
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
// Verificar honeypot (campo oculto anti-spam)
|
||||||
|
if (!empty($_POST['_honey'])) {
|
||||||
|
// Es un bot, responder como si todo estuviera bien pero no hacer nada
|
||||||
|
echo json_encode(['success' => true, 'message' => 'Mensaje recibido (spam bloqueado)']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validar campos requeridos
|
||||||
|
$required_fields = ['nombre', 'email', 'division', 'mensaje'];
|
||||||
|
foreach ($required_fields as $field) {
|
||||||
|
if (empty($_POST[$field])) {
|
||||||
|
echo json_encode(['success' => false, 'message' => 'Por favor, completá todos los campos obligatorios.']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validar formato de email
|
||||||
|
if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
|
||||||
|
echo json_encode(['success' => false, 'message' => 'El email ingresado no es válido.']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validar reCAPTCHA
|
||||||
|
if (empty($_POST['g-recaptcha-response'])) {
|
||||||
|
echo json_encode(['success' => false, 'message' => 'Por favor, completa el reCAPTCHA.']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verificar reCAPTCHA con Google
|
||||||
|
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
|
||||||
|
$recaptcha_data = [
|
||||||
|
'secret' => $RECAPTCHA_SECRET_KEY,
|
||||||
|
'response' => $_POST['g-recaptcha-response'],
|
||||||
|
'remoteip' => $_SERVER['REMOTE_ADDR']
|
||||||
|
];
|
||||||
|
|
||||||
|
$recaptcha_options = [
|
||||||
|
'http' => [
|
||||||
|
'method' => 'POST',
|
||||||
|
'content' => http_build_query($recaptcha_data)
|
||||||
|
]
|
||||||
|
];
|
||||||
|
|
||||||
|
$recaptcha_context = stream_context_create($recaptcha_options);
|
||||||
|
$recaptcha_result = file_get_contents($recaptcha_url, false, $recaptcha_context);
|
||||||
|
$recaptcha_json = json_decode($recaptcha_result, true);
|
||||||
|
|
||||||
|
if (!$recaptcha_json['success']) {
|
||||||
|
echo json_encode(['success' => false, 'message' => 'Error de verificación reCAPTCHA. Por favor, intentá de nuevo.']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// PREPARAR Y ENVIAR EL EMAIL
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
// Sanitizar datos
|
||||||
|
$nombre = htmlspecialchars(strip_tags($_POST['nombre']));
|
||||||
|
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
|
||||||
|
$empresa = isset($_POST['empresa']) ? htmlspecialchars(strip_tags($_POST['empresa'])) : 'No especificada';
|
||||||
|
$telefono = isset($_POST['telefono']) ? htmlspecialchars(strip_tags($_POST['telefono'])) : 'No especificado';
|
||||||
|
$division = htmlspecialchars(strip_tags($_POST['division']));
|
||||||
|
$tipo = isset($_POST['tipo']) && !empty($_POST['tipo']) ? htmlspecialchars(strip_tags($_POST['tipo'])) : 'No especificado';
|
||||||
|
$mensaje = htmlspecialchars(strip_tags($_POST['mensaje']));
|
||||||
|
$referencia = isset($_POST['referencia']) && !empty($_POST['referencia']) ? htmlspecialchars(strip_tags($_POST['referencia'])) : 'No especificado';
|
||||||
|
|
||||||
|
// Construir el cuerpo del email
|
||||||
|
$email_subject = "Nuevo contacto desde VettaIO - $nombre";
|
||||||
|
$email_body = "
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Nuevo mensaje de contacto</title>
|
||||||
|
<style>
|
||||||
|
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
|
||||||
|
.container { max-width: 600px; margin: 0 auto; padding: 20px; }
|
||||||
|
.header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; text-align: center; }
|
||||||
|
.content { padding: 20px; background: #f9f9f9; }
|
||||||
|
.field { margin-bottom: 15px; }
|
||||||
|
.label { font-weight: bold; color: #667eea; }
|
||||||
|
.value { margin-top: 5px; }
|
||||||
|
.footer { text-align: center; padding: 20px; font-size: 12px; color: #999; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class='container'>
|
||||||
|
<div class='header'>
|
||||||
|
<h2>Nuevo mensaje de contacto</h2>
|
||||||
|
<p>VettaIO - Transformamos desafíos tecnológicos</p>
|
||||||
|
</div>
|
||||||
|
<div class='content'>
|
||||||
|
<div class='field'>
|
||||||
|
<div class='label'>👤 Nombre:</div>
|
||||||
|
<div class='value'>$nombre</div>
|
||||||
|
</div>
|
||||||
|
<div class='field'>
|
||||||
|
<div class='label'>📧 Email:</div>
|
||||||
|
<div class='value'>$email</div>
|
||||||
|
</div>
|
||||||
|
<div class='field'>
|
||||||
|
<div class='label'>🏢 Empresa:</div>
|
||||||
|
<div class='value'>$empresa</div>
|
||||||
|
</div>
|
||||||
|
<div class='field'>
|
||||||
|
<div class='label'>📞 Teléfono:</div>
|
||||||
|
<div class='value'>$telefono</div>
|
||||||
|
</div>
|
||||||
|
<div class='field'>
|
||||||
|
<div class='label'>🎯 División de interés:</div>
|
||||||
|
<div class='value'>$division</div>
|
||||||
|
</div>
|
||||||
|
<div class='field'>
|
||||||
|
<div class='label'>📋 Tipo de consulta:</div>
|
||||||
|
<div class='value'>$tipo</div>
|
||||||
|
</div>
|
||||||
|
<div class='field'>
|
||||||
|
<div class='label'>💬 Mensaje:</div>
|
||||||
|
<div class='value'>$mensaje</div>
|
||||||
|
</div>
|
||||||
|
<div class='field'>
|
||||||
|
<div class='label'>🔍 ¿Cómo nos encontraste?</div>
|
||||||
|
<div class='value'>$referencia</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='footer'>
|
||||||
|
<p>Este mensaje fue enviado desde el formulario de contacto de VettaIO</p>
|
||||||
|
<p>IP: {$_SERVER['REMOTE_ADDR']} | Fecha: " . date('d/m/Y H:i:s') . "</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
";
|
||||||
|
|
||||||
|
// Cabeceras del email
|
||||||
|
$headers = "MIME-Version: 1.0\r\n";
|
||||||
|
$headers .= "Content-type: text/html; charset=UTF-8\r\n";
|
||||||
|
$headers .= "From: $email\r\n";
|
||||||
|
$headers .= "Reply-To: $email\r\n";
|
||||||
|
$headers .= "X-Mailer: PHP/" . phpversion();
|
||||||
|
|
||||||
|
// Enviar email
|
||||||
|
$mail_sent = mail($DESTINATION_EMAIL, $email_subject, $email_body, $headers);
|
||||||
|
|
||||||
|
if ($mail_sent) {
|
||||||
|
echo json_encode(['success' => true, 'message' => '¡Mensaje enviado con éxito! Te responderemos en menos de 24 horas.']);
|
||||||
|
} else {
|
||||||
|
echo json_encode(['success' => false, 'message' => 'Error al enviar el mensaje. Por favor, intentá de nuevo o escribinos directamente a info@vettaio.com.']);
|
||||||
|
}
|
||||||
|
?>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 630 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 481 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
+519
@@ -0,0 +1,519 @@
|
|||||||
|
<!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 & 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>© <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>
|
||||||
+1107
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,187 @@
|
|||||||
|
Perfecto, con lo que se ve en tus archivos ya hay una base conceptual muy sólida:
|
||||||
|
|
||||||
|
Infraestructura (VettaCore)
|
||||||
|
Automatización + IoT (VettaFlex)
|
||||||
|
IA (VettaMind)
|
||||||
|
Y además aparece transversalmente desarrollo a medida como eje unificador
|
||||||
|
|
||||||
|
Voy a proponerte exactamente lo que buscás:
|
||||||
|
👉 3 catálogos separados (uno por eje principal)
|
||||||
|
👉 pero interconectados estratégicamente para vender siempre el ecosistema completo
|
||||||
|
|
||||||
|
🧩 ESTRUCTURA GENERAL (para los 3 catálogos)
|
||||||
|
|
||||||
|
Todos deberían seguir esta lógica:
|
||||||
|
|
||||||
|
Introducción al eje
|
||||||
|
Problemas que resuelve
|
||||||
|
Servicios principales
|
||||||
|
Soluciones empaquetadas (casos concretos)
|
||||||
|
Integración con otros ejes (cross-sell)
|
||||||
|
Modelo de trabajo
|
||||||
|
CTA
|
||||||
|
📘 CATÁLOGO 1: DESARROLLO A MEDIDA (EJE CENTRAL)
|
||||||
|
🧠 Enfoque
|
||||||
|
|
||||||
|
Este es el core real del negocio: todo pasa por acá.
|
||||||
|
|
||||||
|
🔹 Introducción
|
||||||
|
|
||||||
|
Desarrollamos software a medida que se adapta exactamente a la operación de tu empresa, integrando sistemas, automatizando procesos y conectando datos físicos y digitales.
|
||||||
|
|
||||||
|
🔹 Problemas que resuelve
|
||||||
|
Sistemas que no se adaptan al negocio
|
||||||
|
Herramientas aisladas (CRM, ERP, etc.)
|
||||||
|
Procesos manuales
|
||||||
|
Falta de trazabilidad
|
||||||
|
Dificultad para escalar
|
||||||
|
🔹 Servicios principales
|
||||||
|
1. Desarrollo de sistemas empresariales
|
||||||
|
CRM / ERP personalizados
|
||||||
|
Sistemas de gestión operativa
|
||||||
|
Plataformas internas
|
||||||
|
2. Integración de sistemas
|
||||||
|
APIs
|
||||||
|
Integración entre plataformas existentes
|
||||||
|
Unificación de datos
|
||||||
|
3. Plataformas IoT
|
||||||
|
Dashboards en tiempo real
|
||||||
|
Backend para dispositivos
|
||||||
|
Gestión de sensores
|
||||||
|
4. Sistemas con IA integrada
|
||||||
|
Predicción de demanda
|
||||||
|
Automatización inteligente
|
||||||
|
Análisis de datos
|
||||||
|
🔹 Soluciones empaquetadas
|
||||||
|
Sistema de gestión integral (ventas + stock + finanzas)
|
||||||
|
Plataforma de monitoreo en tiempo real (IoT)
|
||||||
|
Sistema de trazabilidad de productos
|
||||||
|
Portal de clientes/proveedores
|
||||||
|
🔹 Integración con otros ejes
|
||||||
|
|
||||||
|
👉 “Este servicio se potencia con:”
|
||||||
|
|
||||||
|
Automatización (workflows, bots, integraciones)
|
||||||
|
IoT (datos del mundo físico)
|
||||||
|
IA (predicción y optimización)
|
||||||
|
🔹 Modelo de trabajo
|
||||||
|
Discovery + diagnóstico
|
||||||
|
Desarrollo iterativo (MVP → evolución)
|
||||||
|
Integración continua
|
||||||
|
Soporte y mejora
|
||||||
|
⚙️ CATÁLOGO 2: AUTOMATIZACIÓN + IoT
|
||||||
|
|
||||||
|
(Alineado con lo que ya tenés en VettaFlex)
|
||||||
|
|
||||||
|
🧠 Enfoque
|
||||||
|
|
||||||
|
Optimizar operaciones conectando procesos digitales + dispositivos físicos.
|
||||||
|
|
||||||
|
🔹 Introducción
|
||||||
|
|
||||||
|
Automatizamos procesos y conectamos dispositivos para que tu negocio funcione de forma autónoma, eficiente y basada en datos en tiempo real
|
||||||
|
|
||||||
|
🔹 Problemas que resuelve
|
||||||
|
Tareas repetitivas
|
||||||
|
Procesos manuales
|
||||||
|
Falta de monitoreo
|
||||||
|
Sistemas desconectados
|
||||||
|
Ineficiencia operativa
|
||||||
|
🔹 Servicios principales
|
||||||
|
1. Automatización de procesos (RPA + workflows)
|
||||||
|
Flujos automáticos
|
||||||
|
Orquestación de tareas
|
||||||
|
2. Integraciones
|
||||||
|
APIs
|
||||||
|
Conexión entre sistemas
|
||||||
|
3. IoT (Internet of Things)
|
||||||
|
Sensores (temperatura, vibración, consumo, etc.)
|
||||||
|
Gateways y edge computing
|
||||||
|
Protocolos industriales (MQTT, Modbus, OPC)
|
||||||
|
4. Data pipelines
|
||||||
|
Procesamiento en tiempo real
|
||||||
|
ETL/ELT
|
||||||
|
5. Sistemas de alertas
|
||||||
|
Notificaciones inteligentes
|
||||||
|
Eventos en tiempo real
|
||||||
|
🔹 Soluciones empaquetadas
|
||||||
|
Monitoreo de maquinaria (mantenimiento preventivo 👈 muy alineado a lo que querías agregar)
|
||||||
|
Control de temperatura (cadena de frío)
|
||||||
|
Agricultura inteligente
|
||||||
|
Automatización de procesos administrativos
|
||||||
|
Control energético
|
||||||
|
🔹 Integración con otros ejes
|
||||||
|
|
||||||
|
👉 “Esto no es solo automatización:”
|
||||||
|
|
||||||
|
Desarrollo a medida → interfaz y lógica de negocio
|
||||||
|
IA → decisiones inteligentes sobre los datos
|
||||||
|
🔹 Diferencial clave
|
||||||
|
|
||||||
|
Automatizan software + hardware (muy fuerte esto)
|
||||||
|
|
||||||
|
🤖 CATÁLOGO 3: IA APLICADA
|
||||||
|
|
||||||
|
(Alineado con VettaMind)
|
||||||
|
|
||||||
|
🧠 Enfoque
|
||||||
|
|
||||||
|
Convertir datos en decisiones.
|
||||||
|
|
||||||
|
🔹 Introducción
|
||||||
|
|
||||||
|
Aplicamos inteligencia artificial para optimizar procesos, predecir comportamientos y generar ventajas competitivas reales
|
||||||
|
|
||||||
|
🔹 Problemas que resuelve
|
||||||
|
No aprovechamiento de datos
|
||||||
|
Decisiones basadas en intuición
|
||||||
|
Falta de predicción
|
||||||
|
Ineficiencia operativa
|
||||||
|
🔹 Servicios principales
|
||||||
|
1. Machine Learning
|
||||||
|
Modelos predictivos
|
||||||
|
Series temporales
|
||||||
|
2. NLP
|
||||||
|
Chatbots
|
||||||
|
Procesamiento de documentos
|
||||||
|
3. Computer Vision
|
||||||
|
Control de calidad
|
||||||
|
Reconocimiento
|
||||||
|
4. Analítica avanzada
|
||||||
|
Forecasting
|
||||||
|
Detección de anomalías
|
||||||
|
5. IoT Analytics
|
||||||
|
Mantenimiento predictivo
|
||||||
|
Optimización en tiempo real
|
||||||
|
🔹 Soluciones empaquetadas
|
||||||
|
Mantenimiento predictivo industrial
|
||||||
|
Optimización energética
|
||||||
|
Recomendadores
|
||||||
|
Análisis de ventas
|
||||||
|
Optimización de rutas/flotas
|
||||||
|
🔹 Integración con otros ejes
|
||||||
|
|
||||||
|
👉 “La IA sin datos no sirve”
|
||||||
|
|
||||||
|
IoT → genera datos
|
||||||
|
Desarrollo → implementa soluciones
|
||||||
|
Automatización → ejecuta decisiones
|
||||||
|
🔥 BONUS: CÓMO CONECTAR LOS 3 CATÁLOGOS (CLAVE COMERCIAL)
|
||||||
|
|
||||||
|
Te dejo una sección que deberías repetir en los 3:
|
||||||
|
|
||||||
|
🔗 Ecosistema VettaIO
|
||||||
|
|
||||||
|
Nuestras soluciones no funcionan de forma aislada:
|
||||||
|
|
||||||
|
Desarrollo a medida → construye el sistema
|
||||||
|
IoT & Automatización → genera y ejecuta datos
|
||||||
|
IA → optimiza y predice
|
||||||
|
|
||||||
|
👉 El verdadero valor está en la combinación.
|
||||||
|
|
||||||
|
💡 POSICIONAMIENTO FINAL (MUY IMPORTANTE)
|
||||||
|
|
||||||
|
Con esto estás dejando de vender servicios sueltos y pasás a vender:
|
||||||
|
|
||||||
|
👉 “Soluciones tecnológicas integrales basadas en datos”
|
||||||
+622
@@ -0,0 +1,622 @@
|
|||||||
|
// Particle Network
|
||||||
|
class ParticleNetwork {
|
||||||
|
constructor(colorConfig = null) {
|
||||||
|
this.canvas = document.getElementById('particleCanvas');
|
||||||
|
|
||||||
|
if (!this.canvas) {
|
||||||
|
console.error('ParticleNetwork: Canvas element not found');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.ctx = this.canvas.getContext('2d');
|
||||||
|
this.particles = [];
|
||||||
|
this.mouse = { x: -1000, y: -1000 }; // Start off-screen
|
||||||
|
this.particleCount = 80;
|
||||||
|
this.mouseRadius = 200; // Radio de influencia del mouse para conexiones
|
||||||
|
|
||||||
|
// Color configuration - default to cyan/green
|
||||||
|
this.colors = colorConfig || {
|
||||||
|
particle: 'rgba(0, 166, 255, 0.6)',
|
||||||
|
line: 'rgba(0, 145, 255, 0.36)'
|
||||||
|
};
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.resizeCanvas();
|
||||||
|
this.createParticles();
|
||||||
|
this.setupEventListeners();
|
||||||
|
this.animate();
|
||||||
|
}
|
||||||
|
|
||||||
|
resizeCanvas() {
|
||||||
|
this.canvas.width = window.innerWidth;
|
||||||
|
this.canvas.height = window.innerHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
createParticles() {
|
||||||
|
this.particles = [];
|
||||||
|
for (let i = 0; i < this.particleCount; i++) {
|
||||||
|
this.particles.push({
|
||||||
|
x: Math.random() * this.canvas.width,
|
||||||
|
y: Math.random() * this.canvas.height,
|
||||||
|
vx: (Math.random() - 0.5) * 0.5,
|
||||||
|
vy: (Math.random() - 0.5) * 0.5,
|
||||||
|
radius: Math.random() * 2 + 1
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setupEventListeners() {
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.resizeCanvas();
|
||||||
|
this.createParticles();
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('mousemove', (e) => {
|
||||||
|
this.mouse.x = e.clientX;
|
||||||
|
this.mouse.y = e.clientY;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reset mouse position when it leaves the window
|
||||||
|
window.addEventListener('mouseleave', () => {
|
||||||
|
this.mouse.x = -1000;
|
||||||
|
this.mouse.y = -1000;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
drawParticle(particle) {
|
||||||
|
this.ctx.beginPath();
|
||||||
|
this.ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
|
||||||
|
this.ctx.fillStyle = this.colors.particle;
|
||||||
|
this.ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
drawLine(p1, p2, opacity) {
|
||||||
|
this.ctx.beginPath();
|
||||||
|
this.ctx.moveTo(p1.x, p1.y);
|
||||||
|
this.ctx.lineTo(p2.x, p2.y);
|
||||||
|
// Extract RGB from the line color and apply opacity
|
||||||
|
const baseColor = this.colors.line.match(/rgba?\(([^)]+)\)/)[1].split(',').slice(0, 3).join(',');
|
||||||
|
this.ctx.strokeStyle = `rgba(${baseColor}, ${opacity})`;
|
||||||
|
this.ctx.lineWidth = 1;
|
||||||
|
this.ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
updateParticle(particle) {
|
||||||
|
// Update position
|
||||||
|
particle.x += particle.vx;
|
||||||
|
particle.y += particle.vy;
|
||||||
|
|
||||||
|
// Bounce off edges
|
||||||
|
if (particle.x < 0 || particle.x > this.canvas.width) {
|
||||||
|
particle.vx *= -1;
|
||||||
|
}
|
||||||
|
if (particle.y < 0 || particle.y > this.canvas.height) {
|
||||||
|
particle.vy *= -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mouse interaction removed - particles just float naturally
|
||||||
|
}
|
||||||
|
|
||||||
|
animate() {
|
||||||
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||||
|
|
||||||
|
// Update and draw particles
|
||||||
|
this.particles.forEach((particle, i) => {
|
||||||
|
this.updateParticle(particle);
|
||||||
|
this.drawParticle(particle);
|
||||||
|
|
||||||
|
// Connect particles ONLY if mouse is near them
|
||||||
|
this.particles.slice(i + 1).forEach(otherParticle => {
|
||||||
|
const dx = particle.x - otherParticle.x;
|
||||||
|
const dy = particle.y - otherParticle.y;
|
||||||
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||||
|
|
||||||
|
// Check if particles are close to each other
|
||||||
|
if (distance < 150) {
|
||||||
|
// Check if mouse is near either particle
|
||||||
|
const mouseToP1 = Math.sqrt(
|
||||||
|
Math.pow(this.mouse.x - particle.x, 2) +
|
||||||
|
Math.pow(this.mouse.y - particle.y, 2)
|
||||||
|
);
|
||||||
|
const mouseToP2 = Math.sqrt(
|
||||||
|
Math.pow(this.mouse.x - otherParticle.x, 2) +
|
||||||
|
Math.pow(this.mouse.y - otherParticle.y, 2)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Only draw line if mouse is within radius of either particle
|
||||||
|
if (mouseToP1 < this.mouseRadius || mouseToP2 < this.mouseRadius) {
|
||||||
|
// Calculate opacity based on distance and mouse proximity
|
||||||
|
const proximityFactor = Math.min(mouseToP1, mouseToP2) / this.mouseRadius;
|
||||||
|
const distanceFactor = 1 - (distance / 150);
|
||||||
|
const opacity = 0.3 * distanceFactor * (1 - proximityFactor);
|
||||||
|
|
||||||
|
this.drawLine(particle, otherParticle, opacity);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
requestAnimationFrame(() => this.animate());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animated Text Rotator
|
||||||
|
class TextRotator {
|
||||||
|
constructor(containerSelector, interval = 3000) {
|
||||||
|
this.container = document.querySelector(containerSelector);
|
||||||
|
|
||||||
|
if (!this.container) {
|
||||||
|
console.warn('TextRotator: Container not found');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.texts = this.container.querySelectorAll('.animated-text');
|
||||||
|
|
||||||
|
if (this.texts.length === 0) {
|
||||||
|
console.warn('TextRotator: No animated text elements found');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.currentIndex = 0;
|
||||||
|
this.interval = interval;
|
||||||
|
|
||||||
|
this.start();
|
||||||
|
}
|
||||||
|
|
||||||
|
start() {
|
||||||
|
setInterval(() => {
|
||||||
|
this.texts[this.currentIndex].classList.remove('active');
|
||||||
|
this.currentIndex = (this.currentIndex + 1) % this.texts.length;
|
||||||
|
this.texts[this.currentIndex].classList.add('active');
|
||||||
|
}, this.interval);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Smooth Scroll
|
||||||
|
function smoothScroll(target) {
|
||||||
|
const element = document.querySelector(target);
|
||||||
|
if (element) {
|
||||||
|
const headerOffset = 64;
|
||||||
|
const elementPosition = element.getBoundingClientRect().top;
|
||||||
|
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
|
||||||
|
|
||||||
|
window.scrollTo({
|
||||||
|
top: offsetPosition,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Navigation
|
||||||
|
function setupNavigation() {
|
||||||
|
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
|
||||||
|
const navLinksContainer = document.getElementById('navLinks');
|
||||||
|
|
||||||
|
if (!mobileMenuBtn || !navLinksContainer) return;
|
||||||
|
|
||||||
|
// Para móvil: el enlace "Divisiones" SOLO abre el submenú, NO navega
|
||||||
|
const divisionesNavItem = document.querySelector('.nav-item');
|
||||||
|
if (divisionesNavItem) {
|
||||||
|
const divisionesLink = divisionesNavItem.querySelector('.nav-link-group .nav-link');
|
||||||
|
|
||||||
|
if (divisionesLink) {
|
||||||
|
// Prevenir comportamiento por defecto del enlace
|
||||||
|
divisionesLink.addEventListener('click', (e) => {
|
||||||
|
if (window.innerWidth <= 768) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
// Toggle del submenú
|
||||||
|
divisionesNavItem.classList.toggle('open');
|
||||||
|
|
||||||
|
// Actualizar aria-expanded del botón toggle
|
||||||
|
const toggleBtn = divisionesNavItem.querySelector('.dropdown-toggle');
|
||||||
|
if (toggleBtn) {
|
||||||
|
toggleBtn.setAttribute('aria-expanded', divisionesNavItem.classList.contains('open'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Smooth scroll solo para enlaces que NO son el de Divisiones en móvil
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(link => {
|
||||||
|
// Verificar si es el enlace de Divisiones en móvil
|
||||||
|
const isDivisionesLink = window.innerWidth <= 768 &&
|
||||||
|
link.closest('.nav-item') &&
|
||||||
|
link.closest('.nav-item') === divisionesNavItem &&
|
||||||
|
link.getAttribute('href') === '#divisions';
|
||||||
|
|
||||||
|
if (isDivisionesLink) {
|
||||||
|
return; // No agregar smooth scroll a este enlace
|
||||||
|
}
|
||||||
|
|
||||||
|
link.addEventListener('click', (e) => {
|
||||||
|
const target = link.getAttribute('href');
|
||||||
|
if (target && target !== '#') {
|
||||||
|
e.preventDefault();
|
||||||
|
smoothScroll(target);
|
||||||
|
|
||||||
|
// Cerrar menú móvil si está abierto
|
||||||
|
if (window.innerWidth <= 768 && navLinksContainer.classList.contains('active')) {
|
||||||
|
navLinksContainer.classList.remove('active');
|
||||||
|
mobileMenuBtn.classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Mobile menu toggle (hamburguesa)
|
||||||
|
mobileMenuBtn.addEventListener('click', () => {
|
||||||
|
navLinksContainer.classList.toggle('active');
|
||||||
|
mobileMenuBtn.classList.toggle('active');
|
||||||
|
|
||||||
|
// Cerrar cualquier submenú abierto al cerrar el menú principal
|
||||||
|
if (!navLinksContainer.classList.contains('active')) {
|
||||||
|
const openSubmenus = document.querySelectorAll('.nav-item.open');
|
||||||
|
openSubmenus.forEach(submenu => {
|
||||||
|
submenu.classList.remove('open');
|
||||||
|
const toggleBtn = submenu.querySelector('.dropdown-toggle');
|
||||||
|
if (toggleBtn) {
|
||||||
|
toggleBtn.setAttribute('aria-expanded', 'false');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Toggle dropdown desde el botón flecha (consistencia)
|
||||||
|
document.querySelectorAll('.dropdown-toggle').forEach(trigger => {
|
||||||
|
trigger.addEventListener('click', (e) => {
|
||||||
|
if (window.innerWidth <= 768) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
const item = trigger.closest('.nav-item');
|
||||||
|
if (item) {
|
||||||
|
item.classList.toggle('open');
|
||||||
|
trigger.setAttribute('aria-expanded', item.classList.contains('open'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cerrar menú móvil al hacer clic fuera
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
if (!e.target.closest('.navbar') && navLinksContainer.classList.contains('active')) {
|
||||||
|
navLinksContainer.classList.remove('active');
|
||||||
|
mobileMenuBtn.classList.remove('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cerrar submenús al redimensionar a desktop
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
if (window.innerWidth > 768) {
|
||||||
|
const openSubmenus = document.querySelectorAll('.nav-item.open');
|
||||||
|
openSubmenus.forEach(submenu => {
|
||||||
|
submenu.classList.remove('open');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Scroll Animations
|
||||||
|
function setupScrollAnimations() {
|
||||||
|
const observerOptions = {
|
||||||
|
threshold: 0.1,
|
||||||
|
rootMargin: '0px 0px -100px 0px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.style.opacity = '1';
|
||||||
|
entry.target.style.transform = 'translateY(0)';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
const animatedElements = document.querySelectorAll('[data-aos]');
|
||||||
|
animatedElements.forEach(el => observer.observe(el));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Active Navigation Link on Scroll
|
||||||
|
function setupActiveNavOnScroll() {
|
||||||
|
const sections = document.querySelectorAll('section[id]');
|
||||||
|
const navLinks = document.querySelectorAll('.nav-link');
|
||||||
|
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
let current = '';
|
||||||
|
|
||||||
|
sections.forEach(section => {
|
||||||
|
const sectionTop = section.offsetTop;
|
||||||
|
const sectionHeight = section.clientHeight;
|
||||||
|
|
||||||
|
if (window.pageYOffset >= sectionTop - 100) {
|
||||||
|
current = section.getAttribute('id');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
navLinks.forEach(link => {
|
||||||
|
link.classList.remove('active');
|
||||||
|
if (link.getAttribute('href') === `#${current}`) {
|
||||||
|
link.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize everything when DOM is loaded
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
console.log('DOM loaded, initializing...');
|
||||||
|
|
||||||
|
// Initialize particle network with colors from data attribute or defaults
|
||||||
|
const canvas = document.getElementById('particleCanvas');
|
||||||
|
|
||||||
|
if (canvas) {
|
||||||
|
console.log('Canvas found, initializing particles...');
|
||||||
|
const particleColor = canvas.getAttribute('data-particle-color');
|
||||||
|
const lineColor = canvas.getAttribute('data-line-color');
|
||||||
|
|
||||||
|
const colorConfig = (particleColor && lineColor) ? {
|
||||||
|
particle: particleColor,
|
||||||
|
line: lineColor
|
||||||
|
} : null;
|
||||||
|
|
||||||
|
new ParticleNetwork(colorConfig);
|
||||||
|
} else {
|
||||||
|
console.error('Canvas not found!');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize text rotator
|
||||||
|
const textContainer = document.querySelector('.animated-text-container');
|
||||||
|
if (textContainer) {
|
||||||
|
console.log('Text container found, initializing rotator...');
|
||||||
|
new TextRotator('.animated-text-container');
|
||||||
|
} else {
|
||||||
|
console.warn('Text container not found');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Setup navigation
|
||||||
|
setupNavigation();
|
||||||
|
|
||||||
|
// Setup scroll animations
|
||||||
|
setupScrollAnimations();
|
||||||
|
|
||||||
|
// Setup active nav on scroll
|
||||||
|
setupActiveNavOnScroll();
|
||||||
|
|
||||||
|
setupMobileSubmenuClose();
|
||||||
|
|
||||||
|
console.log('Initialization complete!');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add parallax effect to hero section
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const hero = document.querySelector('.hero-content');
|
||||||
|
const scrolled = window.pageYOffset;
|
||||||
|
|
||||||
|
if (hero && scrolled < window.innerHeight) {
|
||||||
|
hero.style.transform = `translateY(${scrolled * 0.5}px)`;
|
||||||
|
hero.style.opacity = 1 - (scrolled / window.innerHeight);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// ============================================================
|
||||||
|
// Carrusel de Logos - Pausa al hover
|
||||||
|
// ============================================================
|
||||||
|
|
||||||
|
function setupLogoCarousel() {
|
||||||
|
const track = document.querySelector('.logo-track');
|
||||||
|
const logoItems = document.querySelectorAll('.logo-item');
|
||||||
|
|
||||||
|
if (!track) return;
|
||||||
|
|
||||||
|
// Pausar animación al hacer hover en cualquier logo
|
||||||
|
logoItems.forEach(item => {
|
||||||
|
item.addEventListener('mouseenter', () => {
|
||||||
|
track.style.animationPlayState = 'paused';
|
||||||
|
});
|
||||||
|
item.addEventListener('mouseleave', () => {
|
||||||
|
track.style.animationPlayState = 'running';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inicializar
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', setupLogoCarousel);
|
||||||
|
} else {
|
||||||
|
setupLogoCarousel();
|
||||||
|
}
|
||||||
|
// Cerrar submenú al seleccionar una opción (en móvil)
|
||||||
|
function setupMobileSubmenuClose() {
|
||||||
|
if (window.innerWidth <= 768) {
|
||||||
|
const dropdownLinks = document.querySelectorAll('.dropdown-link');
|
||||||
|
dropdownLinks.forEach(link => {
|
||||||
|
link.addEventListener('click', () => {
|
||||||
|
// Cerrar el submenú después de hacer clic
|
||||||
|
const navItem = link.closest('.nav-item');
|
||||||
|
if (navItem) {
|
||||||
|
navItem.classList.remove('open');
|
||||||
|
const toggleBtn = navItem.querySelector('.dropdown-toggle');
|
||||||
|
if (toggleBtn) {
|
||||||
|
toggleBtn.setAttribute('aria-expanded', 'false');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Opcional: cerrar también el menú principal si quieres
|
||||||
|
const navLinksContainer = document.getElementById('navLinks');
|
||||||
|
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
|
||||||
|
if (navLinksContainer && mobileMenuBtn && navLinksContainer.classList.contains('active')) {
|
||||||
|
navLinksContainer.classList.remove('active');
|
||||||
|
mobileMenuBtn.classList.remove('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// ============================================================
|
||||||
|
// Botón Flotante de WhatsApp con Transición Visual
|
||||||
|
// ============================================================
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const whatsappFloat = document.getElementById('whatsappFloat');
|
||||||
|
const heroSection = document.getElementById('home');
|
||||||
|
const navbar = document.querySelector('.navbar');
|
||||||
|
|
||||||
|
if (!whatsappFloat || !heroSection) return;
|
||||||
|
|
||||||
|
let currentState = 'large'; // 'large' o 'small'
|
||||||
|
let isTransitioning = false;
|
||||||
|
|
||||||
|
// Función para verificar si el elemento está en viewport
|
||||||
|
function isElementInViewport(el, offset = 0) {
|
||||||
|
const rect = el.getBoundingClientRect();
|
||||||
|
const windowHeight = window.innerHeight || document.documentElement.clientHeight;
|
||||||
|
return rect.top <= windowHeight - offset && rect.bottom >= offset;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Función para verificar si estamos en el hero
|
||||||
|
function isInHero() {
|
||||||
|
return isElementInViewport(heroSection, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Función para verificar si el usuario ha pasado el hero
|
||||||
|
function hasScrolledPastHero() {
|
||||||
|
const heroBottom = heroSection.getBoundingClientRect().bottom;
|
||||||
|
const navHeight = navbar ? navbar.offsetHeight : 80;
|
||||||
|
return heroBottom <= navHeight + 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Función principal para actualizar el estado con efecto visual
|
||||||
|
function updateWhatsAppButton() {
|
||||||
|
if (isTransitioning) return; // Evitar multiples disparos a la vez
|
||||||
|
|
||||||
|
const inHero = isInHero();
|
||||||
|
const scrolledPast = hasScrolledPastHero();
|
||||||
|
const newState = (inHero && !scrolledPast) ? 'large' : 'small';
|
||||||
|
|
||||||
|
// Solo cambiar si el estado es diferente
|
||||||
|
if (newState !== currentState) {
|
||||||
|
isTransitioning = true;
|
||||||
|
|
||||||
|
// 1. Iniciar teletransportación fuera
|
||||||
|
whatsappFloat.classList.add('teleporting-out');
|
||||||
|
|
||||||
|
// 2. Esperar a que desaparezca
|
||||||
|
setTimeout(() => {
|
||||||
|
// Limpiar clases de estado
|
||||||
|
whatsappFloat.classList.remove('large', 'small', 'teleporting-out', 'initial');
|
||||||
|
|
||||||
|
// Cambiar la posición instantaneamente siendo invisibles
|
||||||
|
whatsappFloat.classList.add(newState);
|
||||||
|
|
||||||
|
// 3. Iniciar teletransportación entrada
|
||||||
|
whatsappFloat.classList.add('teleporting-in');
|
||||||
|
currentState = newState;
|
||||||
|
|
||||||
|
// 4. Limpiar cuando termina
|
||||||
|
setTimeout(() => {
|
||||||
|
whatsappFloat.classList.remove('teleporting-in');
|
||||||
|
isTransitioning = false;
|
||||||
|
}, 400); // 400ms para aparecer
|
||||||
|
|
||||||
|
}, 300); // 300ms para desaparecer
|
||||||
|
|
||||||
|
// Log para debug (opcional)
|
||||||
|
console.log(`Botón teletransportado a: ${newState}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Throttle para mejor performance
|
||||||
|
let ticking = false;
|
||||||
|
let lastScrollY = window.scrollY;
|
||||||
|
let scrollDirection = 'down';
|
||||||
|
|
||||||
|
window.addEventListener('scroll', function () {
|
||||||
|
// Detectar dirección del scroll para efectos adicionales
|
||||||
|
const currentScrollY = window.scrollY;
|
||||||
|
scrollDirection = currentScrollY > lastScrollY ? 'down' : 'up';
|
||||||
|
lastScrollY = currentScrollY;
|
||||||
|
|
||||||
|
if (!ticking) {
|
||||||
|
requestAnimationFrame(function () {
|
||||||
|
updateWhatsAppButton();
|
||||||
|
ticking = false;
|
||||||
|
});
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Actualizar en resize
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
updateWhatsAppButton();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Actualizar en la carga inicial
|
||||||
|
updateWhatsAppButton();
|
||||||
|
|
||||||
|
// Efecto adicional: mostrar notificación visual cuando cambia de posición
|
||||||
|
// (opcional: agregar un pequeño badge que indique el cambio)
|
||||||
|
let hasShownNotification = false;
|
||||||
|
|
||||||
|
function showPositionNotification() {
|
||||||
|
if (hasShownNotification) return;
|
||||||
|
|
||||||
|
// Crear un pequeño indicador visual (opcional)
|
||||||
|
/*const notification = document.createElement('div');
|
||||||
|
notification.style.cssText = `
|
||||||
|
position: fixed;
|
||||||
|
bottom: 110px;
|
||||||
|
right: 110px;
|
||||||
|
background: rgba(110, 124, 181, 0.8);
|
||||||
|
color: white;
|
||||||
|
padding: 5px 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: 'Space Grotesk', sans-serif;
|
||||||
|
z-index: 999;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
`;*/
|
||||||
|
|
||||||
|
document.body.appendChild(notification);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
notification.style.opacity = '1';
|
||||||
|
setTimeout(() => {
|
||||||
|
notification.style.opacity = '0';
|
||||||
|
setTimeout(() => {
|
||||||
|
notification.remove();
|
||||||
|
}, 300);
|
||||||
|
}, 2000);
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
hasShownNotification = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mostrar notificación la primera vez que sale del hero
|
||||||
|
let hasTriggeredNotification = false;
|
||||||
|
|
||||||
|
function checkAndShowNotification() {
|
||||||
|
if (!hasTriggeredNotification && currentState === 'small') {
|
||||||
|
showPositionNotification();
|
||||||
|
hasTriggeredNotification = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Monitorear cambios de estado para la notificación
|
||||||
|
const observer = new MutationObserver(function (mutations) {
|
||||||
|
mutations.forEach(function (mutation) {
|
||||||
|
if (mutation.attributeName === 'class') {
|
||||||
|
checkAndShowNotification();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
observer.observe(whatsappFloat, { attributes: true });
|
||||||
|
});
|
||||||
+3193
File diff suppressed because it is too large
Load Diff
+419
@@ -0,0 +1,419 @@
|
|||||||
|
<!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="VettaCore - Infraestructura tecnológica robusta y escalable. Redes, servidores on-premise, seguridad CCTV, cloud híbrida, MikroTik, CCNA y continuidad de negocio.">
|
||||||
|
<meta name="keywords" content="infraestructura de redes, servidores on-premise, CCNA, MikroTik, CCTV, seguridad, cloud híbrida, VettaCore, VettaIO">
|
||||||
|
<title>VettaCore - Infraestructura de Redes y Servidores | 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">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Particle Network Canvas — VettaCore (azul) -->
|
||||||
|
<canvas id="particleCanvas"
|
||||||
|
data-particle-color="rgba(59, 130, 246, 0.6)"
|
||||||
|
data-line-color="rgba(59, 130, 246, 0.15)"></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>
|
||||||
|
|
||||||
|
<!-- 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 — VettaCore
|
||||||
|
============================================================ -->
|
||||||
|
<section class="subpage-hero">
|
||||||
|
<div class="container">
|
||||||
|
<a href="index.html" class="back-link back-link--core">
|
||||||
|
<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="15 18 9 12 15 6"></polyline>
|
||||||
|
</svg>
|
||||||
|
Volver al inicio
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="subpage-icon">
|
||||||
|
<img src="img/icon_core.png" alt="VettaCore">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="subpage-lead">
|
||||||
|
Infraestructura de redes y servidores — la columna vertebral de tu negocio
|
||||||
|
</p>
|
||||||
|
<p class="subpage-body">
|
||||||
|
En VettaCore diseñamos, implementamos y gestionamos infraestructuras tecnológicas robustas. <strong>Especialistas en redes on-premise, servidores de alto rendimiento y soluciones de seguridad integral</strong> (CCTV, control de acceso). Contamos con certificaciones <strong>CCNA</strong> y <strong>MikroTik</strong> que garantizan la calidad de nuestro trabajo. También integramos cloud híbrida cuando tu negocio lo necesita.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
Certifications Banner
|
||||||
|
============================================================ -->
|
||||||
|
<section class="certifications-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="cert-banner">
|
||||||
|
<div class="cert-item">
|
||||||
|
<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="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>
|
||||||
|
<span>Certificación CCNA</span>
|
||||||
|
</div>
|
||||||
|
<div class="cert-item">
|
||||||
|
<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="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>
|
||||||
|
<span>Certificación MTCNA</span>
|
||||||
|
</div>
|
||||||
|
<div class="cert-item">
|
||||||
|
<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="M20 12V8H4v4M12 4v4M4 12v4a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4v-4"></path>
|
||||||
|
</svg>
|
||||||
|
<span>+10 años de experiencia</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
Features — VettaCore (8 tarjetas)
|
||||||
|
============================================================ -->
|
||||||
|
<section class="features-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="features-section-title">
|
||||||
|
Nuestros <span class="text-gradient-core">Servicios</span>
|
||||||
|
</h2>
|
||||||
|
<p class="features-section-subtitle">Soluciones integrales de infraestructura on-premise y cloud híbrida</p>
|
||||||
|
|
||||||
|
<div class="feature-grid">
|
||||||
|
<div class="feature-item feature-item--core">
|
||||||
|
<h3>Diseño y Cableado Estructurado</h3>
|
||||||
|
<p>Diseño e implementación de redes LAN/WAN, cableado estructurado categoría 6/6A, fibra óptica y certificación de instalaciones.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item feature-item--core">
|
||||||
|
<h3>Routing & Switching Avanzado</h3>
|
||||||
|
<p>Configuración de routers y switches Cisco, MikroTik. VLANs, OSPF, BGP, MPLS y alta disponibilidad. <strong>Certificación CCNA y MTCNA.</strong></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item feature-item--core">
|
||||||
|
<h3>Servidores On-Premise</h3>
|
||||||
|
<p>Implementación de servidores físicos (Dell, HP, Lenovo). Virtualización con VMware, Hyper-V o Proxmox. Almacenamiento SAN/NAS y backup local.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item feature-item--core">
|
||||||
|
<h3>Seguridad Perimetral y CCTV</h3>
|
||||||
|
<p>Firewalls empresariales (Fortinet, Palo Alto, MikroTik). Sistemas de videovigilancia IP, cámaras 4K, NVR, análisis de video y control de acceso biométrico. Instalación y mantenimiento.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item feature-item--core">
|
||||||
|
<h3>Cloud Híbrida</h3>
|
||||||
|
<p>Integración selectiva con AWS, Azure o Google Cloud. Sincronización de datos, backups en la nube y arquitecturas multi-cloud cuando es necesario.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item feature-item--core">
|
||||||
|
<h3>Monitoreo y Gestión Remota</h3>
|
||||||
|
<p>Monitoreo 24/7 de tu infraestructura. Alertas proactivas, gestión remota de equipos y resolución de incidentes antes que afecten tu negocio.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- NUEVA TARJETA 7: Wi-Fi Empresarial -->
|
||||||
|
<div class="feature-item feature-item--core">
|
||||||
|
<h3>Wi-Fi Empresarial</h3>
|
||||||
|
<p>Diseño e implementación de redes inalámbricas de alta densidad. Controladores, access points, roaming seamless y autenticación 802.1X.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- NUEVA TARJETA 8: Recuperación ante Desastres -->
|
||||||
|
<div class="feature-item feature-item--core">
|
||||||
|
<h3>Disaster Recovery & BCP</h3>
|
||||||
|
<p>Planes de continuidad de negocio, backups automatizados (local + cloud), replicación de servidores y recuperación rápida ante fallos.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
Infraestructura Section — Soluciones detalladas
|
||||||
|
============================================================ -->
|
||||||
|
<section class="infra-solutions">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Soluciones de <span class="text-gradient-core">Infraestructura</span></h2>
|
||||||
|
<p class="section-subtitle">Cobertura completa para tu empresa</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="solutions-grid">
|
||||||
|
<div class="solution-card">
|
||||||
|
<div class="solution-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">
|
||||||
|
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
|
||||||
|
<line x1="8" y1="21" x2="16" y2="21"></line>
|
||||||
|
<line x1="12" y1="17" x2="12" y2="21"></line>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Centro de Datos On-Premise</h3>
|
||||||
|
<p>Diseño y construcción de salas de servidores. Climatización, UPS, generadores, PDU y sistemas de extinción de incendios.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="solution-card">
|
||||||
|
<div class="solution-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">
|
||||||
|
<circle cx="12" cy="12" r="2"></circle>
|
||||||
|
<path d="M2 12h2M20 12h2M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Redes Industriales</h3>
|
||||||
|
<p>Infraestructura para entornos industriales. Switches, fibra óptica, TCP/IP y segmentación OT/IT.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="solution-card">
|
||||||
|
<div class="solution-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="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>VPN y Acceso Remoto Seguro</h3>
|
||||||
|
<p>Implementación de VPN site-to-site y SSL VPN para teletrabajo. Autenticación multi-factor y políticas de acceso granular.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="solution-card">
|
||||||
|
<div class="solution-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="M20 12V8H4v4M12 4v4M4 12v4a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4v-4"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Migración a Cloud Híbrida</h3>
|
||||||
|
<p>Evaluamos qué debe quedarse on-premise y qué puede ir a la nube. Migraciones seguras sin downtime.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
Tecnologías que manejamos - Carrusel de Logos
|
||||||
|
============================================================ -->
|
||||||
|
<section class="tech-stack-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="tech-stack-header">
|
||||||
|
<h2>Tecnologías que <span class="text-gradient-core">dominamos</span></h2>
|
||||||
|
<p>Hardware y software con los que trabajamos diariamente</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Carrusel de logos sin marcos -->
|
||||||
|
<div class="logo-carousel">
|
||||||
|
<div class="logo-track" id="logoTrack">
|
||||||
|
<!-- Logos - Redes -->
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/cisco.png" alt="Cisco logo">
|
||||||
|
</div>
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/mikrotik.png" alt="MikroTik logo">
|
||||||
|
</div>
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/ubiquiti.png" alt="Ubiquiti logo">
|
||||||
|
</div>
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/fortinet.png" alt="Fortinet logo">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Logos - Servidores -->
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/dell.png" alt="Dell logo">
|
||||||
|
</div>
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/hp.png" alt="HP logo">
|
||||||
|
</div>
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/lenovo.png" alt="Lenovo logo">
|
||||||
|
</div>
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/vmware.png" alt="VMware logo">
|
||||||
|
</div>
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/hyperv.png" alt="Hyper-V logo">
|
||||||
|
</div>
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/proxmox.png" alt="Proxmox logo">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Logos - Seguridad y CCTV -->
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/hikvision.png" alt="Hikvision logo">
|
||||||
|
</div>
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/dahua.png" alt="Dahua logo">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Logos - Cloud y Backups -->
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/aws.png" alt="AWS logo">
|
||||||
|
</div>
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/azure.png" alt="Azure logo">
|
||||||
|
</div>
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/veeam.png" alt="Veeam logo">
|
||||||
|
</div>
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/zabbix.png" alt="Zabbix logo">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Duplicado para efecto infinito -->
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/cisco.png" alt="Cisco logo">
|
||||||
|
</div>
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/mikrotik.png" alt="MikroTik logo">
|
||||||
|
</div>
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/ubiquiti.png" alt="Ubiquiti logo">
|
||||||
|
</div>
|
||||||
|
<div class="logo-item">
|
||||||
|
<img src="img/marcas/fortinet.png" alt="Fortinet logo">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
Beneficios de trabajar con VettaCore
|
||||||
|
============================================================ -->
|
||||||
|
<section class="benefits-section-core">
|
||||||
|
<div class="container">
|
||||||
|
<div class="benefits-core-grid">
|
||||||
|
<div class="benefit-core-item">
|
||||||
|
<div class="benefit-core-number">+10</div>
|
||||||
|
<p>años de experiencia en infraestructura</p>
|
||||||
|
</div>
|
||||||
|
<div class="benefit-core-item">
|
||||||
|
<div class="benefit-core-number">99.9%</div>
|
||||||
|
<p>disponibilidad garantizada</p>
|
||||||
|
</div>
|
||||||
|
<div class="benefit-core-item">
|
||||||
|
<div class="benefit-core-number">24/7</div>
|
||||||
|
<p>monitoreo y soporte</p>
|
||||||
|
</div>
|
||||||
|
<div class="benefit-core-item">
|
||||||
|
<div class="benefit-core-number">100+</div>
|
||||||
|
<p>clientes satisfechos</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
CTA — VettaCore
|
||||||
|
============================================================ -->
|
||||||
|
<section class="cta-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="cta-box cta-box--core">
|
||||||
|
<h2>¿Necesitas una infraestructura <span class="text-gradient-core">sólida y confiable?</span></h2>
|
||||||
|
<p>Diseñamos la columna vertebral tecnológica que tu empresa merece</p>
|
||||||
|
<a href="contacto.html" class="btn btn-primary">
|
||||||
|
Consultar por tu 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>
|
||||||
|
</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#iot-solutions">Soluciones IoT</a></li>
|
||||||
|
<li><a href="index.html#divisions">Consultoría</a></li>
|
||||||
|
<li><a href="contacto.html">Soporte 24/7</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>
|
||||||
|
document.getElementById("year").textContent = new Date().getFullYear();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+685
@@ -0,0 +1,685 @@
|
|||||||
|
<!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="VettaFlex - Automatización inteligente de procesos. RPA, integraciones API, pipelines de datos, CI/CD y automatización IoT para tu negocio.">
|
||||||
|
<meta name="keywords" content="automatización, IoT, RPA, integraciones API, pipelines de datos, CI/CD, VettaFlex, VettaIO">
|
||||||
|
<title>VettaFlex - Automatización Inteligente e IoT | 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">
|
||||||
|
<style>
|
||||||
|
/* Estilos adicionales para la nueva sección de soluciones y diferencial competitivo */
|
||||||
|
.solutions-section {
|
||||||
|
padding: 80px 0;
|
||||||
|
background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%);
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.solutions-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 48px;
|
||||||
|
}
|
||||||
|
.solutions-header .section-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
.solutions-header .section-subtitle {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
opacity: 0.8;
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.solutions-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||||
|
gap: 32px;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
.solution-card {
|
||||||
|
background: rgba(10, 20, 20, 0.65);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
border-radius: 28px;
|
||||||
|
border: 1px solid rgba(16, 185, 129, 0.25);
|
||||||
|
padding: 28px 24px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
.solution-card:hover {
|
||||||
|
border-color: rgba(16, 185, 129, 0.6);
|
||||||
|
transform: translateY(-6px);
|
||||||
|
background: rgba(16, 185, 129, 0.05);
|
||||||
|
box-shadow: 0 20px 35px -12px rgba(0,0,0,0.4);
|
||||||
|
}
|
||||||
|
.solution-title {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
background: linear-gradient(135deg, #fff, #10b981);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
.solution-sub {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #10b981;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-left: 3px solid #10b981;
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
.solution-desc {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
.solution-details {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 18px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
.detail-block h4 {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
color: #10b981;
|
||||||
|
}
|
||||||
|
.detail-block h4 svg {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
stroke: #10b981;
|
||||||
|
}
|
||||||
|
.detail-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.detail-list li {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
padding: 4px 0 4px 20px;
|
||||||
|
position: relative;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
.detail-list li::before {
|
||||||
|
content: "▹";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
color: #10b981;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
.ideal-tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
.ideal-tag {
|
||||||
|
background: rgba(16, 185, 129, 0.15);
|
||||||
|
border-radius: 40px;
|
||||||
|
padding: 4px 12px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #10b981;
|
||||||
|
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||||
|
}
|
||||||
|
.diferencial-section {
|
||||||
|
margin-top: 40px;
|
||||||
|
background: linear-gradient(115deg, rgba(16, 185, 129, 0.08) 0%, rgba(2, 44, 34, 0.5) 100%);
|
||||||
|
border-radius: 48px;
|
||||||
|
padding: 48px 40px;
|
||||||
|
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
}
|
||||||
|
.diferencial-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
.diferencial-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
.diferencial-item {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 180px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
border-radius: 28px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.diferencial-item:hover {
|
||||||
|
background: rgba(16, 185, 129, 0.1);
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
.diferencial-icon {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.diferencial-item h4 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #10b981;
|
||||||
|
}
|
||||||
|
.diferencial-item p {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.solutions-grid { grid-template-columns: 1fr; }
|
||||||
|
.diferencial-section { padding: 32px 20px; }
|
||||||
|
.solutions-header .section-title { font-size: 2rem; }
|
||||||
|
}
|
||||||
|
/* Ajuste para mantener consistencia con gradientes existentes */
|
||||||
|
.text-gradient-flex {
|
||||||
|
background: linear-gradient(135deg, #10b981, #34d399);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
.solution-card .btn-dummy {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 16px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #10b981;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Particle Network Canvas — VettaFlex (verde) -->
|
||||||
|
<canvas id="particleCanvas"
|
||||||
|
data-particle-color="rgba(16, 185, 129, 0.6)"
|
||||||
|
data-line-color="rgba(16, 185, 129, 0.15)"></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>
|
||||||
|
|
||||||
|
<!-- 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" width="20" height="20" 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">Contacto</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Abrir menú">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
Hero — VettaFlex
|
||||||
|
============================================================ -->
|
||||||
|
<section class="subpage-hero">
|
||||||
|
<div class="container">
|
||||||
|
<a href="index.html" class="back-link back-link--flex">
|
||||||
|
<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="15 18 9 12 15 6"></polyline>
|
||||||
|
</svg>
|
||||||
|
Volver al inicio
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="subpage-icon">
|
||||||
|
<img src="img/icon_flex.png" alt="VettaFlex">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="subpage-lead">
|
||||||
|
Automatización inteligente que potencia tu productividad conectando procesos digitales y dispositivos IoT
|
||||||
|
</p>
|
||||||
|
<p class="subpage-body">
|
||||||
|
VettaFlex transforma procesos manuales en flujos automatizados eficientes. Desde integraciones entre sistemas hasta la orquestación de dispositivos IoT, liberamos a tu equipo de tareas repetitivas para que se enfoquen en lo que realmente importa. <strong>Automatizamos tanto tu software como tu hardware.</strong>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
Features — VettaFlex (8 tarjetas)
|
||||||
|
============================================================ -->
|
||||||
|
<section class="features-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="features-section-title">
|
||||||
|
Nuestros <span class="text-gradient-flex">Servicios</span>
|
||||||
|
</h2>
|
||||||
|
<p class="features-section-subtitle">Automatización end-to-end para tu negocio digital e industrial</p>
|
||||||
|
|
||||||
|
<div class="feature-grid">
|
||||||
|
<div class="feature-item feature-item--flex">
|
||||||
|
<h3>Automatización de Procesos</h3>
|
||||||
|
<p>Automatizamos procesos de negocio complejos. Automatización y orquestación de tareas digitales e industriales.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item feature-item--flex">
|
||||||
|
<h3>API Integration</h3>
|
||||||
|
<p>Conectamos tus sistemas y aplicaciones. Integraciones con base da datos y plataformas IoT.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item feature-item--flex">
|
||||||
|
<h3>Data Pipelines</h3>
|
||||||
|
<p>ETL/ELT automatizado, procesamiento de datos en tiempo real desde sensores IoT y data warehousing inteligente.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item feature-item--flex">
|
||||||
|
<h3>Dispositivos IoT</h3>
|
||||||
|
<p>Orquestación de dispositivos IoT: sensores, actuadores, gateways. Gestión remota, actualizaciones OTA y monitoreo en tiempo real.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item feature-item--flex">
|
||||||
|
<h3>Sistemas de Notificación</h3>
|
||||||
|
<p>Sistemas de alertas y notificaciones inteligentes. Email, SMS, Slack, Teams activados por eventos de sensores.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item feature-item--flex">
|
||||||
|
<h3>Planificación de Tareas</h3>
|
||||||
|
<p>Tareas programadas, cron jobs avanzados y procesamiento batch automatizado para lecturas periódicas de sensores.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item feature-item--flex">
|
||||||
|
<h3>Agentes a Medida</h3>
|
||||||
|
<p>Agentes con capacidades específicas para tareas particulares en entornos empresariales. Conocomienta de tus procesos y necesidades.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item feature-item--flex">
|
||||||
|
<h3>MQTT & Edge Computing</h3>
|
||||||
|
<p>Procesamiento de datos en el borde, brokers MQTT, integración con protocolos industriales (Modbus, OPC UA) y análisis en tiempo real.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
Casos de Uso: IoT + Automation
|
||||||
|
============================================================ -->
|
||||||
|
<section class="iot-automation-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Casos de Uso: <span class="text-gradient-flex">IoT + IA</span></h2>
|
||||||
|
<p class="section-subtitle">Cómo conectamos el mundo físico con tu estrategia digital</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="use-cases-grid">
|
||||||
|
<!--Agricultura Inteligente -->
|
||||||
|
<div class="use-case-card">
|
||||||
|
<div class="use-case-icon">
|
||||||
|
<img src="img/marcas/agricultura_inteligente.png" alt="Agricultura Inteligente" width="37" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
</div>
|
||||||
|
<h3>Agricultura Inteligente</h3>
|
||||||
|
<div class="solution-sub">Sistema de Riego Inteligente con IA</div>
|
||||||
|
<p>Solución integral para automatizar y optimizar el riego mediante sensores, datos clímaticos y modelos inteligentes.</p>
|
||||||
|
<div class="solution-details">
|
||||||
|
<div class="detail-block">
|
||||||
|
<h4>
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
|
||||||
|
Qué incluye
|
||||||
|
</h4>
|
||||||
|
<ul class="detail-list">
|
||||||
|
<li>Sensores IoT (humedad, pH, temperatura del suelo)</li>
|
||||||
|
<li>Control automático de bombas y válvulas</li>
|
||||||
|
<li>Integración con datos meteorológicos</li>
|
||||||
|
<li>Plataforma web con dashboards en tiempo real</li>
|
||||||
|
<li>Algoritmos de IA para planificación de riego</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-block">
|
||||||
|
<h4>
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<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"/>
|
||||||
|
</svg>
|
||||||
|
Beneficios
|
||||||
|
</h4>
|
||||||
|
<ul class="detail-list">
|
||||||
|
<li>Ahorro de agua</li>
|
||||||
|
<li>Optimización del uso de energía</li>
|
||||||
|
<li>Mejora del rendimiento productivo</li>
|
||||||
|
<li>Decisiones basadas en datos</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-block"></div>
|
||||||
|
</div>
|
||||||
|
<div class="tech-tags"><span>Campos Agrícolas</span><span>Invernaderos</span><span>Cultivos intensivos</span></div>
|
||||||
|
</div>
|
||||||
|
<!--Control de Temperatura -->
|
||||||
|
<div class="use-case-card">
|
||||||
|
<div class="use-case-icon">
|
||||||
|
<img src="img/marcas/control_temperatura.png" alt="Control de Temperatura" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
</div>
|
||||||
|
<h3>Control de Cadena de Frío</h3>
|
||||||
|
<div class="solution-sub">Monitoreo de Cámaras Frigoríficas</div>
|
||||||
|
<p>Sistemas de monitoreo continuo para garantizar la calidad de productos refrigerados.</p>
|
||||||
|
<div class="solution-details">
|
||||||
|
<div class="detail-block">
|
||||||
|
<h4>
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
|
||||||
|
Qué incluye
|
||||||
|
</h4>
|
||||||
|
<ul class="detail-list">
|
||||||
|
<li>Sensores IoT de temperatura y humedad</li>
|
||||||
|
<li>Alertas en tiempo real(app, email, sms)</li>
|
||||||
|
<li>Registro historico de condiciones</li>
|
||||||
|
<li>Reportes automáticos</li>
|
||||||
|
<li>IA para detección de anomalias</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-block">
|
||||||
|
<h4>
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<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"/>
|
||||||
|
</svg>
|
||||||
|
Beneficios
|
||||||
|
</h4>
|
||||||
|
<ul class="detail-list">
|
||||||
|
<li>Prevención de pérdidas</li>
|
||||||
|
<li>Cumplimiento sanitario</li>
|
||||||
|
<li>Control total 24/7</li>
|
||||||
|
<li>Trazabilidad completa</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-block"></div>
|
||||||
|
</div>
|
||||||
|
<div class="tech-tags"><span>Carnicerias</span><span>Frigoríficos</span><span>Distribución de alimentos</span></div>
|
||||||
|
</div>
|
||||||
|
<!-- Alertas Meteorológicas-->
|
||||||
|
<div class="use-case-card">
|
||||||
|
<div class="use-case-icon">
|
||||||
|
<img src="img/marcas/tormentas.png" alt="Alertas Meteorológicas" width="40" height="37" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
</div>
|
||||||
|
<h3>Alertas Meteorológicas</h3>
|
||||||
|
<div class="solution-sub">Monitoreo de Condiciones Climáticas</div>
|
||||||
|
<p>Sistemas de alerta temprana para condiciones climáticas extremas para evitar exposicion de personas.</p>
|
||||||
|
<div class="solution-details">
|
||||||
|
<div class="detail-block">
|
||||||
|
<h4>
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
|
||||||
|
Qué incluye
|
||||||
|
</h4>
|
||||||
|
<ul class="detail-list">
|
||||||
|
<li>Semáforos de Alerta Visual (amarillo/naranja/rojo)</li>
|
||||||
|
<li>Telemtría</li>
|
||||||
|
<li>Panel centralizado de control</li>
|
||||||
|
<li>Integración de datos metereológicos en tiempo real</li>
|
||||||
|
<li>IA para predicción de eventos climáticos</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-block">
|
||||||
|
<h4>
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<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"/>
|
||||||
|
</svg>
|
||||||
|
Beneficios
|
||||||
|
</h4>
|
||||||
|
<ul class="detail-list">
|
||||||
|
<li>Reducción de riesgos</li>
|
||||||
|
<li>Protección de vidas</li>
|
||||||
|
<li>Respuesta inmediata ante eventos climáticos</li>
|
||||||
|
<li>Historial de alertas y análisis</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-block"></div>
|
||||||
|
</div>
|
||||||
|
<div class="tech-tags"><span>Mineras</span><span>Obras en Altura</span><span>Campamentos remotos</span></div>
|
||||||
|
</div>
|
||||||
|
<!--Seguridad Patrimonial -->
|
||||||
|
<div class="use-case-card">
|
||||||
|
<div class="use-case-icon">
|
||||||
|
<img src="img/marcas/seguridad_patrimonial.png" alt="Seguridad Patrimonial" width="35" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
</div>
|
||||||
|
<h3>Seguridad Patrimonial</h3>
|
||||||
|
<div class="solution-sub">Sistema de Rondines Digitales con Evidencia</div>
|
||||||
|
<p>Plataforma para control y auditoría de rondas de seguridad en instalaciones.</p>
|
||||||
|
<div class="solution-details">
|
||||||
|
<div class="detail-block">
|
||||||
|
<h4>
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
|
||||||
|
Qué incluye
|
||||||
|
</h4>
|
||||||
|
<ul class="detail-list">
|
||||||
|
<li>Tags NFC / QR en puntos de control</li>
|
||||||
|
<li>App móvil para guardias</li>
|
||||||
|
<li>Registro de recorridos en tiempo real</li>
|
||||||
|
<li>Carga de fotos, observaciones y eventos</li>
|
||||||
|
<li>Generación automática de reportes</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-block">
|
||||||
|
<h4>
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<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"/>
|
||||||
|
</svg>
|
||||||
|
Beneficios
|
||||||
|
</h4>
|
||||||
|
<ul class="detail-list">
|
||||||
|
<li>Control total de rondas de vigilancia</li>
|
||||||
|
<li>Evidencia verificable</li>
|
||||||
|
<li>Mejoras en la gestión de la seguridad</li>
|
||||||
|
<li>Reducción de errores humanos</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-block"></div>
|
||||||
|
</div>
|
||||||
|
<div class="tech-tags"><span>Fábricas</span><span>Depósitos</span><span>Parques Industriales</span></div>
|
||||||
|
</div>
|
||||||
|
<!--Gestión de Energía-->
|
||||||
|
<div class="use-case-card">
|
||||||
|
<div class="use-case-icon">
|
||||||
|
<img src="img/marcas/energia.png" alt="Control de Temperatura" width="40" height="37" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
</div>
|
||||||
|
<h3>Gestión de Energía</h3>
|
||||||
|
<div class="solution-sub">Sistema de Control y Continuidad Energética</div>
|
||||||
|
<p>Solución para garantizar el suministro eléctrico continuo en nodos críticos.</p>
|
||||||
|
<div class="solution-details">
|
||||||
|
<div class="detail-block">
|
||||||
|
<h4>
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
|
||||||
|
Qué incluye
|
||||||
|
</h4>
|
||||||
|
<ul class="detail-list">
|
||||||
|
<li>Controlador IoT de energía</li>
|
||||||
|
<li>Monitoreo de múltiples fuentes de energía</li>
|
||||||
|
<li>Lógicas automáticas de conmutación</li>
|
||||||
|
<li>Dashboard en tiempo real</li>
|
||||||
|
<li>Alertas y registros de eventos</li>
|
||||||
|
<li>IA para optimización del consumo energético</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-block">
|
||||||
|
<h4>
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<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"/>
|
||||||
|
</svg>
|
||||||
|
Beneficios
|
||||||
|
</h4>
|
||||||
|
<ul class="detail-list">
|
||||||
|
<li>Alta disponibilidad</li>
|
||||||
|
<li>Reducción de fallas críticas</li>
|
||||||
|
<li>Optimización energética</li>
|
||||||
|
<li>Control centralizado</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-block"></div>
|
||||||
|
</div>
|
||||||
|
<div class="tech-tags"><span>DataCenters</span><span>Instalaciones Industriales</span><span>Infraestructura Crítica</span></div>
|
||||||
|
</div>
|
||||||
|
<!--Manteniiento Predictivo-->
|
||||||
|
<div class="use-case-card">
|
||||||
|
<div class="use-case-icon">
|
||||||
|
<img src="img/marcas/mantenimiento.png" alt="Mantenimiento Predictivo" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
</div>
|
||||||
|
<h3>Mantenimiento Predictivo</h3>
|
||||||
|
<div class="solution-sub">Sistema de Monitoreo y Mantenimiento Inteligente</div>
|
||||||
|
<p>Sistema inteligente para anticipar fallas en equipos industriales mediante monitoreo continuo.</p>
|
||||||
|
<div class="solution-details">
|
||||||
|
<div class="detail-block">
|
||||||
|
<h4>
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
|
||||||
|
Qué incluye
|
||||||
|
</h4>
|
||||||
|
<ul class="detail-list">
|
||||||
|
<li>Sensores IoT para monitoreo de estado</li>
|
||||||
|
<li>Análisis de datos en tiempo real</li>
|
||||||
|
<li>Modelos predictivos de fallas</li>
|
||||||
|
<li>Planificación automática de mantenimiento</li>
|
||||||
|
<li>Dashboard de seguimiento y reportes</li>
|
||||||
|
<li>Integración con sistemas de gestión de activos</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-block">
|
||||||
|
<h4>
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<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"/>
|
||||||
|
</svg>
|
||||||
|
Beneficios
|
||||||
|
</h4>
|
||||||
|
<ul class="detail-list">
|
||||||
|
<li>Reducción de tiempos de inactividad</li>
|
||||||
|
<li>Disminución de fallas críticas</li>
|
||||||
|
<li>Reducción de costos de mantenimiento</li>
|
||||||
|
<li>Optimización de paradas técnicas</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="detail-block"></div>
|
||||||
|
</div>
|
||||||
|
<div class="tech-tags"><span>Vehiculos Pesados</span><span>Talleres Mecánicos</span><span>Motores Industriales</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
Arquitectura IoT Section
|
||||||
|
============================================================ -->
|
||||||
|
<section class="iot-architecture">
|
||||||
|
<div class="container">
|
||||||
|
<div class="architecture-content">
|
||||||
|
<div class="architecture-text">
|
||||||
|
<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">
|
||||||
|
<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>
|
||||||
|
</svg>
|
||||||
|
Arquitectura IoT
|
||||||
|
</div>
|
||||||
|
<h2 class="architecture-title">Tu ecosistema IoT <span class="text-gradient-flex">completamente automatizado</span></h2>
|
||||||
|
<p class="architecture-description">Diseñamos e implementamos la capa de conectividad entre tus dispositivos físicos y tus sistemas digitales, creando un flujo de datos automatizado y accionable.</p>
|
||||||
|
<div class="architecture-stack">
|
||||||
|
<div class="stack-item"><strong>01. Edge Layer</strong><p>Sensores, actuadores, gateways y dispositivos IoT con procesamiento local.</p></div>
|
||||||
|
<div class="stack-item"><strong>02. Connectivity</strong><p>Protocolos MQTT, HTTP, WebSockets, LoRaWAN, Sigfox, 5G, LTE-M.</p></div>
|
||||||
|
<div class="stack-item"><strong>03. Orchestration</strong><p>Automatización de reglas, workflows, eventos y alertas en tiempo real.</p></div>
|
||||||
|
<div class="stack-item"><strong>04. Integration</strong><p>Conexión con tu ERP, CRM, dashboards y sistemas legacy mediante APIs.</p></div>
|
||||||
|
</div>
|
||||||
|
<a href="contacto.html" class="btn btn-primary">Implementar IoT en mi empresa <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg></a>
|
||||||
|
</div>
|
||||||
|
<div class="architecture-visual">
|
||||||
|
<div class="iot-visual"><div class="iot-node node-1"></div><div class="iot-node node-2"></div><div class="iot-node node-3"></div><div class="iot-node node-4"></div><div class="iot-connections"></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
Beneficios Section
|
||||||
|
============================================================ -->
|
||||||
|
<section class="benefits-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">¿Por qué <span class="text-gradient-flex">VettaFlex + IoT?</span></h2>
|
||||||
|
<p class="section-subtitle">Automatización que transforma datos en acciones</p>
|
||||||
|
</div>
|
||||||
|
<div class="benefits-grid">
|
||||||
|
<div class="benefit-item"><div class="benefit-number">01</div><h3>Reducción de costos operativos</h3><p>Automatiza tareas manuales y optimiza recursos con monitoreo inteligente.</p></div>
|
||||||
|
<div class="benefit-item"><div class="benefit-number">02</div><h3>Toma de decisiones en tiempo real</h3><p>Dashboards y alertas basadas en datos actualizados de tus sensores y sistemas.</p></div>
|
||||||
|
<div class="benefit-item"><div class="benefit-number">03</div><h3>Escalabilidad garantizada</h3><p>Arquitecturas que crecen contigo, desde decenas hasta miles de dispositivos.</p></div>
|
||||||
|
<div class="benefit-item"><div class="benefit-number">04</div><h3>Integración con tus sistemas actuales</h3><p>Conectamos IoT con tu ERP, CRM o cualquier software legacy mediante APIs.</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
CTA — VettaFlex
|
||||||
|
============================================================ -->
|
||||||
|
<section class="cta-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="cta-box cta-box--flex">
|
||||||
|
<h2>¿Listo para <span class="text-gradient-flex">automatizar</span> tu negocio y conectar el mundo físico?</h2>
|
||||||
|
<p>Conversemos sobre cómo podemos optimizar tus procesos digitales e industriales</p>
|
||||||
|
<a href="contacto.html" class="btn btn-primary">
|
||||||
|
Contactar ahora
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="9 18 15 12 9 6"></polyline>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</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#iot-solutions">Soluciones IoT</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>
|
||||||
|
document.getElementById("year").textContent = new Date().getFullYear();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+410
@@ -0,0 +1,410 @@
|
|||||||
|
<!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="VettaMind - Inteligencia Artificial aplicada a tu negocio. Machine Learning, NLP, Computer Vision, IA + IoT y soluciones para PYMES.">
|
||||||
|
<meta name="keywords" content="inteligencia artificial, machine learning, IA para PYMES, IoT, computer vision, NLP, VettaMind, VettaIO">
|
||||||
|
<title>VettaMind - Inteligencia Artificial | 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">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Particle Network Canvas — VettaMind (violeta) -->
|
||||||
|
<canvas id="particleCanvas"
|
||||||
|
data-particle-color="rgba(139, 92, 246, 0.6)"
|
||||||
|
data-line-color="rgba(139, 92, 246, 0.15)"></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>
|
||||||
|
|
||||||
|
<!-- 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 — VettaMind
|
||||||
|
============================================================ -->
|
||||||
|
<section class="subpage-hero">
|
||||||
|
<div class="container">
|
||||||
|
<a href="index.html" class="back-link back-link--mind">
|
||||||
|
<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="15 18 9 12 15 6"></polyline>
|
||||||
|
</svg>
|
||||||
|
Volver al inicio
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="subpage-icon">
|
||||||
|
<img src="img/icon_mind.png" alt="VettaMind">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="subpage-lead">
|
||||||
|
Inteligencia Artificial que transforma datos en decisiones para industrias y PYMES
|
||||||
|
</p>
|
||||||
|
<p class="subpage-body">
|
||||||
|
VettaMind desarrolla soluciones de IA personalizadas que resuelven problemas de negocio reales.
|
||||||
|
Desde modelos predictivos para fábricas hasta asistentes inteligentes para comercios,
|
||||||
|
convertimos tus datos en ventajas competitivas concretas. <strong>IA accesible, práctica y con resultados medibles.</strong>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
Features — VettaMind (8 tarjetas)
|
||||||
|
============================================================ -->
|
||||||
|
<section class="features-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="features-section-title">
|
||||||
|
Nuestros <span class="text-gradient-mind">Servicios</span>
|
||||||
|
</h2>
|
||||||
|
<p class="features-section-subtitle">IA práctica y aplicada a tu negocio</p>
|
||||||
|
|
||||||
|
<div class="feature-grid">
|
||||||
|
<div class="feature-item feature-item--mind">
|
||||||
|
<h3>Machine Learning Custom</h3>
|
||||||
|
<p>Desarrollamos modelos de ML personalizados para tus casos de uso. Clasificación, regresión, clustering y series temporales.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item feature-item--mind">
|
||||||
|
<h3>Natural Language Processing</h3>
|
||||||
|
<p>Análisis de sentimientos, chatbots inteligentes, extracción de información y procesamiento de documentos.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item feature-item--mind">
|
||||||
|
<h3>Computer Vision</h3>
|
||||||
|
<p>Detección de objetos, reconocimiento facial, OCR avanzado e inspección visual automatizada.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item feature-item--mind">
|
||||||
|
<h3>Analisis Predictivo</h3>
|
||||||
|
<p>Forecasting de ventas, detección de anomalías, análisis de riesgo y optimización predictiva.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item feature-item--mind">
|
||||||
|
<h3>Sistemas de Recomendación</h3>
|
||||||
|
<p>Algoritmos de recomendación personalizados, filtramos sobrecarga de información para ofrecer al usuario contenido relevante.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item feature-item--mind">
|
||||||
|
<h3>MLOps & Model Deployment</h3>
|
||||||
|
<p>Despliegue, monitoreo y reentrenamiento de modelos en producción. Pipelines automatizados.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item feature-item--mind">
|
||||||
|
<h3>IA para PYMES</h3>
|
||||||
|
<p>Soluciones accesibles y de alto impacto: automatización de respuestas, análisis de ventas, predicción de demanda y optimización de inventario.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-item feature-item--mind">
|
||||||
|
<h3>IoT Analytics</h3>
|
||||||
|
<p>Procesamiento inteligente de datos de sensores. Mantenimiento predictivo, detección de anomalías y optimización en tiempo real.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
NUEVA SECCIÓN: IA + IoT — Inteligencia en el borde
|
||||||
|
============================================================ -->
|
||||||
|
<section class="ai-iot-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">IA + <span class="text-gradient-mind">IoT</span></h2>
|
||||||
|
<p class="section-subtitle">Cuando los datos del mundo físico encuentran inteligencia artificial</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ai-iot-grid">
|
||||||
|
<div class="ai-iot-card">
|
||||||
|
<div class="ai-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="M20 10c0 4.42-8 12-8 12s-8-7.58-8-12a8 8 0 1 1 16 0z"></path>
|
||||||
|
<circle cx="12" cy="10" r="3"></circle>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Mantenimiento Predictivo Industrial</h3>
|
||||||
|
<p>Sensores de vibración, temperatura y consumo + algoritmos de ML que predicen fallos antes de que ocurran. Reduce tiempos de inactividad hasta un 50%.</p>
|
||||||
|
<div class="impact-badge">Ahorro: 30-50% en mantenimiento</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ai-iot-card">
|
||||||
|
<div class="ai-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">
|
||||||
|
<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>Optimización Energética Inteligente</h3>
|
||||||
|
<p>Análisis de patrones de consumo y control automático de HVAC, iluminación y equipos. Ahorro energético del 20-40% con modelos predictivos.</p>
|
||||||
|
<div class="impact-badge">Ahorro: 20-40% en energía</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ai-iot-card">
|
||||||
|
<div class="ai-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="M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"></path>
|
||||||
|
<line x1="8" y1="2" x2="8" y2="4"></line>
|
||||||
|
<line x1="16" y1="2" x2="16" y2="4"></line>
|
||||||
|
<rect x="4" y="8" width="16" height="2"></rect>
|
||||||
|
<line x1="12" y1="12" x2="12" y2="18"></line>
|
||||||
|
<line x1="9" y1="15" x2="15" y2="15"></line>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Control de Calidad Automatizado</h3>
|
||||||
|
<p>Cámaras + visión artificial para inspección de productos en línea de producción. Detección de defectos en milisegundos con precisión >99%.</p>
|
||||||
|
<div class="impact-badge">Precisión: >99%</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ai-iot-card">
|
||||||
|
<div class="ai-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>Análisis de Flotas Inteligente</h3>
|
||||||
|
<p>GPS + telemetría + ML para optimizar rutas, predecir mantenimiento de vehículos y reducir consumo de combustible hasta un 25%.</p>
|
||||||
|
<div class="impact-badge">Ahorro: 15-25% en combustible</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
NUEVA SECCIÓN: IA para PYMES — Casos prácticos
|
||||||
|
============================================================ -->
|
||||||
|
<section class="ia-pymes-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">IA para <span class="text-gradient-mind">PYMES</span></h2>
|
||||||
|
<p class="section-subtitle">Soluciones accesibles, prácticas y con ROI medible para negocios de todos los tamaños</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pymes-grid">
|
||||||
|
<div class="pyme-card">
|
||||||
|
<div class="pyme-icon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect>
|
||||||
|
<path d="M9 9h6v6H9z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Pequeñas Fábricas / Talleres</h3>
|
||||||
|
<p><strong>Problema:</strong> Tiempos muertos no planificados, calidad inconsistente.</p>
|
||||||
|
<p><strong>Solución IA:</strong> Sensores de bajo costo + modelos predictivos que alertan antes de fallos. Control de calidad con visión artificial desde el celular.</p>
|
||||||
|
<p><strong>Resultado:</strong> +30% de productividad, -40% de desperdicios.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pyme-card">
|
||||||
|
<div class="pyme-icon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M20 12V8H4v4M12 4v4M4 12v4a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4v-4"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Comercios de Ropa / Retail</h3>
|
||||||
|
<p><strong>Problema:</strong> Exceso o falta de stock, promociones inefectivas.</p>
|
||||||
|
<p><strong>Solución IA:</strong> Predicción de demanda por temporada, recomendación de productos a clientes, optimización de precios dinámicos.</p>
|
||||||
|
<p><strong>Resultado:</strong> -25% de inventario ocioso, +20% en ventas cruzadas.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pyme-card">
|
||||||
|
<div class="pyme-icon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" 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.72c.127.96.362 1.903.7 2.81a2 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-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Empresas de Ventas / Call Center</h3>
|
||||||
|
<p><strong>Problema:</strong> Tiempo de respuesta lento, leads desaprovechados.</p>
|
||||||
|
<p><strong>Solución IA:</strong> Chatbots inteligentes 24/7, scoring de leads predictivo, análisis de sentimientos en llamadas.</p>
|
||||||
|
<p><strong>Resultado:</strong> Respuesta instantánea, +35% conversión de leads.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pyme-card">
|
||||||
|
<div class="pyme-icon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
|
||||||
|
<polyline points="17 21 17 13 7 13 7 21"></polyline>
|
||||||
|
<polyline points="7 3 7 8 15 8"></polyline>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Consultorios / Profesionales</h3>
|
||||||
|
<p><strong>Problema:</strong> Gestión manual de turnos, recordatorios, seguimiento.</p>
|
||||||
|
<p><strong>Solución IA:</strong> Agenda inteligente, recordatorios automáticos personalizados, análisis de satisfacción post-consulta.</p>
|
||||||
|
<p><strong>Resultado:</strong> -60% no-show, +25% retención de pacientes.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pyme-card">
|
||||||
|
<div class="pyme-icon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="10"></circle>
|
||||||
|
<path d="M12 6v6l4 2"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Restaurantes / Gastronomía</h3>
|
||||||
|
<p><strong>Problema:</strong> Merma de insumos, tiempos de espera largos.</p>
|
||||||
|
<p><strong>Solución IA:</strong> Predicción de demanda por hora/día, optimización de inventario, sistema de reservas inteligente.</p>
|
||||||
|
<p><strong>Resultado:</strong> -30% merma de alimentos, -40% tiempo de espera.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pyme-card">
|
||||||
|
<div class="pyme-icon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z"></path>
|
||||||
|
<polyline points="3 9 12 3 21 9"></polyline>
|
||||||
|
<line x1="12" y1="3" x2="12" y2="9"></line>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Logística / Distribución</h3>
|
||||||
|
<p><strong>Problema:</strong> Rutas ineficientes, entregas tardías.</p>
|
||||||
|
<p><strong>Solución IA:</strong> Optimización de rutas en tiempo real, predicción de demoras, asignación dinámica de entregas.</p>
|
||||||
|
<p><strong>Resultado:</strong> -25% en costos de transporte, +95% entregas a tiempo.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
Beneficios de implementar IA
|
||||||
|
============================================================ -->
|
||||||
|
<section class="benefits-ia-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="benefits-ia-header">
|
||||||
|
<h2>¿Por qué implementar <span class="text-gradient-mind">IA en tu negocio?</span></h2>
|
||||||
|
<p>Resultados tangibles desde el primer mes</p>
|
||||||
|
</div>
|
||||||
|
<div class="benefits-ia-grid">
|
||||||
|
<div class="benefit-ia-item">
|
||||||
|
<div class="benefit-ia-number">+30%</div>
|
||||||
|
<p>Productividad promedio</p>
|
||||||
|
</div>
|
||||||
|
<div class="benefit-ia-item">
|
||||||
|
<div class="benefit-ia-number">-40%</div>
|
||||||
|
<p>Reducción de costos operativos</p>
|
||||||
|
</div>
|
||||||
|
<div class="benefit-ia-item">
|
||||||
|
<div class="benefit-ia-number">24/7</div>
|
||||||
|
<p>Operación continua</p>
|
||||||
|
</div>
|
||||||
|
<div class="benefit-ia-item">
|
||||||
|
<div class="benefit-ia-number">ROI</div>
|
||||||
|
<p>Recuperación en 6-12 meses</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
CTA — VettaMind
|
||||||
|
============================================================ -->
|
||||||
|
<section class="cta-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="cta-box cta-box--mind">
|
||||||
|
<h2>¿Listo para implementar <span class="text-gradient-mind">IA</span> en tu negocio?</h2>
|
||||||
|
<p>Agendá una consultoría gratuita y descubrí cómo la IA puede transformar tu empresa</p>
|
||||||
|
<a href="contacto.html" class="btn btn-primary">
|
||||||
|
Consultar por tu proyecto IA
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
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#iot-solutions">Soluciones IoT</a></li>
|
||||||
|
<li><a href="index.html#divisions">Consultoría IA</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>
|
||||||
|
document.getElementById("year").textContent = new Date().getFullYear();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user