87028143ee
- tokens.css: CSS custom properties para Tema A (Industrial) y Tema B (Moderno) - design-system/index.html: 20 componentes con theme switcher - social-media/: 3 propuestas de look & feel para redes sociales - branding/: opciones de branding y look & feel aprobadas - Brief del proyecto incluido
516 lines
22 KiB
HTML
516 lines
22 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 - Opciones de Branding</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;800&family=Barlow:wght@400;700&family=Poppins:wght@300;400;600;700&family=Montserrat:wght@400;700&family=Bebas+Neue&family=Oswald:wght@400;600;700&family=Archivo+Black&family=Work+Sans:wght@300;400;600&family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: 'Inter', sans-serif; background: #111; color: #fff; }
|
|
.header { text-align: center; padding: 60px 20px 40px; }
|
|
.header h1 { font-size: 2.5rem; font-weight: 300; letter-spacing: 0.1em; }
|
|
.header p { color: #888; margin-top: 10px; font-size: 1.1rem; }
|
|
.options { max-width: 1400px; margin: 0 auto; padding: 0 20px 60px; }
|
|
|
|
/* ===== OPTION CARD ===== */
|
|
.option { margin-bottom: 80px; border-radius: 20px; overflow: hidden; }
|
|
.option-label { padding: 12px 24px; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; }
|
|
|
|
/* ===== OPTION A: INDUSTRIAL ROBUSTO ===== */
|
|
.option-a { background: #1a1a1a; border: 1px solid #333; }
|
|
.option-a .option-label { background: #F5A623; color: #000; }
|
|
.option-a .hero {
|
|
background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #252525 100%);
|
|
padding: 80px 60px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.option-a .hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50px; right: -50px;
|
|
width: 300px; height: 300px;
|
|
background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(245,166,35,0.05) 10px, rgba(245,166,35,0.05) 20px);
|
|
}
|
|
.option-a .logo-area { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
|
|
.option-a .logo-icon {
|
|
width: 80px; height: 80px;
|
|
background: #F5A623;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-family: 'Barlow Condensed', sans-serif;
|
|
font-weight: 800; font-size: 2.5rem; color: #000;
|
|
clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
|
|
}
|
|
.option-a .logo-text h2 {
|
|
font-family: 'Barlow Condensed', sans-serif;
|
|
font-weight: 800; font-size: 3rem;
|
|
letter-spacing: 0.05em; color: #fff;
|
|
text-transform: uppercase;
|
|
}
|
|
.option-a .logo-text span {
|
|
font-family: 'Barlow', sans-serif;
|
|
font-weight: 400; font-size: 1rem;
|
|
letter-spacing: 0.3em; color: #F5A623;
|
|
text-transform: uppercase;
|
|
}
|
|
.option-a .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #151515; }
|
|
.option-a .color-row { display: flex; gap: 12px; }
|
|
.option-a .swatch { width: 60px; height: 60px; border-radius: 8px; position: relative; }
|
|
.option-a .swatch-label { font-size: 0.7rem; color: #888; margin-top: 6px; text-align: center; }
|
|
.option-a .typo-sample h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.8rem; color: #F5A623; }
|
|
.option-a .typo-sample p { font-family: 'Barlow', sans-serif; color: #ccc; margin-top: 8px; line-height: 1.6; }
|
|
.option-a .elements { display: flex; gap: 20px; flex-wrap: wrap; }
|
|
.option-a .element-tag {
|
|
padding: 10px 20px; border: 2px solid #F5A623; color: #F5A623;
|
|
font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
|
|
text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem;
|
|
clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
|
|
}
|
|
.option-a .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
|
.option-a .btn-primary { padding: 14px 32px; background: #F5A623; color: #000; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; border: none; cursor: pointer; }
|
|
.option-a .btn-secondary { padding: 14px 32px; background: transparent; color: #F5A623; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; border: 2px solid #F5A623; cursor: pointer; }
|
|
|
|
/* ===== OPTION B: TECNICO MODERNO ===== */
|
|
.option-b { background: #ffffff; color: #1a1a2e; border: 1px solid #e0e0e0; }
|
|
.option-b .option-label { background: #FF6B35; color: #fff; }
|
|
.option-b .hero {
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
|
|
padding: 80px 60px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.option-b .hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; right: 0; bottom: 0; left: 0;
|
|
background-image: radial-gradient(circle at 2px 2px, rgba(26,26,46,0.04) 1px, transparent 0);
|
|
background-size: 40px 40px;
|
|
}
|
|
.option-b .logo-area { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; position: relative; z-index: 1; }
|
|
.option-b .logo-icon {
|
|
width: 70px; height: 70px;
|
|
position: relative;
|
|
}
|
|
.option-b .logo-icon svg { width: 100%; height: 100%; }
|
|
.option-b .nexus-node { fill: #FF6B35; }
|
|
.option-b .nexus-line { stroke: #1a1a2e; stroke-width: 2; }
|
|
.option-b .logo-text h2 {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-weight: 700; font-size: 2.8rem;
|
|
color: #1a1a2e; letter-spacing: -0.02em;
|
|
}
|
|
.option-b .logo-text h2 em {
|
|
font-style: normal; color: #FF6B35;
|
|
}
|
|
.option-b .logo-text span {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-weight: 300; font-size: 0.95rem;
|
|
letter-spacing: 0.25em; color: #666;
|
|
text-transform: uppercase;
|
|
}
|
|
.option-b .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #f4f5f7; color: #1a1a2e; }
|
|
.option-b .swatch { width: 60px; height: 60px; border-radius: 12px; }
|
|
.option-b .swatch-label { font-size: 0.7rem; color: #888; margin-top: 6px; text-align: center; }
|
|
.option-b .color-row { display: flex; gap: 12px; }
|
|
.option-b .typo-sample h3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.8rem; color: #1a1a2e; }
|
|
.option-b .typo-sample p { font-family: 'Montserrat', sans-serif; color: #555; margin-top: 8px; line-height: 1.6; }
|
|
.option-b .elements { display: flex; gap: 15px; flex-wrap: wrap; }
|
|
.option-b .element-tag {
|
|
padding: 10px 20px; border-radius: 50px;
|
|
background: #1a1a2e; color: #fff;
|
|
font-family: 'Poppins', sans-serif; font-weight: 600;
|
|
font-size: 0.8rem; letter-spacing: 0.05em;
|
|
}
|
|
.option-b .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
|
.option-b .btn-primary { padding: 14px 32px; background: #FF6B35; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.95rem; border: none; border-radius: 8px; cursor: pointer; }
|
|
.option-b .btn-secondary { padding: 14px 32px; background: transparent; color: #1a1a2e; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.95rem; border: 2px solid #1a1a2e; border-radius: 8px; cursor: pointer; }
|
|
|
|
/* ===== OPTION C: PREMIUM AUTOMOTRIZ ===== */
|
|
.option-c { background: #0a0a0a; border: 1px solid #222; }
|
|
.option-c .option-label { background: #E63946; color: #fff; }
|
|
.option-c .hero {
|
|
background: linear-gradient(160deg, #0a0a0a 0%, #151515 40%, #0a0a0a 100%);
|
|
padding: 80px 60px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.option-c .hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0; right: 0;
|
|
width: 400px; height: 400px;
|
|
background: radial-gradient(circle, rgba(230,57,70,0.08) 0%, transparent 70%);
|
|
}
|
|
.option-c .hero::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 20px; right: 60px;
|
|
width: 200px; height: 3px;
|
|
background: linear-gradient(90deg, transparent, #E63946, transparent);
|
|
}
|
|
.option-c .logo-area { text-align: center; margin-bottom: 40px; position: relative; z-index: 1; }
|
|
.option-c .logo-text h2 {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 5rem; letter-spacing: 0.15em;
|
|
color: #fff;
|
|
text-shadow: 0 0 60px rgba(230,57,70,0.2);
|
|
}
|
|
.option-c .logo-text .red { color: #E63946; }
|
|
.option-c .logo-divider {
|
|
width: 80px; height: 3px; background: #E63946;
|
|
margin: 10px auto;
|
|
}
|
|
.option-c .logo-text span {
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 400; font-size: 1.1rem;
|
|
letter-spacing: 0.5em; color: #888;
|
|
text-transform: uppercase;
|
|
}
|
|
.option-c .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #0f0f0f; }
|
|
.option-c .color-row { display: flex; gap: 12px; }
|
|
.option-c .swatch { width: 60px; height: 60px; border-radius: 4px; border: 1px solid #333; }
|
|
.option-c .swatch-label { font-size: 0.7rem; color: #666; margin-top: 6px; text-align: center; }
|
|
.option-c .typo-sample h3 { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: #E63946; letter-spacing: 0.1em; }
|
|
.option-c .typo-sample p { font-family: 'Oswald', sans-serif; font-weight: 400; color: #aaa; margin-top: 8px; line-height: 1.6; }
|
|
.option-c .elements { display: flex; gap: 15px; flex-wrap: wrap; }
|
|
.option-c .element-tag {
|
|
padding: 10px 24px;
|
|
border: 1px solid #E63946; color: #E63946;
|
|
font-family: 'Oswald', sans-serif; font-weight: 600;
|
|
text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem;
|
|
}
|
|
.option-c .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
|
.option-c .btn-primary { padding: 14px 36px; background: #E63946; color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 0.15em; border: none; cursor: pointer; }
|
|
.option-c .btn-secondary { padding: 14px 36px; background: transparent; color: #ccc; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.1em; border: 1px solid #555; cursor: pointer; }
|
|
|
|
/* ===== OPTION E: RETRO MODERNO ===== */
|
|
.option-e { background: #F5F0E8; color: #2C3E50; border: 1px solid #d4c9b8; }
|
|
.option-e .option-label { background: #1B4965; color: #F5F0E8; }
|
|
.option-e .hero {
|
|
background: #F5F0E8;
|
|
padding: 80px 60px;
|
|
position: relative;
|
|
text-align: center;
|
|
}
|
|
.option-e .badge {
|
|
width: 220px; height: 220px; margin: 0 auto 30px;
|
|
border: 4px solid #1B4965;
|
|
border-radius: 50%;
|
|
display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center;
|
|
position: relative;
|
|
}
|
|
.option-e .badge::before {
|
|
content: '★ EST. 2026 ★';
|
|
position: absolute; top: -14px;
|
|
background: #F5F0E8; padding: 0 15px;
|
|
font-family: 'Work Sans', sans-serif; font-weight: 600;
|
|
font-size: 0.7rem; letter-spacing: 0.2em; color: #C45D3E;
|
|
}
|
|
.option-e .badge h2 {
|
|
font-family: 'Archivo Black', sans-serif;
|
|
font-size: 2rem; color: #1B4965;
|
|
text-transform: uppercase; line-height: 1;
|
|
}
|
|
.option-e .badge span {
|
|
font-family: 'Work Sans', sans-serif;
|
|
font-weight: 300; font-size: 0.85rem;
|
|
letter-spacing: 0.3em; color: #C45D3E;
|
|
text-transform: uppercase; margin-top: 5px;
|
|
}
|
|
.option-e .tagline {
|
|
font-family: 'Work Sans', sans-serif;
|
|
font-weight: 300; font-size: 1.2rem;
|
|
color: #666; letter-spacing: 0.1em;
|
|
margin-top: 20px;
|
|
}
|
|
.option-e .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #EDE8DD; color: #2C3E50; }
|
|
.option-e .color-row { display: flex; gap: 12px; }
|
|
.option-e .swatch { width: 60px; height: 60px; border-radius: 50%; border: 2px solid #d4c9b8; }
|
|
.option-e .swatch-label { font-size: 0.7rem; color: #888; margin-top: 6px; text-align: center; }
|
|
.option-e .typo-sample h3 { font-family: 'Archivo Black', sans-serif; font-size: 1.8rem; color: #1B4965; }
|
|
.option-e .typo-sample p { font-family: 'Work Sans', sans-serif; font-weight: 300; color: #555; margin-top: 8px; line-height: 1.6; }
|
|
.option-e .elements { display: flex; gap: 15px; flex-wrap: wrap; }
|
|
.option-e .element-tag {
|
|
padding: 10px 20px;
|
|
border: 2px solid #1B4965; color: #1B4965;
|
|
font-family: 'Archivo Black', sans-serif;
|
|
text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em;
|
|
border-radius: 50px;
|
|
}
|
|
.option-e .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
|
.option-e .btn-primary { padding: 14px 32px; background: #1B4965; color: #F5F0E8; font-family: 'Archivo Black', sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; border: none; border-radius: 50px; cursor: pointer; }
|
|
.option-e .btn-secondary { padding: 14px 32px; background: transparent; color: #C45D3E; font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 0.9rem; border: 2px solid #C45D3E; border-radius: 50px; cursor: pointer; }
|
|
|
|
/* ===== SHARED ===== */
|
|
.section-title { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; opacity: 0.5; }
|
|
.mini-landing { padding: 40px 60px; }
|
|
.mini-landing h3 { margin-bottom: 15px; }
|
|
|
|
@media (max-width: 768px) {
|
|
.option-a .hero, .option-b .hero, .option-c .hero, .option-e .hero,
|
|
.option-a .brand-board, .option-b .brand-board, .option-c .brand-board, .option-e .brand-board { padding: 40px 20px; }
|
|
.option-c .logo-text h2 { font-size: 3rem; }
|
|
.option-a .logo-text h2 { font-size: 2rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="header">
|
|
<h1>NEXUS AUTOPARTS</h1>
|
|
<p>Opciones de Branding — Selecciona tu estilo</p>
|
|
</div>
|
|
|
|
<div class="options">
|
|
|
|
<!-- ===== OPCION A: INDUSTRIAL ROBUSTO ===== -->
|
|
<div class="option option-a">
|
|
<div class="option-label">Opción A — Industrial Robusto</div>
|
|
<div class="hero">
|
|
<div class="logo-area">
|
|
<div class="logo-icon">N</div>
|
|
<div class="logo-text">
|
|
<h2>NEXUS</h2>
|
|
<span>AUTOPARTS</span>
|
|
</div>
|
|
</div>
|
|
<p style="color:#888; font-family:'Barlow',sans-serif; font-size:1.1rem; max-width:500px; line-height:1.6; position:relative; z-index:1;">
|
|
Piezas que conectan. Calidad que resiste.<br>
|
|
<small style="color:#F5A623">Tu proveedor de refacciones de confianza.</small>
|
|
</p>
|
|
<div class="mock-buttons">
|
|
<button class="btn-primary">BUSCAR REFACCIONES</button>
|
|
<button class="btn-secondary">VER CATÁLOGO</button>
|
|
</div>
|
|
</div>
|
|
<div class="brand-board">
|
|
<div>
|
|
<div class="section-title">Paleta de Colores</div>
|
|
<div class="color-row">
|
|
<div>
|
|
<div class="swatch" style="background:#F5A623;"></div>
|
|
<div class="swatch-label">Ámbar<br>#F5A623</div>
|
|
</div>
|
|
<div>
|
|
<div class="swatch" style="background:#1a1a1a; border:1px solid #333;"></div>
|
|
<div class="swatch-label">Negro<br>#1A1A1A</div>
|
|
</div>
|
|
<div>
|
|
<div class="swatch" style="background:#6B7B8D;"></div>
|
|
<div class="swatch-label">Acero<br>#6B7B8D</div>
|
|
</div>
|
|
<div>
|
|
<div class="swatch" style="background:#E8E8E8;"></div>
|
|
<div class="swatch-label">Plata<br>#E8E8E8</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="typo-sample">
|
|
<div class="section-title">Tipografía</div>
|
|
<h3>Barlow Condensed Bold</h3>
|
|
<p>Barlow Regular para cuerpo de texto. Fuerte, legible, industrial.</p>
|
|
</div>
|
|
<div>
|
|
<div class="section-title">Elementos Visuales</div>
|
|
<div class="elements">
|
|
<div class="element-tag">Metal Cepillado</div>
|
|
<div class="element-tag">Líneas Diagonales</div>
|
|
<div class="element-tag">Iconos Técnicos</div>
|
|
<div class="element-tag">Bordes Angulares</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== OPCION B: TECNICO MODERNO ===== -->
|
|
<div class="option option-b">
|
|
<div class="option-label">Opción B — Técnico Moderno</div>
|
|
<div class="hero">
|
|
<div class="logo-area">
|
|
<div class="logo-icon">
|
|
<svg viewBox="0 0 70 70">
|
|
<circle cx="35" cy="20" r="6" class="nexus-node"/>
|
|
<circle cx="15" cy="50" r="5" class="nexus-node"/>
|
|
<circle cx="55" cy="50" r="5" class="nexus-node"/>
|
|
<circle cx="35" cy="55" r="4" class="nexus-node"/>
|
|
<line x1="35" y1="20" x2="15" y2="50" class="nexus-line"/>
|
|
<line x1="35" y1="20" x2="55" y2="50" class="nexus-line"/>
|
|
<line x1="15" y1="50" x2="55" y2="50" class="nexus-line"/>
|
|
<line x1="35" y1="20" x2="35" y2="55" class="nexus-line"/>
|
|
</svg>
|
|
</div>
|
|
<div class="logo-text">
|
|
<h2><em>Nexus</em> Autoparts</h2>
|
|
<span>Conectando piezas, moviendo industrias</span>
|
|
</div>
|
|
</div>
|
|
<p style="color:#555; font-family:'Montserrat',sans-serif; font-size:1.05rem; max-width:520px; line-height:1.7; position:relative; z-index:1;">
|
|
La plataforma inteligente para encontrar la refacción exacta. Más de 1.4 millones de partes a tu alcance.
|
|
</p>
|
|
<div class="mock-buttons">
|
|
<button class="btn-primary">Buscar Refacciones</button>
|
|
<button class="btn-secondary">Explorar Catálogo</button>
|
|
</div>
|
|
</div>
|
|
<div class="brand-board">
|
|
<div>
|
|
<div class="section-title" style="color:#999;">Paleta de Colores</div>
|
|
<div class="color-row">
|
|
<div>
|
|
<div class="swatch" style="background:#1a1a2e;"></div>
|
|
<div class="swatch-label">Azul Noche<br>#1A1A2E</div>
|
|
</div>
|
|
<div>
|
|
<div class="swatch" style="background:#FF6B35;"></div>
|
|
<div class="swatch-label">Naranja<br>#FF6B35</div>
|
|
</div>
|
|
<div>
|
|
<div class="swatch" style="background:#f4f5f7; border:1px solid #ddd;"></div>
|
|
<div class="swatch-label">Gris Claro<br>#F4F5F7</div>
|
|
</div>
|
|
<div>
|
|
<div class="swatch" style="background:#ffffff; border:1px solid #ddd;"></div>
|
|
<div class="swatch-label">Blanco<br>#FFFFFF</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="typo-sample">
|
|
<div class="section-title" style="color:#999;">Tipografía</div>
|
|
<h3>Poppins Bold</h3>
|
|
<p>Montserrat para cuerpo. Moderna, geométrica, tech-friendly.</p>
|
|
</div>
|
|
<div>
|
|
<div class="section-title" style="color:#999;">Elementos Visuales</div>
|
|
<div class="elements">
|
|
<div class="element-tag">Nodos de Red</div>
|
|
<div class="element-tag">Grid Punteado</div>
|
|
<div class="element-tag">Bordes Redondeados</div>
|
|
<div class="element-tag">Gradientes Sutiles</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== OPCION C: PREMIUM AUTOMOTRIZ ===== -->
|
|
<div class="option option-c">
|
|
<div class="option-label">Opción C — Premium Automotriz</div>
|
|
<div class="hero">
|
|
<div class="logo-area">
|
|
<div class="logo-text">
|
|
<h2>NEXUS <span class="red">AUTO</span>PARTS</h2>
|
|
<div class="logo-divider"></div>
|
|
<span>Performance • Calidad • Precisión</span>
|
|
</div>
|
|
</div>
|
|
<p style="color:#666; font-family:'Oswald',sans-serif; font-weight:400; font-size:1rem; max-width:500px; margin:0 auto; line-height:1.7; text-align:center;">
|
|
Refacciones de alto rendimiento para profesionales que exigen lo mejor.
|
|
</p>
|
|
<div class="mock-buttons" style="justify-content:center;">
|
|
<button class="btn-primary">BUSCAR PIEZAS</button>
|
|
<button class="btn-secondary">CATÁLOGO COMPLETO</button>
|
|
</div>
|
|
</div>
|
|
<div class="brand-board">
|
|
<div>
|
|
<div class="section-title">Paleta de Colores</div>
|
|
<div class="color-row">
|
|
<div>
|
|
<div class="swatch" style="background:#0a0a0a;"></div>
|
|
<div class="swatch-label">Negro Mate<br>#0A0A0A</div>
|
|
</div>
|
|
<div>
|
|
<div class="swatch" style="background:#E63946;"></div>
|
|
<div class="swatch-label">Rojo Racing<br>#E63946</div>
|
|
</div>
|
|
<div>
|
|
<div class="swatch" style="background:linear-gradient(135deg,#888,#ccc);"></div>
|
|
<div class="swatch-label">Plata<br>#B8B8B8</div>
|
|
</div>
|
|
<div>
|
|
<div class="swatch" style="background:#1a1a1a; border:1px solid #333;"></div>
|
|
<div class="swatch-label">Grafito<br>#1A1A1A</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="typo-sample">
|
|
<div class="section-title">Tipografía</div>
|
|
<h3>BEBAS NEUE</h3>
|
|
<p>Oswald para cuerpo. Elegante, racing, premium.</p>
|
|
</div>
|
|
<div>
|
|
<div class="section-title">Elementos Visuales</div>
|
|
<div class="elements">
|
|
<div class="element-tag">Líneas Speed</div>
|
|
<div class="element-tag">Acentos Rojos</div>
|
|
<div class="element-tag">Degradados Oscuros</div>
|
|
<div class="element-tag">Bandera Racing</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== OPCION E: RETRO MODERNO ===== -->
|
|
<div class="option option-e">
|
|
<div class="option-label">Opción E — Mecánico Retro-Moderno</div>
|
|
<div class="hero">
|
|
<div class="badge">
|
|
<h2>NEXUS</h2>
|
|
<span>AUTOPARTS</span>
|
|
</div>
|
|
<p class="tagline">“Refacciones con garantía, servicio con experiencia”</p>
|
|
<div class="mock-buttons" style="justify-content:center; margin-top:30px;">
|
|
<button class="btn-primary">Buscar Refacciones</button>
|
|
<button class="btn-secondary">Ver Catálogo</button>
|
|
</div>
|
|
</div>
|
|
<div class="brand-board">
|
|
<div>
|
|
<div class="section-title" style="color:#999;">Paleta de Colores</div>
|
|
<div class="color-row">
|
|
<div>
|
|
<div class="swatch" style="background:#1B4965;"></div>
|
|
<div class="swatch-label">Petróleo<br>#1B4965</div>
|
|
</div>
|
|
<div>
|
|
<div class="swatch" style="background:#C45D3E;"></div>
|
|
<div class="swatch-label">Óxido<br>#C45D3E</div>
|
|
</div>
|
|
<div>
|
|
<div class="swatch" style="background:#F5F0E8;"></div>
|
|
<div class="swatch-label">Crema<br>#F5F0E8</div>
|
|
</div>
|
|
<div>
|
|
<div class="swatch" style="background:#2C3E50;"></div>
|
|
<div class="swatch-label">Carbón<br>#2C3E50</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="typo-sample">
|
|
<div class="section-title" style="color:#999;">Tipografía</div>
|
|
<h3>Archivo Black</h3>
|
|
<p>Work Sans Light para cuerpo. Clásica pero fresca, con personalidad.</p>
|
|
</div>
|
|
<div>
|
|
<div class="section-title" style="color:#999;">Elementos Visuales</div>
|
|
<div class="elements">
|
|
<div class="element-tag">Badges Circulares</div>
|
|
<div class="element-tag">Sellos de Calidad</div>
|
|
<div class="element-tag">Bordes Redondeados</div>
|
|
<div class="element-tag">Texturas Vintage</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div style="text-align:center; padding:40px; color:#555; font-size:0.9rem;">
|
|
Nexus Autoparts — Propuestas de Branding © 2026<br>
|
|
<small>Generado por Hugo, Project Manager</small>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|