consultoria-as
e95f7cf684
Major features: - Pixel-Perfect glassmorphism design (landing + POS + public catalog) - OEM/Local catalog toggle with Nexpart taxonomy (14 groups, 108 subgroups, 558 part types) - Marketplace B2B Phase 1 (bodegas, POs, status machine, WA+email notifications) - Peer-to-peer inventory (multi-instance, LAN discovery) - WhatsApp: photo→Vision AI, voice→Whisper, conversational quotations - Smart unified search (VIN/plate/part_number/keyword auto-detect) - Shop Supplies tab (vehicle-independent parts) - Chatbot AI fallback chain (5 models) + response cache - CSV inventory import tool + setup_instance.sh installer - Tablet-responsive CSS + sidebar toggle - Filters, export CSV, employee edit, business data save - Quotation system (WA→POS) with auto-print on confirmation - Live stats on landing page Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
738 lines
38 KiB
HTML
738 lines
38 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">
|
|
<style>
|
|
/* ── Reset ── */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html { scroll-behavior: smooth; scrollbar-width: none; }
|
|
html::-webkit-scrollbar { width: 0; }
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
background: var(--color-bg-base);
|
|
color: var(--color-text-primary);
|
|
line-height: var(--leading-body);
|
|
min-height: 100vh;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
overflow-x: hidden;
|
|
}
|
|
a { color: var(--color-text-accent); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
.container {
|
|
max-width: var(--content-xl);
|
|
margin: 0 auto;
|
|
padding: 0 var(--space-6);
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════════════
|
|
HEADER — Glassmorphism sticky
|
|
══════════════════════════════════════════════════════════════════ */
|
|
|
|
.site-header {
|
|
position: fixed; top: 0; left: 0; right: 0;
|
|
z-index: var(--z-sticky);
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(var(--glass-blur));
|
|
-webkit-backdrop-filter: blur(var(--glass-blur));
|
|
border-bottom: 1px solid var(--glass-border);
|
|
transition: background 0.3s ease;
|
|
}
|
|
.site-header .container {
|
|
display: flex; align-items: center; justify-content: space-between; height: 64px;
|
|
}
|
|
.logo {
|
|
font-family: var(--font-heading); font-size: var(--text-h4);
|
|
font-weight: var(--heading-weight-primary);
|
|
color: var(--color-text-accent);
|
|
letter-spacing: var(--tracking-wide); text-transform: uppercase; text-decoration: none;
|
|
position: relative;
|
|
}
|
|
.logo::after {
|
|
content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
|
|
height: 2px; background: var(--gradient-accent); border-radius: 1px; opacity: 0.6; filter: blur(2px);
|
|
}
|
|
.header-nav { display: flex; gap: var(--space-6); align-items: center; }
|
|
.header-nav a {
|
|
font-size: var(--text-body-sm); color: var(--color-text-secondary);
|
|
text-decoration: none; position: relative; padding: var(--space-1) 0; transition: color 0.2s ease;
|
|
}
|
|
.header-nav a:hover { color: var(--color-text-accent); text-decoration: none; }
|
|
.header-nav a::after {
|
|
content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px;
|
|
background: var(--color-primary); transition: width 0.3s ease;
|
|
}
|
|
.header-nav a:hover::after { width: 100%; }
|
|
.header-actions { display: flex; gap: var(--space-3); align-items: center; }
|
|
.theme-toggle {
|
|
width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
|
|
background: transparent; border: 1px dashed var(--glass-border); border-radius: var(--radius-md);
|
|
color: var(--color-text-muted); cursor: pointer; font-size: 1.1rem; transition: var(--transition-fast);
|
|
}
|
|
.theme-toggle:hover {
|
|
border-color: var(--color-border-accent); color: var(--color-text-accent);
|
|
box-shadow: 0 0 12px var(--glow-color-soft);
|
|
}
|
|
|
|
/* ── Buttons ── */
|
|
.btn {
|
|
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
|
|
padding: var(--space-2) var(--space-5); border-radius: var(--radius-md);
|
|
font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold);
|
|
cursor: pointer; border: 2px solid transparent; text-decoration: none;
|
|
transition: all 0.25s var(--ease-out); position: relative; overflow: hidden;
|
|
}
|
|
.btn:hover { text-decoration: none; }
|
|
.btn-primary {
|
|
background: var(--gradient-accent); color: var(--btn-primary-text); border: none;
|
|
box-shadow: 0 4px 0 var(--color-primary-active), 0 6px 12px var(--glow-color-soft);
|
|
}
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 0 var(--color-primary-active), 0 10px 24px var(--glow-color);
|
|
}
|
|
.btn-primary:active {
|
|
transform: translateY(2px);
|
|
box-shadow: 0 2px 0 var(--color-primary-active), 0 3px 8px var(--glow-color-soft);
|
|
}
|
|
.btn-primary::after {
|
|
content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
|
transition: left 0.5s ease;
|
|
}
|
|
.btn-primary:hover::after { left: 120%; }
|
|
.btn-secondary {
|
|
background: var(--glass-bg); backdrop-filter: blur(8px);
|
|
color: var(--color-text-accent); border: 1px solid var(--color-border-accent);
|
|
}
|
|
.btn-secondary:hover { background: var(--color-primary-muted); box-shadow: 0 0 20px var(--glow-color-soft); }
|
|
.btn-lg { padding: var(--space-3) var(--space-8); font-size: var(--text-body); border-radius: var(--radius-lg); }
|
|
|
|
/* ══════════════════════════════════════════════════════════════════
|
|
HERO
|
|
══════════════════════════════════════════════════════════════════ */
|
|
|
|
.hero {
|
|
position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
|
|
overflow: hidden; padding-top: 64px;
|
|
}
|
|
#heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
|
|
.hero::after {
|
|
content: ''; position: absolute; inset: 0;
|
|
background: radial-gradient(ellipse 60% 50% at 50% 40%, var(--glow-color-soft) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
.hero-content { position: relative; z-index: 2; text-align: center; max-width: 900px; padding: var(--space-8) var(--space-6); }
|
|
.hero h1 {
|
|
font-family: var(--font-heading); font-size: clamp(2.5rem, 7vw, 4.5rem);
|
|
font-weight: var(--heading-weight-primary); line-height: 1.05; letter-spacing: var(--tracking-tight);
|
|
background: var(--gradient-text); background-size: 200% auto;
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
|
animation: nx-shimmer 4s linear infinite; margin-bottom: var(--space-3);
|
|
}
|
|
.hero .subtitle {
|
|
font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--color-text-secondary);
|
|
margin-bottom: var(--space-2); max-width: 650px; margin-left: auto; margin-right: auto;
|
|
}
|
|
.hero .typewriter-line {
|
|
display: inline-block; font-family: var(--font-mono); font-size: var(--text-body-sm);
|
|
color: var(--color-text-muted); background: var(--glass-bg); backdrop-filter: blur(8px);
|
|
padding: var(--space-1) var(--space-4); border-radius: var(--radius-md);
|
|
border: 1px dashed var(--glass-border); margin-bottom: var(--space-8); min-height: 2em;
|
|
}
|
|
.typewriter-cursor {
|
|
display: inline-block; width: 2px; height: 1em; background: var(--color-primary);
|
|
vertical-align: text-bottom; margin-left: 2px; animation: nx-typewriter-cursor 0.8s ease infinite;
|
|
}
|
|
.hero-buttons { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-12); }
|
|
.hero-stats { display: flex; justify-content: center; gap: var(--space-6); flex-wrap: wrap; }
|
|
.stat-card {
|
|
background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
|
|
border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
|
|
padding: var(--space-5) var(--space-8); text-align: center; min-width: 140px;
|
|
transition: all 0.3s var(--ease-out);
|
|
}
|
|
.stat-card:hover { border-color: var(--color-border-accent); box-shadow: 0 0 24px var(--glow-color-soft); transform: translateY(-4px); }
|
|
.stat-card .number {
|
|
font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--heading-weight-primary);
|
|
color: var(--color-text-accent); line-height: 1;
|
|
}
|
|
.stat-card .label {
|
|
font-size: var(--text-caption); color: var(--color-text-muted); margin-top: var(--space-1);
|
|
text-transform: uppercase; letter-spacing: var(--tracking-widest);
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════════════
|
|
SECTION CHROME — Terminal style separator
|
|
══════════════════════════════════════════════════════════════════ */
|
|
|
|
.section-chrome {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-border);
|
|
background: var(--glass-bg); backdrop-filter: blur(8px);
|
|
}
|
|
.chrome-dots { display: flex; gap: 6px; }
|
|
.chrome-dots span { width: 10px; height: 10px; border-radius: var(--radius-full); border: 1.5px solid var(--color-text-muted); opacity: 0.3; }
|
|
.chrome-label {
|
|
font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-muted);
|
|
text-transform: uppercase; letter-spacing: var(--tracking-widest);
|
|
}
|
|
.chrome-star { color: var(--color-text-muted); opacity: 0.3; font-size: 14px; }
|
|
|
|
/* ══════════════════════════════════════════════════════════════════
|
|
PRODUCT SECTION — 3 columns with feature lists
|
|
══════════════════════════════════════════════════════════════════ */
|
|
|
|
.product { padding: var(--space-16) 0; }
|
|
.section-title {
|
|
font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--heading-weight-primary);
|
|
text-align: center; margin-bottom: var(--space-3); letter-spacing: var(--heading-tracking-h2);
|
|
}
|
|
.section-subtitle {
|
|
text-align: center; font-size: var(--text-body); color: var(--color-text-secondary);
|
|
margin-bottom: var(--space-10); max-width: 600px; margin-left: auto; margin-right: auto;
|
|
}
|
|
.product-grid {
|
|
display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
|
|
}
|
|
.product-card {
|
|
background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
|
|
border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
|
|
padding: var(--space-6); transition: all 0.35s var(--ease-out); position: relative; overflow: hidden;
|
|
}
|
|
.product-card::before {
|
|
content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
.product-card:hover {
|
|
border-color: var(--color-border-accent);
|
|
box-shadow: 0 8px 32px var(--glow-color-soft);
|
|
transform: translateY(-3px);
|
|
}
|
|
.product-card--orange::before { background: var(--color-primary); }
|
|
.product-card--cyan::before { background: #00D4FF; }
|
|
.product-card--green::before { background: #3FB950; }
|
|
|
|
.product-card h3 {
|
|
font-family: var(--font-heading); font-size: var(--text-h6);
|
|
font-weight: var(--heading-weight-secondary); margin-bottom: var(--space-4);
|
|
}
|
|
.product-card--orange h3 { color: var(--color-text-accent); }
|
|
.product-card--cyan h3 { color: #00D4FF; }
|
|
.product-card--green h3 { color: #3FB950; }
|
|
|
|
.product-card ul { list-style: none; font-size: var(--text-body-sm); color: var(--color-text-secondary); }
|
|
.product-card ul li {
|
|
padding: var(--space-1) 0; line-height: 1.8;
|
|
}
|
|
.product-card ul li::before { margin-right: var(--space-2); }
|
|
.product-card--orange ul li::before { content: '▸ '; color: var(--color-text-accent); }
|
|
.product-card--cyan ul li::before { content: '▸ '; color: #00D4FF; }
|
|
.product-card--green ul li::before { content: '▸ '; color: #3FB950; }
|
|
|
|
/* Hardware banner */
|
|
.hw-banner {
|
|
margin-top: var(--space-6); text-align: center;
|
|
}
|
|
.hw-banner-inner {
|
|
display: inline-flex; align-items: center; gap: var(--space-4);
|
|
background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
|
|
border: 1px dashed var(--glass-border); border-radius: var(--radius-lg);
|
|
padding: var(--space-4) var(--space-8); transition: all 0.3s var(--ease-out);
|
|
}
|
|
.hw-banner-inner:hover { border-color: var(--color-border-accent); box-shadow: 0 0 20px var(--glow-color-soft); }
|
|
.hw-banner-inner span:first-child { font-size: 1.5rem; }
|
|
.hw-banner-inner .hw-text { font-size: var(--text-body-sm); color: var(--color-text-secondary); text-align: left; }
|
|
.hw-banner-inner .hw-text strong { color: var(--color-text-accent); }
|
|
|
|
/* ══════════════════════════════════════════════════════════════════
|
|
HOW IT WORKS — Timeline
|
|
══════════════════════════════════════════════════════════════════ */
|
|
|
|
.how-it-works { padding: var(--space-16) 0; }
|
|
.steps { display: flex; justify-content: center; gap: 0; max-width: 900px; margin: 0 auto; position: relative; }
|
|
.steps::before {
|
|
content: ''; position: absolute; top: 28px; left: 15%; right: 15%; height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--color-border-accent), transparent); opacity: 0.3;
|
|
}
|
|
.step { flex: 1; text-align: center; padding: 0 var(--space-4); position: relative; }
|
|
.step-number {
|
|
display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
|
|
border-radius: var(--radius-full); background: var(--glass-bg); backdrop-filter: blur(8px);
|
|
border: 2px solid var(--color-border-accent); color: var(--color-text-accent);
|
|
font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--heading-weight-primary);
|
|
margin-bottom: var(--space-4); position: relative; z-index: 1; transition: all 0.3s ease;
|
|
}
|
|
.step:hover .step-number {
|
|
box-shadow: 0 0 24px var(--glow-color), 0 0 48px var(--glow-color-soft);
|
|
background: var(--color-primary); color: var(--color-text-inverse);
|
|
}
|
|
.step h3 { font-family: var(--font-heading); font-size: var(--text-h5); font-weight: var(--heading-weight-secondary); margin-bottom: var(--space-2); }
|
|
.step p { font-size: var(--text-body-sm); color: var(--color-text-secondary); }
|
|
|
|
/* ══════════════════════════════════════════════════════════════════
|
|
DIFFERENTIATOR — Competitive highlight
|
|
══════════════════════════════════════════════════════════════════ */
|
|
|
|
.differentiator { padding: var(--space-16) 0; }
|
|
.diff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
|
|
.diff-card {
|
|
background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
|
|
border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
|
|
padding: var(--space-6); text-align: center; transition: all 0.3s var(--ease-out);
|
|
}
|
|
.diff-card:hover { border-color: var(--color-border-accent); box-shadow: 0 4px 20px var(--glow-color-soft); transform: translateY(-3px); }
|
|
.diff-icon {
|
|
width: 48px; height: 48px; margin: 0 auto var(--space-3);
|
|
display: flex; align-items: center; justify-content: center;
|
|
background: var(--color-primary-muted); border: 1px dashed var(--color-border-accent);
|
|
border-radius: var(--radius-md); font-size: 1.3rem;
|
|
}
|
|
.diff-card h4 { font-family: var(--font-heading); font-size: var(--text-body); font-weight: var(--heading-weight-secondary); margin-bottom: var(--space-1); }
|
|
.diff-card p { font-size: var(--text-caption); color: var(--color-text-muted); }
|
|
|
|
/* ══════════════════════════════════════════════════════════════════
|
|
BRANDS MARQUEE
|
|
══════════════════════════════════════════════════════════════════ */
|
|
|
|
.brands-section {
|
|
padding: var(--space-12) 0; overflow: hidden;
|
|
border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
|
|
}
|
|
.brands-header { display: flex; align-items: center; }
|
|
.brands-label {
|
|
flex-shrink: 0; width: 200px; padding: var(--space-6);
|
|
font-family: var(--font-heading); font-size: var(--text-body-sm); font-weight: var(--heading-weight-secondary);
|
|
color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-widest);
|
|
border-right: 1px solid var(--color-border); text-align: center;
|
|
}
|
|
.marquee-track { flex: 1; overflow: hidden; position: relative; padding: var(--space-4) 0; }
|
|
.marquee-track::before, .marquee-track::after {
|
|
content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none;
|
|
}
|
|
.marquee-track::before { left: 0; background: linear-gradient(90deg, var(--color-bg-base), transparent); }
|
|
.marquee-track::after { right: 0; background: linear-gradient(270deg, var(--color-bg-base), transparent); }
|
|
.marquee-inner { display: flex; gap: var(--space-3); width: max-content; animation: nx-marquee 40s linear infinite; }
|
|
.marquee-inner:hover { animation-play-state: paused; }
|
|
.brand-tag {
|
|
display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4);
|
|
background: var(--glass-bg); backdrop-filter: blur(8px);
|
|
border: 1px solid var(--glass-border); border-radius: var(--radius-md);
|
|
font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-secondary); letter-spacing: var(--tracking-wide);
|
|
white-space: nowrap; transition: all 0.25s ease; cursor: pointer;
|
|
}
|
|
.brand-tag:hover {
|
|
border-color: var(--color-border-accent); color: var(--color-text-accent);
|
|
box-shadow: 0 0 16px var(--glow-color-soft); text-decoration: none;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════════════
|
|
PRICING PREVIEW
|
|
══════════════════════════════════════════════════════════════════ */
|
|
|
|
.pricing { padding: var(--space-16) 0; }
|
|
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); max-width: 900px; margin: 0 auto; }
|
|
.pricing-card {
|
|
background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
|
|
border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
|
|
padding: var(--space-6); text-align: center; transition: all 0.3s var(--ease-out);
|
|
}
|
|
.pricing-card:hover { border-color: var(--color-border-accent); box-shadow: 0 8px 32px var(--glow-color-soft); transform: translateY(-3px); }
|
|
.pricing-card.featured { border-color: var(--color-border-accent); }
|
|
.pricing-card h4 {
|
|
font-family: var(--font-heading); font-size: var(--text-h6); font-weight: var(--heading-weight-secondary);
|
|
margin-bottom: var(--space-2); color: var(--color-text-primary);
|
|
}
|
|
.pricing-price {
|
|
font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--heading-weight-primary);
|
|
color: var(--color-text-accent); margin-bottom: var(--space-1);
|
|
}
|
|
.pricing-period { font-size: var(--text-caption); color: var(--color-text-muted); margin-bottom: var(--space-4); }
|
|
.pricing-card ul { list-style: none; text-align: left; font-size: var(--text-body-sm); color: var(--color-text-secondary); }
|
|
.pricing-card ul li { padding: 3px 0; }
|
|
.pricing-card ul li::before { content: '✓ '; color: var(--color-text-accent); }
|
|
|
|
/* ══════════════════════════════════════════════════════════════════
|
|
CONTACT
|
|
══════════════════════════════════════════════════════════════════ */
|
|
|
|
.contact { padding: var(--space-16) 0; }
|
|
.contact-grid {
|
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: var(--space-6); max-width: 900px; margin: 0 auto;
|
|
}
|
|
.contact-card {
|
|
background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
|
|
border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
|
|
padding: var(--space-8); text-align: center; transition: all 0.3s var(--ease-out);
|
|
}
|
|
.contact-card:hover { border-color: var(--color-border-accent); box-shadow: 0 8px 32px var(--glow-color-soft); transform: translateY(-4px); }
|
|
.contact-icon {
|
|
width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
|
|
background: var(--color-primary-muted); border: 1px dashed var(--color-border-accent);
|
|
border-radius: var(--radius-md); font-size: 1.3rem; margin-bottom: var(--space-4);
|
|
}
|
|
.contact-card h4 { font-family: var(--font-heading); font-size: var(--text-h6); font-weight: var(--heading-weight-secondary); margin-bottom: var(--space-2); }
|
|
.contact-card p, .contact-card a { font-size: var(--text-body-sm); color: var(--color-text-secondary); }
|
|
.btn-whatsapp {
|
|
display: inline-flex; align-items: center; gap: var(--space-2);
|
|
padding: var(--space-2) var(--space-5); background: #25D366; color: #fff;
|
|
border: none; border-radius: var(--radius-md); font-family: var(--font-body);
|
|
font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); cursor: pointer;
|
|
text-decoration: none; transition: all 0.25s ease;
|
|
box-shadow: 0 4px 0 #1aa84c, 0 6px 12px rgba(37,211,102,0.2);
|
|
}
|
|
.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #1aa84c, 0 10px 24px rgba(37,211,102,0.3); text-decoration: none; }
|
|
|
|
/* ══════════════════════════════════════════════════════════════════
|
|
FOOTER
|
|
══════════════════════════════════════════════════════════════════ */
|
|
|
|
.site-footer { border-top: 1px solid var(--color-border); padding: var(--space-10) 0 var(--space-6); position: relative; overflow: hidden; }
|
|
.footer-inner { display: flex; justify-content: space-between; align-items: flex-end; }
|
|
.footer-info { position: relative; z-index: 1; }
|
|
.footer-info .logo { font-size: var(--text-h5); display: block; margin-bottom: var(--space-2); }
|
|
.footer-info p { font-size: var(--text-caption); color: var(--color-text-muted); }
|
|
.footer-watermark {
|
|
font-family: var(--font-heading); font-size: clamp(4rem, 12vw, 10rem);
|
|
font-weight: var(--heading-weight-primary); color: var(--color-text-muted);
|
|
opacity: 0.06; line-height: 1; text-transform: uppercase; letter-spacing: var(--tracking-tight);
|
|
user-select: none; white-space: nowrap;
|
|
}
|
|
|
|
/* ── Responsive ── */
|
|
@media (max-width: 768px) {
|
|
.header-nav { display: none; }
|
|
.hero h1 { font-size: clamp(2rem, 8vw, 3.5rem); }
|
|
.hero-content { padding: var(--space-6) var(--space-4); }
|
|
.hero-buttons { flex-direction: column; align-items: center; }
|
|
.hero-stats { flex-direction: column; align-items: center; gap: var(--space-4); }
|
|
.stat-card { width: 100%; max-width: 280px; }
|
|
.product-grid { grid-template-columns: 1fr; }
|
|
.steps { flex-direction: column; gap: var(--space-8); }
|
|
.steps::before { display: none; }
|
|
.diff-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.brands-header { flex-direction: column; }
|
|
.brands-label { width: 100%; border-right: none; border-bottom: 1px solid var(--color-border); padding: var(--space-3); }
|
|
.pricing-grid { grid-template-columns: 1fr; }
|
|
.footer-inner { flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); }
|
|
.footer-watermark { font-size: 4rem; }
|
|
}
|
|
</style>
|
|
</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">☾</span>
|
|
</button>
|
|
<a href="/catalog" class="btn btn-primary">Ver Catalogo</a>
|
|
<a href="/pos/login" class="btn btn-secondary">Acceder POS</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>
|
|
<a href="/pos/login" class="btn btn-secondary btn-lg">Probar el POS</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">✦</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>🖥</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">✦</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">✦</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">🔍</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">💰</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">🤖</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">🚀</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">🖥</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">🌐</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">✦</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>🖥 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>🖥 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">✦</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">✉</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">📱</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">📍</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>© 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>
|