505 lines
16 KiB
HTML
505 lines
16 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 — Tu conexion directa con las partes que necesitas</title>
|
|
<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; }
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
background: var(--color-bg-base);
|
|
color: var(--color-text-primary);
|
|
line-height: var(--leading-body);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
a { color: var(--color-text-accent); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
|
|
/* ── Layout ── */
|
|
.container {
|
|
max-width: var(--content-xl);
|
|
margin: 0 auto;
|
|
padding: 0 var(--space-6);
|
|
}
|
|
|
|
/* ── Header ── */
|
|
.site-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: var(--z-sticky);
|
|
background: var(--color-bg-elevated);
|
|
border-bottom: 1px solid var(--color-border);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
.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;
|
|
}
|
|
.header-actions { display: flex; gap: var(--space-3); align-items: center; }
|
|
|
|
.theme-toggle {
|
|
background: var(--btn-ghost-bg);
|
|
border: 1px solid var(--btn-ghost-border);
|
|
color: var(--btn-ghost-text);
|
|
padding: var(--space-2) var(--space-3);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
font-size: var(--text-body-sm);
|
|
font-family: var(--font-body);
|
|
transition: var(--transition-fast);
|
|
}
|
|
.theme-toggle:hover { background: var(--color-primary-muted); color: var(--color-text-accent); }
|
|
|
|
/* ── Buttons ── */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-3) var(--space-6);
|
|
border-radius: var(--radius-md);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body);
|
|
font-weight: var(--font-weight-semibold);
|
|
cursor: pointer;
|
|
transition: var(--transition-fast);
|
|
border: 2px solid transparent;
|
|
text-decoration: none;
|
|
}
|
|
.btn-primary {
|
|
background: var(--btn-primary-bg);
|
|
color: var(--btn-primary-text);
|
|
border-color: var(--btn-primary-border);
|
|
}
|
|
.btn-primary:hover { background: var(--btn-primary-bg-hover); text-decoration: none; }
|
|
.btn-primary:active { background: var(--btn-primary-bg-active); }
|
|
|
|
.btn-secondary {
|
|
background: var(--btn-secondary-bg);
|
|
color: var(--btn-secondary-text);
|
|
border-color: var(--btn-secondary-border);
|
|
}
|
|
.btn-secondary:hover { background: var(--btn-secondary-bg-hover); text-decoration: none; }
|
|
|
|
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-body-lg); }
|
|
|
|
/* ── Hero ── */
|
|
.hero {
|
|
padding: var(--space-16) 0;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(ellipse at 50% 0%, var(--color-primary-muted) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
.hero-content { position: relative; z-index: 1; }
|
|
.hero h1 {
|
|
font-family: var(--font-heading);
|
|
font-size: var(--text-h1);
|
|
font-weight: var(--heading-weight-primary);
|
|
line-height: var(--leading-h1);
|
|
letter-spacing: var(--heading-tracking-h1);
|
|
color: var(--color-text-primary);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.hero h1 span { color: var(--color-text-accent); }
|
|
.hero .tagline {
|
|
font-size: var(--text-body-lg);
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: var(--space-8);
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.hero-stats {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--space-10);
|
|
margin-top: var(--space-10);
|
|
flex-wrap: wrap;
|
|
}
|
|
.hero-stat {
|
|
text-align: center;
|
|
}
|
|
.hero-stat .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;
|
|
}
|
|
.hero-stat .label {
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-muted);
|
|
margin-top: var(--space-1);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--tracking-wider);
|
|
}
|
|
|
|
/* ── Features ── */
|
|
.features {
|
|
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-10);
|
|
letter-spacing: var(--heading-tracking-h2);
|
|
}
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
gap: var(--space-6);
|
|
}
|
|
.feature-card {
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-8);
|
|
transition: var(--transition-normal);
|
|
}
|
|
.feature-card:hover {
|
|
border-color: var(--color-border-accent);
|
|
box-shadow: var(--shadow-md);
|
|
transform: translateY(-2px);
|
|
}
|
|
.feature-icon {
|
|
font-size: 2.5rem;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.feature-card h3 {
|
|
font-family: var(--font-heading);
|
|
font-size: var(--text-h5);
|
|
font-weight: var(--heading-weight-secondary);
|
|
margin-bottom: var(--space-2);
|
|
color: var(--color-text-primary);
|
|
}
|
|
.feature-card p {
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-secondary);
|
|
line-height: var(--leading-body);
|
|
}
|
|
|
|
/* ── How it works ── */
|
|
.how-it-works {
|
|
padding: var(--space-16) 0;
|
|
background: var(--color-surface-1);
|
|
border-top: 1px solid var(--color-border);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
.steps {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: var(--space-8);
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
.step {
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
.step-number {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--color-primary);
|
|
color: var(--color-text-inverse);
|
|
font-family: var(--font-heading);
|
|
font-size: var(--text-h3);
|
|
font-weight: var(--heading-weight-primary);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.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);
|
|
}
|
|
|
|
/* ── Brands ── */
|
|
.brands-section {
|
|
padding: var(--space-16) 0;
|
|
text-align: center;
|
|
}
|
|
.brands-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: var(--space-3);
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
.brand-tag {
|
|
display: inline-block;
|
|
padding: var(--space-2) var(--space-4);
|
|
background: var(--color-surface-2);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-full);
|
|
font-size: var(--text-body-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-secondary);
|
|
letter-spacing: var(--tracking-wide);
|
|
transition: var(--transition-fast);
|
|
}
|
|
.brand-tag:hover {
|
|
border-color: var(--color-border-accent);
|
|
color: var(--color-text-accent);
|
|
}
|
|
|
|
/* ── Contact ── */
|
|
.contact {
|
|
padding: var(--space-16) 0;
|
|
background: var(--color-surface-1);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
.contact-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: var(--space-8);
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
.contact-item {
|
|
text-align: center;
|
|
}
|
|
.contact-item .icon {
|
|
font-size: 2rem;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.contact-item h4 {
|
|
font-family: var(--font-heading);
|
|
font-size: var(--text-h6);
|
|
font-weight: var(--heading-weight-secondary);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.contact-item p, .contact-item a {
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
.btn-whatsapp {
|
|
background: #25D366;
|
|
color: #fff;
|
|
border-color: #25D366;
|
|
}
|
|
.btn-whatsapp:hover { background: #1EB954; }
|
|
|
|
/* ── Footer ── */
|
|
.site-footer {
|
|
padding: var(--space-6) 0;
|
|
text-align: center;
|
|
border-top: 1px solid var(--color-border);
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* ── Responsive ── */
|
|
@media (max-width: 768px) {
|
|
.hero { padding: var(--space-10) 0; }
|
|
.hero-stats { gap: var(--space-6); }
|
|
.features, .how-it-works, .brands-section, .contact { padding: var(--space-10) 0; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Header -->
|
|
<header class="site-header">
|
|
<div class="container">
|
|
<a href="/" class="logo">Nexus Autoparts</a>
|
|
<div class="header-actions">
|
|
<button class="theme-toggle" onclick="toggleTheme()" title="Cambiar tema">Tema</button>
|
|
<a href="/catalog" class="btn btn-primary">Ver Catalogo</a>
|
|
<a href="#" onclick="window.location.href=window.location.protocol+'//'+window.location.hostname+':5001/pos/login';return false;" class="btn btn-secondary">Acceder al POS</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero -->
|
|
<section class="hero">
|
|
<div class="container hero-content">
|
|
<h1><span>Nexus</span> Autoparts</h1>
|
|
<p class="tagline">Tu conexion directa con las partes que necesitas</p>
|
|
<a href="/catalog" class="btn btn-primary btn-lg">Ver Catalogo</a>
|
|
<a href="#" onclick="window.location.href=window.location.protocol+'//'+window.location.hostname+':5001/pos/login';return false;" class="btn btn-secondary btn-lg" style="margin-left:var(--space-3);">Acceder al POS</a>
|
|
<div class="hero-stats" id="heroStats">
|
|
<div class="hero-stat">
|
|
<div class="number" id="statParts">1.5M+</div>
|
|
<div class="label">Partes</div>
|
|
</div>
|
|
<div class="hero-stat">
|
|
<div class="number" id="statBrands">36</div>
|
|
<div class="label">Marcas</div>
|
|
</div>
|
|
<div class="hero-stat">
|
|
<div class="number" id="statVehicles">85K+</div>
|
|
<div class="label">Vehiculos</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<section class="features">
|
|
<div class="container">
|
|
<h2 class="section-title">Por que Nexus</h2>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🔍</div>
|
|
<h3>Catalogo 1.5M+ Partes</h3>
|
|
<p>Base de datos TecDoc completa con partes OEM y aftermarket para vehiculos vendidos en Mexico, USA y Canada.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🚗</div>
|
|
<h3>Navegacion por Vehiculo</h3>
|
|
<p>Encuentra la parte exacta navegando por Marca, Modelo, Ano, Motor y Categoria. Sin adivinar numeros de parte.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🔄</div>
|
|
<h3>Cross-References OEM / Aftermarket</h3>
|
|
<p>Ve las equivalencias entre partes originales y alternativas de fabricantes como Bosch, Denso, Monroe, Gates y mas.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🌎</div>
|
|
<h3>Multi-Marca</h3>
|
|
<p>Toyota, Nissan, Ford, VW, Honda, Chevrolet, Hyundai, Kia, Mazda, BMW, Mercedes-Benz, Renault y mas.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How it works -->
|
|
<section class="how-it-works">
|
|
<div class="container">
|
|
<h2 class="section-title">Como Funciona</h2>
|
|
<div class="steps">
|
|
<div class="step">
|
|
<div class="step-number">1</div>
|
|
<h3>Selecciona tu Vehiculo</h3>
|
|
<p>Elige marca, modelo, ano y motor para filtrar las partes compatibles.</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">2</div>
|
|
<h3>Encuentra la Parte</h3>
|
|
<p>Navega por categorias o busca directamente por numero de parte OEM.</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">3</div>
|
|
<h3>Contacta un Distribuidor</h3>
|
|
<p>Consulta disponibilidad y precios con distribuidores de la red Nexus.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Brands -->
|
|
<section class="brands-section">
|
|
<div class="container">
|
|
<h2 class="section-title">Marcas Disponibles</h2>
|
|
<div class="brands-list" id="brandsList">
|
|
<!-- Filled by JS -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact -->
|
|
<section class="contact">
|
|
<div class="container">
|
|
<h2 class="section-title">Contacto</h2>
|
|
<div class="contact-grid">
|
|
<div class="contact-item">
|
|
<div class="icon">✉</div>
|
|
<h4>Email</h4>
|
|
<a href="mailto:ialcarazsalazar@consultoria-as.com">ialcarazsalazar@consultoria-as.com</a>
|
|
</div>
|
|
<div class="contact-item">
|
|
<div class="icon">📱</div>
|
|
<h4>WhatsApp</h4>
|
|
<a href="https://wa.me/526641234567" class="btn btn-whatsapp" target="_blank" rel="noopener">Enviar Mensaje</a>
|
|
</div>
|
|
<div class="contact-item">
|
|
<div class="icon">📍</div>
|
|
<h4>Ubicaciones</h4>
|
|
<p>Tijuana, B.C.</p>
|
|
<p>Guadalajara, Jal.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="site-footer">
|
|
<div class="container">
|
|
<p>© 2026 Nexus Autoparts. Todos los derechos reservados.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
function toggleTheme() {
|
|
var html = document.documentElement;
|
|
var current = html.getAttribute('data-theme');
|
|
var next = current === 'industrial' ? 'modern' : 'industrial';
|
|
html.setAttribute('data-theme', next);
|
|
localStorage.setItem('nexus-theme', next);
|
|
}
|
|
|
|
// Load live stats
|
|
fetch('/api/catalog/stats')
|
|
.then(r => r.json())
|
|
.then(d => {
|
|
if (d.parts) document.getElementById('statParts').textContent = (d.parts / 1e6).toFixed(1) + 'M+';
|
|
if (d.brands) document.getElementById('statBrands').textContent = d.brands;
|
|
if (d.vehicles) document.getElementById('statVehicles').textContent = (d.vehicles / 1e3).toFixed(0) + 'K+';
|
|
})
|
|
.catch(function(){});
|
|
|
|
// Load brands list
|
|
fetch('/api/catalog/brands')
|
|
.then(r => r.json())
|
|
.then(brands => {
|
|
var el = document.getElementById('brandsList');
|
|
el.innerHTML = brands.map(function(b) {
|
|
return '<a href="/catalog?brand=' + b.id_brand + '" class="brand-tag">' + b.name_brand + '</a>';
|
|
}).join('');
|
|
})
|
|
.catch(function(){});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|