Files
Autoparts-DB/pitch/deck.html
consultoria-as 9010b1634e feat: add investor pitch deck and /pitch route
13-slide F&F round presentation with roadmap, competitive landscape,
and updated product features. Accessible at /pitch endpoint.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-25 22:47:49 +00:00

1671 lines
55 KiB
HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nexus Autoparts — Friends & Family Round</title>
<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=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
/* === Reset & Variables === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg-primary: #0a0a0f;
--bg-secondary: #12121a;
--bg-card: #1a1a24;
--bg-hover: #252532;
--accent: #ff6b35;
--accent-hover: #ff8555;
--accent-glow: rgba(255, 107, 53, 0.3);
--accent-deep: #ff4500;
--text-primary: #ffffff;
--text-secondary: #a0a0b0;
--text-muted: #6a6a7a;
--border: #2a2a3a;
--success: #22c55e;
--warning: #f59e0b;
--info: #3b82f6;
}
html {
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
overflow-y: scroll;
overflow-x: hidden;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
}
/* === Slide Container === */
.slide {
min-height: 100vh;
width: 100%;
scroll-snap-align: start;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 40px;
position: relative;
overflow: hidden;
}
.slide-inner {
max-width: 1100px;
width: 100%;
z-index: 2;
}
/* === Slide Number === */
.slide-number {
position: absolute;
bottom: 24px;
right: 40px;
font-size: 0.8rem;
color: var(--text-muted);
font-weight: 500;
letter-spacing: 0.05em;
}
/* === Navigation === */
.nav-controls {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 12px;
z-index: 100;
background: rgba(18, 18, 26, 0.9);
backdrop-filter: blur(12px);
padding: 8px 16px;
border-radius: 40px;
border: 1px solid var(--border);
}
.nav-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
font-size: 1rem;
}
.nav-btn:hover {
border-color: var(--accent);
color: var(--accent);
background: rgba(255, 107, 53, 0.1);
}
.nav-dots {
display: flex;
gap: 6px;
}
.nav-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--border);
cursor: pointer;
transition: all 0.3s;
border: none;
}
.nav-dot.active {
background: var(--accent);
box-shadow: 0 0 8px var(--accent-glow);
transform: scale(1.2);
}
.nav-indicator {
font-size: 0.75rem;
color: var(--text-muted);
min-width: 40px;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* === Typography === */
.slide-label {
text-transform: uppercase;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--accent);
margin-bottom: 12px;
}
.slide-title {
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 800;
line-height: 1.15;
margin-bottom: 24px;
letter-spacing: -0.02em;
}
.slide-title .accent {
background: linear-gradient(135deg, var(--accent), var(--accent-deep));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.slide-subtitle {
font-size: 1.15rem;
color: var(--text-secondary);
max-width: 700px;
line-height: 1.7;
margin-bottom: 32px;
}
/* === Background Decorations === */
.bg-glow {
position: absolute;
border-radius: 50%;
filter: blur(120px);
opacity: 0.15;
pointer-events: none;
}
.bg-glow-orange {
background: var(--accent);
width: 500px;
height: 500px;
}
.bg-glow-blue {
background: var(--info);
width: 400px;
height: 400px;
}
/* === Stat Cards === */
.stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 32px;
}
.stat-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px;
text-align: center;
transition: border-color 0.3s;
}
.stat-card:hover {
border-color: var(--accent);
}
.stat-number {
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 800;
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
}
.stat-label {
font-size: 0.85rem;
color: var(--text-secondary);
margin-top: 6px;
font-weight: 500;
}
/* === Problem Cards === */
.problem-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 24px;
}
.problem-item {
display: flex;
gap: 16px;
align-items: flex-start;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 20px 24px;
transition: border-color 0.3s;
}
.problem-item:hover {
border-color: #ff4444;
}
.problem-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(255, 68, 68, 0.12);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: #ff6666;
}
.problem-text {
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-secondary);
}
.problem-text strong {
color: var(--text-primary);
}
/* === Solution Flow === */
.solution-flow {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: center;
gap: 16px;
margin-top: 32px;
}
.solution-node {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px 20px;
text-align: center;
}
.solution-node-icon {
font-size: 2rem;
margin-bottom: 12px;
}
.solution-node h4 {
font-size: 1rem;
margin-bottom: 6px;
}
.solution-node p {
font-size: 0.8rem;
color: var(--text-secondary);
}
.solution-arrow {
font-size: 1.5rem;
color: var(--accent);
}
/* === Feature Grid === */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 28px;
}
.feature-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px;
transition: all 0.3s;
}
.feature-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
}
.feature-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(255,107,53,0.15), rgba(255,69,0,0.08));
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
margin-bottom: 16px;
}
.feature-card h4 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 8px;
}
.feature-card p {
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.6;
}
/* === Market Circles (TAM/SAM/SOM) === */
.market-visual {
display: flex;
align-items: center;
gap: 48px;
margin-top: 32px;
}
.market-circles {
position: relative;
width: 320px;
height: 320px;
flex-shrink: 0;
}
.market-circle {
position: absolute;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.market-circle-tam {
width: 320px;
height: 320px;
background: rgba(255, 107, 53, 0.08);
border: 2px solid rgba(255, 107, 53, 0.25);
top: 0;
left: 0;
}
.market-circle-sam {
width: 220px;
height: 220px;
background: rgba(255, 107, 53, 0.14);
border: 2px solid rgba(255, 107, 53, 0.4);
top: 50px;
left: 50px;
}
.market-circle-som {
width: 120px;
height: 120px;
background: rgba(255, 107, 53, 0.25);
border: 2px solid var(--accent);
top: 100px;
left: 100px;
}
.market-circle span.label {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-muted);
font-weight: 700;
}
.market-circle span.value {
font-size: 1.2rem;
font-weight: 800;
color: var(--accent);
}
.market-circle-tam span.value { font-size: 1.6rem; }
.market-circle-tam span.label { margin-top: -60px; }
.market-circle-tam span.value { margin-top: 4px; }
.market-details {
flex: 1;
}
.market-detail-item {
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.market-detail-item:last-child {
border-bottom: none;
}
.market-detail-item h4 {
font-size: 0.9rem;
margin-bottom: 4px;
}
.market-detail-item p {
font-size: 0.8rem;
color: var(--text-secondary);
}
/* === Revenue Table === */
.revenue-section {
margin-top: 28px;
}
.pricing-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 28px;
}
.pricing-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px;
}
.pricing-card h4 {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
margin-bottom: 8px;
}
.pricing-card .price {
font-size: 1.6rem;
font-weight: 800;
color: var(--accent);
}
.pricing-card .price-note {
font-size: 0.8rem;
color: var(--text-muted);
margin-top: 4px;
}
.projection-table {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
}
.projection-table th,
.projection-table td {
padding: 14px 18px;
text-align: left;
border-bottom: 1px solid var(--border);
font-size: 0.9rem;
}
.projection-table th {
color: var(--text-secondary);
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.projection-table td {
color: var(--text-primary);
}
.projection-table .arr {
font-weight: 700;
color: var(--accent);
}
.projection-table .margin-badge {
display: inline-block;
background: rgba(34, 197, 94, 0.12);
color: var(--success);
padding: 3px 10px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
/* === Traction Stats === */
.traction-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-top: 28px;
}
.traction-item {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 22px;
display: flex;
align-items: center;
gap: 16px;
}
.traction-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(255,107,53,0.15), rgba(255,69,0,0.08));
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.traction-value {
font-size: 1.3rem;
font-weight: 800;
color: var(--accent);
line-height: 1.2;
}
.traction-label {
font-size: 0.78rem;
color: var(--text-secondary);
}
/* === Team === */
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
margin-top: 32px;
}
.team-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 20px;
padding: 36px;
text-align: center;
}
.team-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-deep));
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 800;
color: white;
}
.team-card h3 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 4px;
}
.team-card .team-role {
font-size: 0.9rem;
color: var(--accent);
font-weight: 600;
margin-bottom: 12px;
}
.team-card p {
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.6;
}
/* === Funds Chart === */
.funds-chart {
display: flex;
gap: 40px;
align-items: center;
margin-top: 32px;
}
.donut-container {
position: relative;
flex-shrink: 0;
}
.donut-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.donut-center .amount {
font-size: 1.4rem;
font-weight: 800;
color: var(--text-primary);
}
.donut-center .label {
font-size: 0.7rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.funds-legend {
flex: 1;
display: flex;
flex-direction: column;
gap: 14px;
}
.fund-item {
display: flex;
align-items: center;
gap: 14px;
}
.fund-color {
width: 14px;
height: 14px;
border-radius: 4px;
flex-shrink: 0;
}
.fund-info {
flex: 1;
}
.fund-info .fund-name {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-primary);
}
.fund-info .fund-detail {
font-size: 0.78rem;
color: var(--text-secondary);
}
.fund-amount {
font-weight: 700;
color: var(--accent);
font-size: 0.95rem;
white-space: nowrap;
}
/* === Ask / Investment === */
.ask-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 32px;
}
.ask-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px;
text-align: center;
}
.ask-card .ask-label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-muted);
font-weight: 700;
margin-bottom: 10px;
}
.ask-card .ask-value {
font-size: 1.5rem;
font-weight: 800;
color: var(--text-primary);
}
.ask-card.highlight {
border-color: var(--accent);
background: linear-gradient(135deg, rgba(255,107,53,0.06), rgba(255,69,0,0.03));
}
.ask-card.highlight .ask-value {
color: var(--accent);
}
.ask-bottom {
margin-top: 32px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px;
text-align: center;
}
.ask-bottom p {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.7;
}
.ask-bottom strong {
color: var(--accent);
}
/* === Contact Slide === */
.contact-center {
text-align: center;
}
.contact-divider {
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-deep));
border-radius: 2px;
margin: 24px auto;
}
.contact-info {
margin-top: 24px;
}
.contact-item {
font-size: 1rem;
color: var(--text-secondary);
margin: 10px 0;
}
.contact-item a {
color: var(--accent);
text-decoration: none;
}
.contact-item a:hover {
text-decoration: underline;
}
.contact-tagline {
margin-top: 40px;
font-size: 1.3rem;
font-weight: 700;
font-style: italic;
color: var(--text-muted);
}
/* === Cover === */
.cover-logo {
width: 80px;
height: 80px;
border-radius: 20px;
background: linear-gradient(135deg, var(--accent), var(--accent-deep));
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
font-weight: 900;
color: white;
margin-bottom: 32px;
box-shadow: 0 8px 32px var(--accent-glow);
}
.cover-title {
font-size: clamp(2.5rem, 5.5vw, 4.5rem);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.1;
margin-bottom: 16px;
}
.cover-tagline {
font-size: clamp(1rem, 2vw, 1.35rem);
color: var(--text-secondary);
margin-bottom: 40px;
font-weight: 400;
}
.cover-round {
display: inline-block;
padding: 10px 28px;
border: 1px solid var(--border);
border-radius: 40px;
font-size: 0.9rem;
font-weight: 600;
color: var(--text-secondary);
letter-spacing: 0.05em;
}
/* === Responsive === */
@media (max-width: 768px) {
.slide {
padding: 40px 20px;
}
.market-visual {
flex-direction: column;
}
.market-circles {
width: 240px;
height: 240px;
}
.market-circle-tam { width: 240px; height: 240px; }
.market-circle-sam { width: 165px; height: 165px; top: 37px; left: 37px; }
.market-circle-som { width: 90px; height: 90px; top: 75px; left: 75px; }
.solution-flow {
grid-template-columns: 1fr;
gap: 8px;
}
.solution-arrow {
transform: rotate(90deg);
text-align: center;
}
.pricing-row {
grid-template-columns: 1fr;
}
.funds-chart {
flex-direction: column;
}
.nav-dots {
display: none;
}
.feature-grid {
grid-template-columns: 1fr;
}
.traction-grid {
grid-template-columns: 1fr;
}
.stats-row {
grid-template-columns: 1fr 1fr;
}
.ask-grid {
grid-template-columns: 1fr 1fr;
}
.team-grid {
grid-template-columns: 1fr;
}
}
/* === Print === */
@media print {
html {
scroll-snap-type: none;
}
.slide {
min-height: auto;
page-break-after: always;
page-break-inside: avoid;
padding: 40px;
scroll-snap-align: none;
}
.nav-controls {
display: none !important;
}
.slide-number {
display: none;
}
body {
background: white;
color: #111;
}
.slide-title, .stat-number, .traction-value, .ask-card .ask-value,
.pricing-card .price, .fund-amount, .projection-table .arr {
color: #d44a00 !important;
-webkit-text-fill-color: #d44a00 !important;
}
.slide-title .accent {
-webkit-text-fill-color: #d44a00 !important;
}
.slide-subtitle, .problem-text, .feature-card p,
.market-detail-item p, .team-card p, .contact-item,
.stat-label, .traction-label, .fund-info .fund-detail,
.projection-table td, .pricing-card .price-note, .ask-card .ask-label,
.slide-label, .cover-tagline, .cover-round {
color: #444 !important;
}
.bg-glow {
display: none;
}
.stat-card, .problem-item, .feature-card, .traction-item,
.team-card, .ask-card, .pricing-card, .ask-bottom, .solution-node {
background: #f8f8f8;
border-color: #ddd;
}
.cover-logo {
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
}
/* === Animations === */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.slide-inner > * {
animation: fadeInUp 0.5s ease-out both;
}
.slide-inner > *:nth-child(2) { animation-delay: 0.1s; }
.slide-inner > *:nth-child(3) { animation-delay: 0.2s; }
.slide-inner > *:nth-child(4) { animation-delay: 0.3s; }
</style>
</head>
<body>
<!-- ============ SLIDE 1: COVER ============ -->
<section class="slide" id="slide-1">
<div class="bg-glow bg-glow-orange" style="top:-200px;right:-150px;"></div>
<div class="bg-glow bg-glow-blue" style="bottom:-100px;left:-100px;"></div>
<div class="slide-inner">
<div class="cover-logo">N</div>
<div class="cover-title">NEXUS <span style="background:linear-gradient(135deg,var(--accent),var(--accent-deep));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;">AUTOPARTS</span></div>
<div class="cover-tagline">Tu conexion directa con las partes que necesitas</div>
<div class="cover-round">Ronda Friends & Family &mdash; Marzo 2026</div>
</div>
<div class="slide-number">1 / 13</div>
</section>
<!-- ============ SLIDE 2: EL PROBLEMA ============ -->
<section class="slide" id="slide-2">
<div class="bg-glow bg-glow-orange" style="bottom:-250px;left:-200px;"></div>
<div class="slide-inner">
<div class="slide-label">El Problema</div>
<div class="slide-title">Una industria de <span class="accent">$20B USD</span> atrapada en el pasado</div>
<div class="slide-subtitle">El mercado de autopartes de refaccion en Mexico esta fragmentado, es analogico e ineficiente.</div>
<div class="problem-list">
<div class="problem-item">
<div class="problem-icon">&#9742;</div>
<div class="problem-text"><strong>Talleres pierden horas</strong> llamando a multiples distribuidores para comparar precios y disponibilidad de una sola pieza.</div>
</div>
<div class="problem-item">
<div class="problem-icon">&#10060;</div>
<div class="problem-text"><strong>Bodegas sin canal digital</strong> — no tienen forma eficiente de mostrar su inventario a talleres mecanicos cercanos.</div>
</div>
<div class="problem-item">
<div class="problem-icon">&#128269;</div>
<div class="problem-text"><strong>Sin catalogo centralizado</strong> que conecte numeros OEM con alternativas aftermarket mediante cross-references.</div>
</div>
<div class="problem-item">
<div class="problem-icon">&#9888;</div>
<div class="problem-text"><strong>Mercado de $20B USD anuales</strong> en Mexico, con mas de 50,000 talleres y 5,000+ distribuidores, operando sin herramientas digitales integradas.</div>
</div>
</div>
</div>
<div class="slide-number">2 / 13</div>
</section>
<!-- ============ SLIDE 3: LA SOLUCION ============ -->
<section class="slide" id="slide-3">
<div class="bg-glow bg-glow-blue" style="top:-200px;right:-200px;"></div>
<div class="slide-inner">
<div class="slide-label">La Solucion</div>
<div class="slide-title">Un marketplace <span class="accent">inteligente</span> de autopartes</div>
<div class="slide-subtitle">Nexus Autoparts conecta talleres con bodegas a traves de un catalogo inteligente de partes con disponibilidad y precios en tiempo real.</div>
<div class="solution-flow">
<div class="solution-node">
<div class="solution-node-icon">&#128295;</div>
<h4>Taller</h4>
<p>Busca una pieza por vehiculo o numero de parte</p>
</div>
<div class="solution-arrow">&#8594;</div>
<div class="solution-node" style="border-color:var(--accent);">
<div class="solution-node-icon">&#9889;</div>
<h4 style="color:var(--accent);">Nexus</h4>
<p>Catalogo inteligente con 1.5M+ partes y cross-references</p>
</div>
<div class="solution-arrow">&#8594;</div>
<div class="solution-node">
<div class="solution-node-icon">&#127970;</div>
<h4>Bodegas</h4>
<p>Inventario, precios y disponibilidad en tiempo real</p>
</div>
</div>
<div class="stats-row" style="margin-top:32px;">
<div class="stat-card">
<div class="stat-number">1 busqueda</div>
<div class="stat-label">Todas las opciones, todos los proveedores</div>
</div>
<div class="stat-card">
<div class="stat-number">OEM &#8596; After</div>
<div class="stat-label">Cross-references automaticas</div>
</div>
<div class="stat-card">
<div class="stat-number">CSV/Excel</div>
<div class="stat-label">Bodegas suben su inventario facilmente</div>
</div>
</div>
</div>
<div class="slide-number">3 / 13</div>
</section>
<!-- ============ SLIDE 4: EL PRODUCTO ============ -->
<section class="slide" id="slide-4">
<div class="bg-glow bg-glow-orange" style="top:-100px;left:-200px;"></div>
<div class="slide-inner">
<div class="slide-label">El Producto</div>
<div class="slide-title">Construido, funcional y <span class="accent">en expansion</span></div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:10px;">
<div>
<h4 style="color:var(--accent);margin-bottom:12px;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.1em;">Ya construido</h4>
<div class="feature-grid" style="grid-template-columns:1fr;">
<div class="feature-card" style="padding:14px 18px;">
<h4 style="font-size:0.95rem;">&#128218; Catalogo Inteligente</h4>
<p style="font-size:0.8rem;">1.5M+ partes OEM, 304K+ aftermarket, 15.8M cross-references via TecDoc</p>
</div>
<div class="feature-card" style="padding:14px 18px;">
<h4 style="font-size:0.95rem;">&#128663; Navegacion por Vehiculo</h4>
<p style="font-size:0.8rem;">Marca &rarr; Modelo &rarr; Ano &rarr; Motor. 6 marcas integradas</p>
</div>
<div class="feature-card" style="padding:14px 18px;">
<h4 style="font-size:0.95rem;">&#128230; Panel de Bodega</h4>
<p style="font-size:0.8rem;">Upload de inventario CSV/Excel con mapeo flexible de columnas</p>
</div>
<div class="feature-card" style="padding:14px 18px;">
<h4 style="font-size:0.95rem;">&#128274; Sistema SaaS Multi-Tenant</h4>
<p style="font-size:0.8rem;">Auth JWT, roles Admin/Taller/Bodega, disponibilidad multi-bodega</p>
</div>
</div>
</div>
<div>
<h4 style="color:var(--info);margin-bottom:12px;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.1em;">Roadmap con fondos</h4>
<div class="feature-grid" style="grid-template-columns:1fr;">
<div class="feature-card" style="padding:14px 18px;border-color:var(--info);">
<h4 style="font-size:0.95rem;">&#129534; Facturacion CFDI 4.0</h4>
<p style="font-size:0.8rem;">Facturacion electronica integrada via Facturapi. Obligatorio en Mexico</p>
</div>
<div class="feature-card" style="padding:14px 18px;border-color:var(--info);">
<h4 style="font-size:0.95rem;">&#128269; VIN Decoder + Carrito Unificado</h4>
<p style="font-size:0.8rem;">Identifica vehiculo por VIN. Ordena de multiples bodegas en un click</p>
</div>
<div class="feature-card" style="padding:14px 18px;border-color:var(--info);">
<h4 style="font-size:0.95rem;">&#128172; WhatsApp + Chatbot IA</h4>
<p style="font-size:0.8rem;">Busca partes por WhatsApp o lenguaje natural en espanol</p>
</div>
<div class="feature-card" style="padding:14px 18px;border-color:var(--info);">
<h4 style="font-size:0.95rem;">&#128179; Credito BNPL + Sync ERP</h4>
<p style="font-size:0.8rem;">Credito "compra ahora, paga despues" via APLAZO. Sync con Aspel/Contpaqi</p>
</div>
</div>
</div>
</div>
</div>
<div class="slide-number">4 / 13</div>
</section>
<!-- ============ SLIDE 5: TAMANO DE MERCADO ============ -->
<section class="slide" id="slide-5">
<div class="bg-glow bg-glow-blue" style="bottom:-200px;right:-150px;"></div>
<div class="slide-inner">
<div class="slide-label">Tamano de Mercado</div>
<div class="slide-title">Un mercado <span class="accent">masivo</span> y en crecimiento</div>
<div class="market-visual">
<div class="market-circles">
<div class="market-circle market-circle-tam">
<span class="label">TAM</span>
<span class="value">$20B</span>
</div>
<div class="market-circle market-circle-sam">
<span class="label">SAM</span>
<span class="value">$5B</span>
</div>
<div class="market-circle market-circle-som">
<span class="label">SOM</span>
<span class="value">$200M</span>
</div>
</div>
<div class="market-details">
<div class="market-detail-item">
<h4 style="color:var(--accent);">TAM &mdash; $20B USD/ano</h4>
<p>Mercado total de autopartes de refaccion en Mexico</p>
</div>
<div class="market-detail-item">
<h4 style="color:var(--accent);">SAM &mdash; $5B USD</h4>
<p>Segmento digitalizable: partes vendidas por distribuidores a talleres independientes</p>
</div>
<div class="market-detail-item">
<h4 style="color:var(--accent);">SOM &mdash; $200M USD</h4>
<p>Objetivo primeros 2 anos: zonas metropolitanas de Tijuana y Guadalajara</p>
</div>
<div class="market-detail-item">
<h4>50,000+</h4>
<p>Talleres mecanicos en Mexico</p>
</div>
<div class="market-detail-item">
<h4>50M+</h4>
<p>Vehiculos registrados en Mexico, flota en constante crecimiento</p>
</div>
</div>
</div>
</div>
<div class="slide-number">5 / 13</div>
</section>
<!-- ============ SLIDE 6: MODELO DE NEGOCIO ============ -->
<section class="slide" id="slide-6">
<div class="bg-glow bg-glow-orange" style="top:-200px;right:-100px;"></div>
<div class="slide-inner">
<div class="slide-label">Modelo de Negocio</div>
<div class="slide-title">SaaS con <span class="accent">85%+ margen bruto</span></div>
<div class="revenue-section">
<div class="pricing-row">
<div class="pricing-card">
<h4>Bodegas / Distribuidores</h4>
<div class="price">$2,000 - $5,000 MXN</div>
<div class="price-note">por mes, segun catalogo y funcionalidades</div>
</div>
<div class="pricing-card">
<h4>Talleres Mecanicos</h4>
<div class="price">$500 - $1,000 MXN</div>
<div class="price-note">por mes, segun funcionalidades</div>
</div>
</div>
<div class="slide-label" style="margin-top:8px;">Proyecciones de Ingresos</div>
<table class="projection-table">
<thead>
<tr>
<th>Ano</th>
<th>Bodegas</th>
<th>Talleres</th>
<th>ARR (MXN)</th>
<th>ARR (USD)</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Ano 1</strong></td>
<td>20</td>
<td>100</td>
<td class="arr">$1.5M</td>
<td class="arr">$88K</td>
</tr>
<tr>
<td><strong>Ano 2</strong></td>
<td>80</td>
<td>500</td>
<td class="arr">$7.8M</td>
<td class="arr">$458K</td>
</tr>
<tr>
<td><strong>Ano 3</strong></td>
<td>200</td>
<td>2,000</td>
<td class="arr">$30M</td>
<td class="arr">$1.76M</td>
</tr>
</tbody>
</table>
<div style="margin-top:16px;text-align:right;">
<span class="margin-badge" style="display:inline-block;background:rgba(34,197,94,0.12);color:#22c55e;padding:6px 16px;border-radius:20px;font-size:0.85rem;font-weight:600;">Margen Bruto: 85%+</span>
</div>
</div>
</div>
<div class="slide-number">6 / 13</div>
</section>
<!-- ============ SLIDE 7: TRACCION Y TECNOLOGIA ============ -->
<section class="slide" id="slide-7">
<div class="bg-glow bg-glow-blue" style="top:-100px;left:-200px;"></div>
<div class="slide-inner">
<div class="slide-label">Traccion y Tecnologia</div>
<div class="slide-title">Plataforma <span class="accent">construida</span>, lista para lanzar</div>
<div class="slide-subtitle">No es un prototipo. El producto esta construido, el catalogo esta cargado, y la infraestructura SaaS esta lista.</div>
<div class="traction-grid">
<div class="traction-item">
<div class="traction-icon">&#128218;</div>
<div>
<div class="traction-value">1.5M+</div>
<div class="traction-label">Partes OEM catalogadas</div>
</div>
</div>
<div class="traction-item">
<div class="traction-icon">&#128260;</div>
<div>
<div class="traction-value">304K+</div>
<div class="traction-label">Partes aftermarket</div>
</div>
</div>
<div class="traction-item">
<div class="traction-icon">&#128279;</div>
<div>
<div class="traction-value">15.8M+</div>
<div class="traction-label">Cross-references</div>
</div>
</div>
<div class="traction-item">
<div class="traction-icon">&#128663;</div>
<div>
<div class="traction-value">6</div>
<div class="traction-label">Marcas integradas (Toyota, Nissan, Renault, Ford, VW, Honda)</div>
</div>
</div>
<div class="traction-item">
<div class="traction-icon">&#127760;</div>
<div>
<div class="traction-value">13.5B+</div>
<div class="traction-label">Links vehiculo-a-parte</div>
</div>
</div>
<div class="traction-item">
<div class="traction-icon">&#9989;</div>
<div>
<div class="traction-value">Listo</div>
<div class="traction-label">Auth, inventory uploads, multi-tenant SaaS</div>
</div>
</div>
</div>
</div>
<div class="slide-number">7 / 13</div>
</section>
<!-- ============ SLIDE 8: EQUIPO ============ -->
<section class="slide" id="slide-8">
<div class="bg-glow bg-glow-orange" style="bottom:-200px;right:-150px;"></div>
<div class="slide-inner">
<div class="slide-label">El Equipo</div>
<div class="slide-title">Fundadores con <span class="accent">vision</span> y ejecucion</div>
<div class="team-grid">
<div class="team-card">
<div class="team-avatar">IA</div>
<h3>Ivan Alcaraz</h3>
<div class="team-role">Founder & CEO</div>
<p>Liderazgo en tecnologia y operaciones. Responsable de la vision del producto, arquitectura tecnica y estrategia de crecimiento. Profundo conocimiento de la industria de autopartes en Mexico.</p>
</div>
<div class="team-card">
<div class="team-avatar">C</div>
<h3>Carlos</h3>
<div class="team-role">Co-Founder & CFO</div>
<p>Finanzas y estrategia. Responsable de la estructura financiera, proyecciones, relacion con inversionistas y operaciones administrativas de la empresa.</p>
</div>
</div>
<div style="margin-top:32px;text-align:center;">
<div style="display:inline-block;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:20px 40px;">
<div style="font-size:0.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px;">Ubicaciones</div>
<div style="font-size:1.1rem;font-weight:600;">Tijuana & Guadalajara, Mexico</div>
</div>
</div>
</div>
<div class="slide-number">8 / 13</div>
</section>
<!-- ============ SLIDE 9: USO DE FONDOS ============ -->
<section class="slide" id="slide-9">
<div class="bg-glow bg-glow-blue" style="top:-200px;left:-100px;"></div>
<div class="slide-inner">
<div class="slide-label">Uso de Fondos</div>
<div class="slide-title">Plan de inversion: <span class="accent">$50K USD</span></div>
<div class="funds-chart">
<div class="donut-container">
<svg width="260" height="260" viewBox="0 0 260 260">
<!-- Donut chart segments -->
<!-- Desarrollo 30% (108deg) -->
<circle cx="130" cy="130" r="100" fill="none" stroke="#ff6b35" stroke-width="36"
stroke-dasharray="188.5 439.8" stroke-dashoffset="0"
transform="rotate(-90 130 130)"/>
<!-- Ventas 24% (86.4deg) -->
<circle cx="130" cy="130" r="100" fill="none" stroke="#ff8555" stroke-width="36"
stroke-dasharray="150.8 477.5" stroke-dashoffset="-188.5"
transform="rotate(-90 130 130)"/>
<!-- Infraestructura 20% (72deg) -->
<circle cx="130" cy="130" r="100" fill="none" stroke="#3b82f6" stroke-width="36"
stroke-dasharray="125.7 502.7" stroke-dashoffset="-339.3"
transform="rotate(-90 130 130)"/>
<!-- Marketing 16% (57.6deg) -->
<circle cx="130" cy="130" r="100" fill="none" stroke="#22c55e" stroke-width="36"
stroke-dasharray="100.5 527.8" stroke-dashoffset="-465.0"
transform="rotate(-90 130 130)"/>
<!-- Legal 10% (36deg) -->
<circle cx="130" cy="130" r="100" fill="none" stroke="#f59e0b" stroke-width="36"
stroke-dasharray="62.8 565.5" stroke-dashoffset="-565.5"
transform="rotate(-90 130 130)"/>
</svg>
<div class="donut-center">
<div class="amount">$50K</div>
<div class="label">USD Total</div>
</div>
</div>
<div class="funds-legend">
<div class="fund-item">
<div class="fund-color" style="background:#ff6b35;"></div>
<div class="fund-info">
<div class="fund-name">Desarrollo de Producto</div>
<div class="fund-detail">CFDI, VIN decoder, WhatsApp, chatbot IA, BNPL, sync ERP</div>
</div>
<div class="fund-amount">$18K (36%)</div>
</div>
<div class="fund-item">
<div class="fund-color" style="background:#ff8555;"></div>
<div class="fund-info">
<div class="fund-name">Ventas y Onboarding</div>
<div class="fund-detail">Adquisicion de bodegas y talleres en TJ y GDL</div>
</div>
<div class="fund-amount">$8K (16%)</div>
</div>
<div class="fund-item">
<div class="fund-color" style="background:#3b82f6;"></div>
<div class="fund-info">
<div class="fund-name">Infraestructura y APIs</div>
<div class="fund-detail">Servidores, TecDoc, Facturapi, WhatsApp Business API</div>
</div>
<div class="fund-amount">$8K (16%)</div>
</div>
<div class="fund-item">
<div class="fund-color" style="background:#22c55e;"></div>
<div class="fund-info">
<div class="fund-name">Operacion</div>
<div class="fund-detail">Buffer operativo 6 meses, contabilidad</div>
</div>
<div class="fund-amount">$6K (12%)</div>
</div>
<div class="fund-item">
<div class="fund-color" style="background:#a855f7;"></div>
<div class="fund-info">
<div class="fund-name">APIs Externas</div>
<div class="fund-detail">TecDoc data, APLAZO integracion, servicios de delivery</div>
</div>
<div class="fund-amount">$6K (12%)</div>
</div>
<div class="fund-item">
<div class="fund-color" style="background:#f59e0b;"></div>
<div class="fund-info">
<div class="fund-name">Legal</div>
<div class="fund-detail">Constitucion, documentos SAFE, contratos</div>
</div>
<div class="fund-amount">$4K (8%)</div>
</div>
</div>
</div>
</div>
<div class="slide-number">9 / 13</div>
</section>
<!-- ============ SLIDE 10: ROADMAP ============ -->
<section class="slide" id="slide-10">
<div class="bg-glow bg-glow-orange" style="top:-100px;right:-200px;"></div>
<div class="slide-inner">
<div class="slide-label">Roadmap</div>
<div class="slide-title">Ejecucion en <span class="accent">4 fases</span></div>
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px;">
<div style="background:var(--bg-card);border:1px solid var(--accent);border-radius:12px;padding:20px;position:relative;">
<div style="position:absolute;top:-12px;left:16px;background:var(--accent);color:#000;font-size:0.7rem;font-weight:700;padding:2px 10px;border-radius:20px;">FASE 1</div>
<div style="font-size:0.75rem;color:var(--text-muted);margin-top:4px;">Mes 1-2</div>
<h4 style="font-size:1rem;margin:8px 0 6px;">Vender Ya</h4>
<p style="font-size:0.8rem;color:var(--text-secondary);line-height:1.5;">
&#129534; CFDI 4.0 (Facturapi)<br>
&#11088; Quality badges<br>
&#128100; Onboarding clientes
</p>
<div style="margin-top:10px;font-size:0.75rem;color:var(--accent);font-weight:600;">~$3K dev</div>
</div>
<div style="background:var(--bg-card);border:1px solid var(--info);border-radius:12px;padding:20px;position:relative;">
<div style="position:absolute;top:-12px;left:16px;background:var(--info);color:#fff;font-size:0.7rem;font-weight:700;padding:2px 10px;border-radius:20px;">FASE 2</div>
<div style="font-size:0.75rem;color:var(--text-muted);margin-top:4px;">Mes 3-4</div>
<h4 style="font-size:1rem;margin:8px 0 6px;">Retener</h4>
<p style="font-size:0.8rem;color:var(--text-secondary);line-height:1.5;">
&#128269; VIN Decoder<br>
&#128722; Carrito unificado<br>
&#127919; Primeros ingresos
</p>
<div style="margin-top:10px;font-size:0.75rem;color:var(--info);font-weight:600;">~$5K dev</div>
</div>
<div style="background:var(--bg-card);border:1px solid var(--success);border-radius:12px;padding:20px;position:relative;">
<div style="position:absolute;top:-12px;left:16px;background:var(--success);color:#000;font-size:0.7rem;font-weight:700;padding:2px 10px;border-radius:20px;">FASE 3</div>
<div style="font-size:0.75rem;color:var(--text-muted);margin-top:4px;">Mes 5-6</div>
<h4 style="font-size:1rem;margin:8px 0 6px;">Escalar</h4>
<p style="font-size:0.8rem;color:var(--text-secondary);line-height:1.5;">
&#128172; WhatsApp Business<br>
&#129302; Chatbot IA espanol<br>
&#128200; Adopcion masiva
</p>
<div style="margin-top:10px;font-size:0.75rem;color:var(--success);font-weight:600;">~$5K dev</div>
</div>
<div style="background:var(--bg-card);border:1px solid var(--warning);border-radius:12px;padding:20px;position:relative;">
<div style="position:absolute;top:-12px;left:16px;background:var(--warning);color:#000;font-size:0.7rem;font-weight:700;padding:2px 10px;border-radius:20px;">FASE 4</div>
<div style="font-size:0.75rem;color:var(--text-muted);margin-top:4px;">Mes 7+</div>
<h4 style="font-size:1rem;margin:8px 0 6px;">Monetizar+</h4>
<p style="font-size:0.8rem;color:var(--text-secondary);line-height:1.5;">
&#128179; BNPL (APLAZO)<br>
&#128259; Sync ERP real-time<br>
&#128640; Siguiente ronda
</p>
<div style="margin-top:10px;font-size:0.75rem;color:var(--warning);font-weight:600;">~$5K dev</div>
</div>
</div>
<div style="text-align:center;margin-top:24px;color:var(--text-secondary);font-size:0.9rem;">
Cada fase se autofinancia con los ingresos de la anterior &mdash; <strong style="color:var(--accent);">crecimiento sostenible</strong>
</div>
</div>
<div class="slide-number">10 / 13</div>
</section>
<!-- ============ SLIDE 11: COMPETENCIA ============ -->
<section class="slide" id="slide-11">
<div class="bg-glow bg-glow-blue" style="bottom:-200px;left:-100px;"></div>
<div class="slide-inner">
<div class="slide-label">Panorama Competitivo</div>
<div class="slide-title">Nuestro <span class="accent">diferenciador</span></div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px;">
<div>
<h4 style="color:var(--text-secondary);margin-bottom:16px;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.1em;">Competidores en Mexico</h4>
<div style="display:flex;flex-direction:column;gap:12px;">
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:14px 18px;">
<div style="display:flex;justify-content:space-between;align-items:center;">
<strong>Pitz</strong>
<span style="font-size:0.75rem;color:var(--warning);background:rgba(245,158,11,0.15);padding:2px 8px;border-radius:4px;">$2.1M levantados</span>
</div>
<p style="font-size:0.8rem;color:var(--text-secondary);margin-top:4px;">IA + diagnostico. Sin catalogo profundo ni multi-bodega</p>
</div>
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:14px 18px;">
<div style="display:flex;justify-content:space-between;align-items:center;">
<strong>Meru</strong>
<span style="font-size:0.75rem;color:var(--info);background:rgba(59,130,246,0.15);padding:2px 8px;border-radius:4px;">Y Combinator</span>
</div>
<p style="font-size:0.8rem;color:var(--text-secondary);margin-top:4px;">7K usuarios, programa de lealtad. Sin cross-references ni catalogo TecDoc</p>
</div>
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:14px 18px;">
<strong>AutoZone MX / ML</strong>
<p style="font-size:0.8rem;color:var(--text-secondary);margin-top:4px;">Retail directo. No es marketplace B2B ni conecta bodegas con talleres</p>
</div>
</div>
</div>
<div>
<h4 style="color:var(--accent);margin-bottom:16px;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.1em;">Ventaja Nexus</h4>
<div style="display:flex;flex-direction:column;gap:12px;">
<div style="background:var(--bg-card);border:1px solid var(--accent);border-radius:10px;padding:14px 18px;">
<strong style="color:var(--accent);">Catalogo mas profundo</strong>
<p style="font-size:0.8rem;color:var(--text-secondary);margin-top:4px;">1.5M partes OEM + 304K aftermarket + 15.8M cross-refs. Ningun competidor MX tiene esto</p>
</div>
<div style="background:var(--bg-card);border:1px solid var(--accent);border-radius:10px;padding:14px 18px;">
<strong style="color:var(--accent);">Multi-bodega real</strong>
<p style="font-size:0.8rem;color:var(--text-secondary);margin-top:4px;">Compara precios y stock de todas las bodegas en una busqueda. Carrito unificado</p>
</div>
<div style="background:var(--bg-card);border:1px solid var(--accent);border-radius:10px;padding:14px 18px;">
<strong style="color:var(--accent);">Full-stack: CFDI + WhatsApp + IA + BNPL</strong>
<p style="font-size:0.8rem;color:var(--text-secondary);margin-top:4px;">Todo integrado en una plataforma. Facturacion, credito, y canal WhatsApp que nadie ofrece junto</p>
</div>
</div>
</div>
</div>
</div>
<div class="slide-number">11 / 13</div>
</section>
<!-- ============ SLIDE 12: LA OPORTUNIDAD ============ -->
<section class="slide" id="slide-12">
<div class="bg-glow bg-glow-orange" style="top:-150px;right:-150px;"></div>
<div class="bg-glow bg-glow-blue" style="bottom:-150px;left:-100px;"></div>
<div class="slide-inner">
<div class="slide-label">La Oportunidad</div>
<div class="slide-title">Invierte en el <span class="accent">futuro</span> de las autopartes</div>
<div class="ask-grid">
<div class="ask-card">
<div class="ask-label">Instrumento</div>
<div class="ask-value">SAFE</div>
</div>
<div class="ask-card highlight">
<div class="ask-label">Levantando</div>
<div class="ask-value">$50,000 USD</div>
</div>
<div class="ask-card">
<div class="ask-label">Valuation Cap</div>
<div class="ask-value">$1M USD</div>
</div>
<div class="ask-card">
<div class="ask-label">Descuento</div>
<div class="ask-value">20%</div>
</div>
<div class="ask-card">
<div class="ask-label">Ticket Minimo</div>
<div class="ask-value">$5,000 USD</div>
</div>
</div>
<div class="ask-bottom">
<p>
<strong>SAFE (Simple Agreement for Future Equity)</strong> &mdash; Sin fecha de expiracion.<br>
Entrada temprana a un mercado de <strong>$20B USD</strong> con tecnologia probada, producto construido y equipo comprometido.<br>
Descuento del <strong>20%</strong> sobre la siguiente ronda calificada de financiamiento.
</p>
</div>
</div>
<div class="slide-number">12 / 13</div>
</section>
<!-- ============ SLIDE 13: CONTACTO ============ -->
<section class="slide" id="slide-13">
<div class="bg-glow bg-glow-orange" style="top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;opacity:0.08;"></div>
<div class="slide-inner contact-center">
<div class="cover-logo" style="margin:0 auto 24px;">N</div>
<div class="slide-title">NEXUS <span class="accent">AUTOPARTS</span></div>
<div class="contact-divider"></div>
<div class="contact-info">
<div class="contact-item" style="font-size:1.15rem;font-weight:600;color:var(--text-primary);">Ivan Alcaraz</div>
<div class="contact-item"><a href="mailto:ialcarazsalazar@consultoria-as.com">ialcarazsalazar@consultoria-as.com</a></div>
<div class="contact-item" style="margin-top:20px;">Tijuana & Guadalajara, Mexico</div>
</div>
<div class="contact-tagline">"Tu conexion directa con las partes que necesitas"</div>
</div>
<div class="slide-number">13 / 13</div>
</section>
<!-- === Navigation Controls === -->
<nav class="nav-controls" aria-label="Slide navigation">
<button class="nav-btn" onclick="goSlide(-1)" aria-label="Previous slide">&#8592;</button>
<div class="nav-dots" id="nav-dots"></div>
<span class="nav-indicator" id="nav-indicator">1 / 13</span>
<button class="nav-btn" onclick="goSlide(1)" aria-label="Next slide">&#8594;</button>
</nav>
<script>
(function() {
const TOTAL = 13;
let current = 1;
const dotsContainer = document.getElementById('nav-dots');
const indicator = document.getElementById('nav-indicator');
// Create dots
for (let i = 1; i <= TOTAL; i++) {
const dot = document.createElement('button');
dot.className = 'nav-dot' + (i === 1 ? ' active' : '');
dot.setAttribute('aria-label', 'Go to slide ' + i);
dot.dataset.slide = i;
dot.addEventListener('click', function() {
scrollToSlide(parseInt(this.dataset.slide));
});
dotsContainer.appendChild(dot);
}
function scrollToSlide(n) {
n = Math.max(1, Math.min(TOTAL, n));
const el = document.getElementById('slide-' + n);
if (el) el.scrollIntoView({ behavior: 'smooth' });
}
window.goSlide = function(dir) {
scrollToSlide(current + dir);
};
function updateCurrent() {
const slides = document.querySelectorAll('.slide');
let closest = 1;
let minDist = Infinity;
slides.forEach(function(s, i) {
const rect = s.getBoundingClientRect();
const dist = Math.abs(rect.top);
if (dist < minDist) {
minDist = dist;
closest = i + 1;
}
});
if (closest !== current) {
current = closest;
indicator.textContent = current + ' / ' + TOTAL;
document.querySelectorAll('.nav-dot').forEach(function(d, i) {
d.classList.toggle('active', i + 1 === current);
});
}
}
// Throttled scroll listener
let ticking = false;
window.addEventListener('scroll', function() {
if (!ticking) {
requestAnimationFrame(function() {
updateCurrent();
ticking = false;
});
ticking = true;
}
});
// Keyboard navigation
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === 'PageDown') {
e.preventDefault();
goSlide(1);
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp' || e.key === 'PageUp') {
e.preventDefault();
goSlide(-1);
} else if (e.key === 'Home') {
e.preventDefault();
scrollToSlide(1);
} else if (e.key === 'End') {
e.preventDefault();
scrollToSlide(TOTAL);
}
});
updateCurrent();
})();
</script>
</body>
</html>