Files
Autoparts-DB/dashboard/landing.html

318 lines
13 KiB
HTML

<!DOCTYPE html>
<html lang="es" data-theme="industrial">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nexus Autoparts — Sistema completo para refaccionarias</title>
<meta name="description" content="POS + Catalogo TecDoc 1.5M+ partes + Marketplace B2B + IA. Todo lo que necesita una refaccionaria en una sola plataforma.">
<script>
(function(){
var t = localStorage.getItem('nexus-theme') || 'industrial';
document.documentElement.setAttribute('data-theme', t);
})();
</script>
<link rel="stylesheet" href="/static/css/tokens.css">
<link rel="stylesheet" href="landing.css">
</head>
<body>
<!-- ══════════ HEADER ══════════ -->
<header class="site-header">
<div class="container">
<a href="/" class="logo">Nexus Autoparts</a>
<nav class="header-nav">
<a href="#product">Producto</a>
<a href="#how-it-works">Como Funciona</a>
<a href="#brands">Marcas</a>
<a href="#pricing">Planes</a>
<a href="#contact">Contacto</a>
</nav>
<div class="header-actions">
<button class="theme-toggle" onclick="toggleTheme()" title="Cambiar tema" id="themeToggle">
<span id="themeIcon">&#9790;</span>
</button>
<a href="/catalog" class="btn btn-primary">Ver Catalogo</a>
</div>
</div>
</header>
<!-- ══════════ HERO ══════════ -->
<section class="hero" id="hero">
<canvas id="heroCanvas"></canvas>
<div class="hero-content">
<h1 class="nx-reveal">Nexus Autoparts</h1>
<p class="subtitle nx-reveal">Todo lo que necesita una refaccionaria en una sola plataforma. POS, inventario, catalogo TecDoc, facturacion, marketplace B2B e inteligencia artificial.</p>
<div class="typewriter-line nx-reveal">
<span id="typewriterText"></span><span class="typewriter-cursor"></span>
</div>
<div class="hero-buttons nx-reveal">
<a href="/catalog" class="btn btn-primary btn-lg">Explorar Catalogo</a>
</div>
<div class="hero-stats nx-stagger">
<div class="stat-card nx-reveal">
<div class="number" data-target="1500000" data-suffix="+" data-format="1.5M">1.5M+</div>
<div class="label">Partes OEM</div>
</div>
<div class="stat-card nx-reveal">
<div class="number" data-target="304000" data-suffix="+" data-format="304K">304K+</div>
<div class="label">Aftermarket</div>
</div>
<div class="stat-card nx-reveal">
<div class="number" data-target="15800000" data-suffix="+" data-format="15.8M">15.8M+</div>
<div class="label">Cross-Refs</div>
</div>
<div class="stat-card nx-reveal">
<div class="number" data-target="36" data-suffix="" data-format="num">36</div>
<div class="label">Marcas</div>
</div>
</div>
</div>
</section>
<!-- ══════════ PRODUCT — 3 columns ══════════ -->
<div class="section-chrome" id="product">
<div class="chrome-dots"><span></span><span></span><span></span></div>
<span class="chrome-label">product.tsx</span>
<span class="chrome-star">&#10022;</span>
</div>
<section class="product">
<div class="container">
<h2 class="section-title nx-reveal">El Producto</h2>
<p class="section-subtitle nx-reveal">El unico sistema que combina POS + Inventario + CFDI + Catalogo + Marketplace + IA en una sola plataforma</p>
<div class="product-grid nx-stagger">
<div class="product-card product-card--orange nx-reveal">
<h3>Ventas & POS</h3>
<ul>
<li>Punto de venta completo con F-keys y escaner</li>
<li>Caja registradora multi-caja, cortes X/Z</li>
<li>Cotizaciones, apartados, devoluciones</li>
<li>Clientes con credito y 3 niveles de precio</li>
<li>Facturacion CFDI 4.0 (Ingreso, Egreso, Pago)</li>
<li>Impresion termica ESC/POS</li>
<li>Contabilidad con polizas automaticas</li>
<li>Reportes: ventas, ABC, cortes, utilidad</li>
</ul>
</div>
<div class="product-card product-card--cyan nx-reveal">
<h3>Catalogo & Inventario</h3>
<ul>
<li>Catalogo TecDoc: 1.5M+ partes OEM</li>
<li>304K+ partes aftermarket con cross-refs</li>
<li>Navegacion: Ano > Marca > Modelo > Motor</li>
<li>VIN decoder + busqueda por placas MX</li>
<li>Inventario append-only, toma fisica</li>
<li>Imagenes de productos con upload masivo</li>
<li>Traduccion automatica EN > ES (326 partes)</li>
<li>Marketplace B2B: bodegas ↔ talleres</li>
</ul>
</div>
<div class="product-card product-card--green nx-reveal">
<h3>IA & Plataforma</h3>
<ul>
<li>Chatbot IA: diagnostico, cotizacion inteligente</li>
<li>Entrada por voz (Web Speech API)</li>
<li>Reconocimiento de partes por foto (Vision AI)</li>
<li>WhatsApp Business integrado (envio de cotizaciones)</li>
<li>Gestion de flotillas y mantenimiento</li>
<li>PWA + App Android, modo kiosko</li>
<li>Offline-first con sync automatico</li>
<li>2 temas, 2 idiomas (ES/EN), 2 monedas (MXN/USD)</li>
</ul>
</div>
</div>
<div class="hw-banner nx-reveal">
<div class="hw-banner-inner">
<span>&#128421;</span>
<div class="hw-text">A partir del plan <strong>Pro</strong>: servidor en <strong>rack 3D personalizado</strong> — Mini PC + switch + AP + UPS.<br>Todo incluido por <strong>$2,000 MXN/mes</strong>. Solo conectar y empezar a vender.</div>
</div>
</div>
</div>
</section>
<!-- ══════════ HOW IT WORKS ══════════ -->
<div class="section-chrome" id="how-it-works">
<div class="chrome-dots"><span></span><span></span><span></span></div>
<span class="chrome-label">workflow.tsx</span>
<span class="chrome-star">&#10022;</span>
</div>
<section class="how-it-works">
<div class="container">
<h2 class="section-title nx-reveal">Como Funciona</h2>
<div class="steps nx-stagger">
<div class="step nx-reveal">
<div class="step-number">1</div>
<h3>Instalamos el sistema</h3>
<p>Mini PC con el POS preinstalado. Solo conectar a internet y empezar a vender.</p>
</div>
<div class="step nx-reveal">
<div class="step-number">2</div>
<h3>Catalogo + Inventario</h3>
<p>Tu inventario conectado al catalogo TecDoc. Busca por vehiculo, parte o VIN.</p>
</div>
<div class="step nx-reveal">
<div class="step-number">3</div>
<h3>Vende y Crece</h3>
<p>POS, facturacion, marketplace B2B, WhatsApp e IA — todo desde un solo lugar.</p>
</div>
</div>
</div>
</section>
<!-- ══════════ DIFFERENTIATOR ══════════ -->
<div class="section-chrome">
<div class="chrome-dots"><span></span><span></span><span></span></div>
<span class="chrome-label">competitive.tsx</span>
<span class="chrome-star">&#10022;</span>
</div>
<section class="differentiator">
<div class="container">
<h2 class="section-title nx-reveal">Por que Nexus</h2>
<p class="section-subtitle nx-reveal">Lo que nos hace diferentes de Pitz, Meru, Jetz y los POS tradicionales</p>
<div class="diff-grid nx-stagger">
<div class="diff-card nx-reveal">
<div class="diff-icon">&#128269;</div>
<h4>Catalogo TecDoc</h4>
<p>1.5M+ partes con cross-references. Nadie mas lo tiene en MX.</p>
</div>
<div class="diff-card nx-reveal">
<div class="diff-icon">&#128176;</div>
<h4>POS + CFDI integrado</h4>
<p>No necesitas un sistema aparte para facturar. Todo en uno.</p>
</div>
<div class="diff-card nx-reveal">
<div class="diff-icon">&#129302;</div>
<h4>IA + WhatsApp</h4>
<p>Chatbot que diagnostica, cotiza y atiende por WhatsApp.</p>
</div>
<div class="diff-card nx-reveal">
<div class="diff-icon">&#128640;</div>
<h4>Marketplace B2B</h4>
<p>Conecta bodegas con talleres. Mas ventas, menos llamadas.</p>
</div>
<div class="diff-card nx-reveal">
<div class="diff-icon">&#128421;</div>
<h4>Hardware incluido</h4>
<p>Rack 3D con servidor. Renta todo por $2,000/mes.</p>
</div>
<div class="diff-card nx-reveal">
<div class="diff-icon">&#127760;</div>
<h4>Offline-first</h4>
<p>Funciona sin internet. PWA + Android + modo kiosko.</p>
</div>
</div>
</div>
</section>
<!-- ══════════ BRANDS MARQUEE ══════════ -->
<section class="brands-section" id="brands">
<div class="brands-header">
<div class="brands-label">36 Marcas</div>
<div class="marquee-track">
<div class="marquee-inner" id="brandsMarquee"></div>
</div>
</div>
</section>
<!-- ══════════ PRICING ══════════ -->
<div class="section-chrome" id="pricing">
<div class="chrome-dots"><span></span><span></span><span></span></div>
<span class="chrome-label">pricing.tsx</span>
<span class="chrome-star">&#10022;</span>
</div>
<section class="pricing">
<div class="container">
<h2 class="section-title nx-reveal">Planes</h2>
<p class="section-subtitle nx-reveal">Software desde $999/mes. Hardware incluido a partir del plan Pro.</p>
<div class="pricing-grid nx-stagger">
<div class="pricing-card nx-reveal">
<h4>Basico</h4>
<div class="pricing-price">$999</div>
<div class="pricing-period">MXN / mes — solo software</div>
<ul>
<li>POS + Inventario</li>
<li>Catalogo TecDoc</li>
<li>CFDI 4.0</li>
<li>Reportes basicos</li>
</ul>
</div>
<div class="pricing-card featured nx-reveal">
<h4>Pro</h4>
<div class="pricing-price">$2,000</div>
<div class="pricing-period">MXN / mes — hardware incluido</div>
<ul>
<li>Todo Basico +</li>
<li>Contabilidad automatica</li>
<li>Chatbot IA + WhatsApp</li>
<li>Marketplace B2B</li>
<li>&#128421; Mini PC + rack 3D + red incluidos</li>
</ul>
</div>
<div class="pricing-card nx-reveal">
<h4>Enterprise</h4>
<div class="pricing-price">$3,999</div>
<div class="pricing-period">MXN / mes — hardware incluido</div>
<ul>
<li>Todo Pro +</li>
<li>Flotillas + Multi-bodega</li>
<li>API dedicada</li>
<li>Soporte prioritario</li>
<li>&#128421; Hardware dedicado por sucursal</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ══════════ CONTACT ══════════ -->
<div class="section-chrome" id="contact">
<div class="chrome-dots"><span></span><span></span><span></span></div>
<span class="chrome-label">contact.tsx</span>
<span class="chrome-star">&#10022;</span>
</div>
<section class="contact">
<div class="container">
<h2 class="section-title nx-reveal">Contacto</h2>
<div class="contact-grid nx-stagger">
<div class="contact-card nx-reveal">
<div class="contact-icon">&#9993;</div>
<h4>Email</h4>
<a href="mailto:ialcarazsalazar@consultoria-as.com">ialcarazsalazar@consultoria-as.com</a>
</div>
<div class="contact-card nx-reveal">
<div class="contact-icon">&#128241;</div>
<h4>WhatsApp</h4>
<a href="https://wa.me/526641234567" class="btn-whatsapp" target="_blank" rel="noopener">Enviar Mensaje</a>
</div>
<div class="contact-card nx-reveal">
<div class="contact-icon">&#128205;</div>
<h4>Ubicaciones</h4>
<p>Tijuana, B.C.</p>
<p>Guadalajara, Jal.</p>
<p>6 ciudades en expansion</p>
</div>
</div>
</div>
</section>
<!-- ══════════ FOOTER ══════════ -->
<footer class="site-footer">
<div class="container">
<div class="footer-inner">
<div class="footer-info">
<span class="logo">Nexus Autoparts</span>
<p>&copy; 2026 Nexus Autoparts — Consultoria AS. Todos los derechos reservados.</p>
</div>
<div class="footer-watermark" aria-hidden="true">NEXUS</div>
</div>
</div>
</footer>
<script src="/landing.js"></script>
</body>
</html>