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>
1671 lines
55 KiB
HTML
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 — 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">☎</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">❌</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">🔍</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">⚠</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">🔧</div>
|
|
<h4>Taller</h4>
|
|
<p>Busca una pieza por vehiculo o numero de parte</p>
|
|
</div>
|
|
<div class="solution-arrow">→</div>
|
|
<div class="solution-node" style="border-color:var(--accent);">
|
|
<div class="solution-node-icon">⚡</div>
|
|
<h4 style="color:var(--accent);">Nexus</h4>
|
|
<p>Catalogo inteligente con 1.5M+ partes y cross-references</p>
|
|
</div>
|
|
<div class="solution-arrow">→</div>
|
|
<div class="solution-node">
|
|
<div class="solution-node-icon">🏢</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 ↔ 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;">📚 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;">🚗 Navegacion por Vehiculo</h4>
|
|
<p style="font-size:0.8rem;">Marca → Modelo → Ano → Motor. 6 marcas integradas</p>
|
|
</div>
|
|
<div class="feature-card" style="padding:14px 18px;">
|
|
<h4 style="font-size:0.95rem;">📦 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;">🔒 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;">🧾 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;">🔍 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;">💬 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;">💳 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 — $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 — $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 — $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">📚</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">🔄</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">🔗</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">🚗</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">🌐</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">✅</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;">
|
|
🧾 CFDI 4.0 (Facturapi)<br>
|
|
⭐ Quality badges<br>
|
|
👤 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;">
|
|
🔍 VIN Decoder<br>
|
|
🛒 Carrito unificado<br>
|
|
🎯 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;">
|
|
💬 WhatsApp Business<br>
|
|
🤖 Chatbot IA espanol<br>
|
|
📈 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;">
|
|
💳 BNPL (APLAZO)<br>
|
|
🔃 Sync ERP real-time<br>
|
|
🚀 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 — <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> — 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">←</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">→</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>
|