feat: rebuild web — landing page + catalogo publico con navegacion por vehiculo
Removidas paginas viejas (demo, tienda, admin, pos, captura, cuentas). Nueva landing page con estilo del design system (tokens.css, 2 temas). Catalogo publico sin auth con navegacion Marca>Modelo>Ano>Motor>Categoria>Partes. Endpoints /api/catalog/* publicos con filtro NORTH_AMERICA_BRANDS (36 marcas). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
502
dashboard/landing.html
Normal file
502
dashboard/landing.html
Normal file
@@ -0,0 +1,502 @@
|
||||
<!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>
|
||||
</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>
|
||||
<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>
|
||||
Reference in New Issue
Block a user