🚗 Sitio Web Completo para Lavado de Autos y Taller Mecánico
He sintetizado tres soluciones profesionales para crear tu sitio web. Todas coinciden en elementos clave pero difieren en enfoques de diseño.
📋 Estructura Común Recomendada
Todos los modelos sugieren estas páginas esenciales:
Páginas Principales:
- index.html - Página principal con hero, servicios destacados y llamadas a la acción
- services.html - Catálogo detallado de servicios (lavado + mecánica)
- about.html - Historia, equipo y valores de la empresa
- contact.html - Formulario, ubicación y datos de contacto
Secciones Críticas:
- ✅ Hero/Banner: Imagen impactante con botones de acción
- ✅ Servicios duales: Separación clara entre Lavado y Mecánica
- ✅ Precios/Paquetes: Planes y tarifas transparentes
- ✅ Testimonios: Opiniones de clientes reales
- ✅ Galería: Fotos de trabajos realizados
- ✅ Formulario de citas: Para agendar servicios
- ✅ Integración WhatsApp: Botón flotante para contacto rápido
🎨 Código Completo - Versión Optimizada
index.html - Página Principal
html
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AutoCare Pro - Lavado y Taller Mecánico</title> <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"></head><body> <!-- Navegación --> <nav class="navbar"> <div class="container"> <div class="nav-wrapper"> <div class="logo">AUTO<span>CARE</span></div> <button class="mobile-menu-toggle" id="mobileMenuToggle"> <i class="fas fa-bars"></i> </button> <ul class="nav-menu" id="navMenu"> <li><a href="#inicio">Inicio</a></li> <li><a href="#servicios">Servicios</a></li> <li><a href="#precios">Precios</a></li> <li><a href="#galeria">Galería</a></li> <li><a href="#testimonios">Testimonios</a></li> <li><a href="#contacto" class="btn-primary">Contacto</a></li> </ul> </div> </div> </nav>
<!-- Hero Section --> <section id="inicio" class="hero"> <div class="hero-content"> <h1 class="animate-fade-in">Cuidamos tu auto, <span>potenciamos tu camino</span></h1> <p class="animate-fade-in-delay">Servicio premium de lavado detallado y mecánica especializada</p> <div class="hero-buttons animate-fade-in-delay-2"> <a href="#servicios" class="btn btn-large">Ver Servicios</a> <a href="https://wa.me/1234567890" class="btn btn-outline btn-large"> <i class="fab fa-whatsapp"></i> WhatsApp </a> </div> </div> </section>
<!-- Características --> <section class="features"> <div class="container"> <div class="features-grid"> <div class="feature-card"> <i class="fas fa-clock"></i> <h3>Servicio Rápido</h3> <p>Atención eficiente sin comprometer la calidad</p> </div> <div class="feature-card"> <i class="fas fa-shield-alt"></i> <h3>Garantía Total</h3> <p>Respaldamos todos nuestros servicios</p> </div> <div class="feature-card"> <i class="fas fa-user-tie"></i> <h3>Personal Certificado</h3> <p>Mecánicos con años de experiencia</p> </div> <div class="feature-card"> <i class="fas fa-star"></i> <h3>Productos Premium</h3> <p>Solo usamos insumos de primera calidad</p> </div> </div> </div> </section>
<!-- Servicios con Sistema de Pestañas --> <section id="servicios" class="services"> <div class="container"> <h2 class="section-title">Nuestros Servicios</h2> <div class="section-divider"></div> <div class="tabs"> <button class="tab-btn active" data-tab="lavado"> <i class="fas fa-car-wash"></i> Lavado y Detallado </button> <button class="tab-btn" data-tab="mecanica"> <i class="fas fa-tools"></i> Taller Mecánico </button> </div>
<!-- Tab Content: Lavado --> <div id="lavado" class="tab-content active"> <div class="services-grid"> <div class="service-card"> <div class="service-icon">🚿</div> <h3>Lavado Exterior Completo</h3> <ul> <li>Lavado a presión de carrocería</li> <li>Limpieza de rines y neumáticos</li> <li>Secado con paños de microfibra</li> <li>Limpieza de cristales exteriores</li> </ul> </div> <div class="service-card"> <div class="service-icon">✨</div> <h3>Detallado Interior</h3> <ul> <li>Aspirado profundo de tapicería</li> <li>Limpieza de tablero y consola</li> <li>Acondicionamiento de plásticos</li> <li>Limpieza de vidrios interiores</li> </ul> </div> <div class="service-card"> <div class="service-icon">💎</div> <h3>Pulido y Encerado</h3> <ul> <li>Pulido de pintura</li> <li>Aplicación de cera protectora</li> <li>Restauración de faros</li> <li>Tratamiento de plásticos exteriores</li> </ul> </div> <div class="service-card"> <div class="service-icon">🔧</div> <h3>Lavado de Motor</h3> <ul> <li>Lavado con vapor</li> <li>Desengrasado profundo</li> <li>Protección de componentes</li> <li>Secado especializado</li> </ul> </div> </div> </div>
<!-- Tab Content: Mecánica --> <div id="mecanica" class="tab-content"> <div class="services-grid"> <div class="service-card"> <div class="service-icon">🛢️</div> <h3>Cambio de Aceite</h3> <ul> <li>Aceites sintéticos y convencionales</li> <li>Cambio de filtro de aceite</li> <li>Revisión de niveles</li> <li>Inspección de 20 puntos</li> </ul> </div> <div class="service-card"> <div class="service-icon">🔩</div> <h3>Sistema de Frenos</h3> <ul> <li>Cambio de pastillas y discos</li> <li>Purga de líquido de frenos</li> <li>Revisión de líneas hidráulicas</li> <li>Calibración de freno de mano</li> </ul> </div> <div class="service-card"> <div class="service-icon">⚙️</div> <h3>Suspensión y Dirección</h3> <ul> <li>Cambio de amortiguadores</li> <li>Alineación y balanceo</li> <li>Reparación de cremallera</li> <li>Cambio de rótulas y terminales</li> </ul> </div> <div class="service-card"> <div class="service-icon">💻</div> <h3>Diagnóstico Computarizado</h3> <ul> <li>Escaneo de códigos de error</li> <li>Revisión de sensores</li> <li>Diagnóstico de motor</li> <li>Informe detallado escrito</li> </ul> </div> </div> </div> </div> </section>
<!-- Precios --> <section id="precios" class="pricing"> <div class="container"> <h2 class="section-title">Planes de Lavado</h2> <div class="section-divider"></div> <div class="pricing-grid"> <div class="price-card"> <div class="price-header"> <h3>Básico</h3> <div class="price">$500 <span>CUP</span></div> </div> <ul class="price-features"> <li><i class="fas fa-check"></i> Lavado exterior</li> <li><i class="fas fa-check"></i> Aspirado interior</li> <li><i class="fas fa-check"></i> Limpieza de cristales</li> <li><i class="fas fa-times"></i> Encerado</li> <li><i class="fas fa-times"></i> Pulido</li> </ul> <a href="#contacto" class="btn">Elegir Plan</a> </div>
<div class="price-card featured"> <div class="badge">Popular</div> <div class="price-header"> <h3>Premium</h3> <div class="price">$1,200 <span>CUP</span></div> </div> <ul class="price-features"> <li><i class="fas fa-check"></i> Todo lo del Básico</li> <li><i class="fas fa-check"></i> Limpieza profunda interior</li> <li><i class="fas fa-check"></i> Encerado completo</li> <li><i class="fas fa-check"></i> Limpieza de rines</li> <li><i class="fas fa-check"></i> Aromatización</li> </ul> <a href="#contacto" class="btn btn-primary">Elegir Plan</a> </div>
<div class="price-card"> <div class="price-header"> <h3>Detallado VIP</h3> <div class="price">$2,500 <span>CUP</span></div> </div> <ul class="price-features"> <li><i class="fas fa-check"></i> Todo lo del Premium</li> <li><i class="fas fa-check"></i> Pulido profesional</li> <li><i class="fas fa-check"></i> Restauración de faros</li> <li><i class="fas fa-check"></i> Lavado de motor</li> <li><i class="fas fa-check"></i> Protección cerámica</li> </ul> <a href="#contacto" class="btn">Elegir Plan</a> </div> </div> </div> </section>
<!-- Galería --> <section id="galeria" class="gallery"> <div class="container"> <h2 class="section-title">Trabajos Realizados</h2> <div class="section-divider"></div> <div class="gallery-grid"> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1520340356584-f9917d1eea6f?w=500" alt="Lavado exterior"> <div class="gallery-overlay"> <h4>Lavado Premium</h4> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1619642751034-765dfdf7c58e?w=500" alt="Interior detallado"> <div class="gallery-overlay"> <h4>Detallado Interior</h4> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?w=500" alt="Motor limpio"> <div class="gallery-overlay"> <h4>Lavado de Motor</h4> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1625047509168-a7026f36de04?w=500" alt="Pulido"> <div class="gallery-overlay"> <h4>Pulido Profesional</h4> </div> </div> </div> </div> </section>
<!-- Testimonios --> <section id="testimonios" class="testimonials"> <div class="container"> <h2 class="section-title">Lo Que Dicen Nuestros Clientes</h2> <div class="section-divider"></div> <div class="testimonials-grid"> <div class="testimonial-card"> <div class="stars">★★★★★</div> <p>"Excelente servicio. Mi auto quedó como nuevo después del detallado completo. Los recomiendo totalmente."</p> <div class="testimonial-author"> <strong>Carlos Rodríguez</strong> <span>Cliente Frecuente</span> </div> </div> <div class="testimonial-card"> <div class="stars">★★★★★</div> <p>"El taller mecánico es muy profesional. Solucionaron el problema de mi motor rápidamente y a buen precio."</p> <div class="testimonial-author"> <strong>María González</strong> <span>Cliente desde 2023</span> </div> </div> <div class="testimonial-card"> <div class="stars">★★★★★</div> <p>"Personal muy amable y trabajo de calidad. Ahora solo traigo mi auto aquí para todo lo que necesite."</p> <div class="testimonial-author"> <strong>José Martínez</strong> <span>Cliente VIP</span> </div> </div> </div> </div> </section>
<!-- Contacto --> <section id="contacto" class="contact"> <div class="container"> <div class="contact-wrapper"> <div class="contact-info"> <h2>Agenda tu Cita</h2> <p>Reserva tu espacio y evita esperas. Te confirmaremos por teléfono.</p> <div class="info-item"> <i class="fas fa-map-marker-alt"></i> <div> <strong>Dirección</strong> <p>Calle Principal #123, La Habana, Cuba</p> </div> </div> <div class="info-item"> <i class="fas fa-phone"></i> <div> <strong>Teléfono</strong> <p>+53 5 234-5678</p> </div> </div> <div class="info-item"> <i class="fas fa-envelope"></i> <div> <strong>Email</strong> <p>contacto@autocare.cu</p> </div> </div> <div class="info-item"> <i class="fas fa-clock"></i> <div> <strong>Horario</strong> <p>Lun - Sáb: 8:00 AM - 6:00 PM<br>Dom: Cerrado</p> </div> </div>
<div class="social-links"> <a href="#"><i class="fab fa-facebook"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> </div> </div>
<form class="contact-form" id="contactForm"> <div class="form-row"> <div class="form-group"> <label>Nombre Completo</label> <input type="text" name="nombre" required> </div> <div class="form-group"> <label>Teléfono</label> <input type="tel" name="telefono" required> </div> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required> </div> <div class="form-group"> <label>Tipo de Servicio</label> <select name="servicio" required> <option value="">Selecciona un servicio</option> <option value="lavado-basico">Lavado Básico</option> <option value="lavado-premium">Lavado Premium</option> <option value="detallado-vip">Detallado VIP</option> <option value="cambio-aceite">Cambio de Aceite</option> <option value="frenos">Reparación de Frenos</option> <option value="suspension">Suspensión</option> <option value="diagnostico">Diagnóstico</option> <option value="otro">Otro</option> </select> </div> <div class="form-group"> <label>Mensaje / Descripción del Vehículo</label> <textarea name="mensaje" rows="4" required></textarea> </div> <button type="submit" class="btn btn-primary btn-large">Enviar Solicitud</button> </form> </div> </div> </section>
<!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-section"> <h3>AUTO<span>CARE</span></h3> <p>Tu aliado de confianza para el cuidado completo de tu vehículo en La Habana.</p> </div> <div class="footer-section"> <h4>Enlaces Rápidos</h4> <ul> <li><a href="#servicios">Servicios</a></li> <li><a href="#precios">Precios</a></li> <li><a href="#galeria">Galería</a></li> <li><a href="#contacto">Contacto</a></li> </ul> </div> <div class="footer-section"> <h4>Horarios</h4> <p>Lunes - Viernes: 8:00 AM - 6:00 PM<br> Sábado: 9:00 AM - 4:00 PM<br> Domingo: Cerrado</p> </div> </div> <div class="footer-bottom"> <p>© 2026 AutoCare Pro. Todos los derechos reservados.</p> </div> </div> </footer>
<!-- Botón WhatsApp Flotante --> <a href="https://wa.me/53XXXXXXXX" class="whatsapp-float" target="_blank"> <i class="fab fa-whatsapp"></i> </a>
<!-- Botón Volver Arriba --> <button class="scroll-top" id="scrollTop"> <i class="fas fa-arrow-up"></i> </button>
<script src="script.js"></script></body></html>styles.css - Estilos Completos
css
/* Variables CSS */:root { --primary-color: #2563eb; --secondary-color: #f59e0b; --dark: #1e293b; --light: #f8fafc; --gray: #64748b; --success: #10b981; --border-radius: 12px; --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease;}
* { margin: 0; padding: 0; box-sizing: border-box;}
body { font-family: 'Roboto', sans-serif; line-height: 1.6; color: var(--dark); overflow-x: hidden;}
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px;}
/* Navegación */.navbar { background: var(--dark); color: white; padding: 1rem 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}
.nav-wrapper { display: flex; justify-content: space-between; align-items: center;}
.logo { font-size: 1.8rem; font-weight: bold; letter-spacing: -1px;}
.logo span { color: var(--primary-color);}
.nav-menu { display: flex; list-style: none; gap: 2rem; align-items: center;}
.nav-menu a { color: white; text-decoration: none; transition: var(--transition); font-weight: 500;}
.nav-menu a:hover { color: var(--primary-color);}
.mobile-menu-toggle { display: none; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer;}
/* Hero */.hero { background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(15, 23, 42, 0.9)), url('https://images.unsplash.com/photo-1520340356584-f9917d1eea6f?w=1920') center/cover; height: 600px; display: flex; align-items: center; justify-content: center; text-align: center; color: white; position: relative;}
.hero-content { max-width: 800px; padding: 2rem;}
.hero h1 { font-size: 3.5rem; margin-bottom: 1rem; font-weight: 700; line-height: 1.2;}
.hero h1 span { color: var(--secondary-color);}
.hero p { font-size: 1.3rem; margin-bottom: 2rem; opacity: 0.9;}
.hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;}
/* Botones */.btn { padding: 12px 30px; border: none; border-radius: var(--border-radius); text-decoration: none; display: inline-block; cursor: pointer; transition: var(--transition); font-weight: 600; text-align: center;}
.btn-primary { background: var(--primary-color); color: white;}
.btn-primary:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 5px 20px rgba(37, 99, 235, 0.4);}
.btn-outline { background: transparent; color: white; border: 2px solid white;}
.btn-outline:hover { background: white; color: var(--primary-color);}
.btn-large { padding: 15px 40px; font-size: 1.1rem;}
/* Animaciones */@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); }}
.animate-fade-in { animation: fadeInUp 0.8s ease-out;}
.animate-fade-in-delay { animation: fadeInUp 0.8s ease-out 0.3s backwards;}
.animate-fade-in-delay-2 { animation: fadeInUp 0.8s ease-out 0.6s backwards;}
/* Características */.features { padding: 80px 0; background: var(--light);}
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem;}
.feature-card { text-align: center; padding: 2rem; background: white; border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: var(--transition);}
.feature-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);}
.feature-card i { font-size: 3rem; color: var(--primary-color); margin-bottom: 1rem;}
.feature-card h3 { font-size: 1.3rem; margin-bottom: 0.5rem;}
/* Servicios */.services { padding: 80px 0;}
.section-title { text-align: center; font-size: 2.5rem; margin-bottom: 1rem; color: var(--dark);}
.section-divider { width: 80px; height: 4px; background: var(--primary-color); margin: 0 auto 3rem;}
.tabs { display: flex; justify-content: center; gap: 1rem; margin-bottom: 3rem; flex-wrap: wrap;}
.tab-btn { padding: 15px 30px; background: white; border: 2px solid var(--primary-color); color: var(--primary-color); border-radius: var(--border-radius); cursor: pointer; font-size: 1.1rem; font-weight: 600; transition: var(--transition); display: flex; align-items: center; gap: 0.5rem;}
.tab-btn:hover,.tab-btn.active { background: var(--primary-color); color: white;}
.tab-content { display: none;}
.tab-content.active { display: block; animation: fadeInUp 0.5s ease-out;}
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem;}
.service-card { background: white; padding: 2rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: var(--transition); border-top: 4px solid var(--primary-color);}
.service-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);}
.service-icon { font-size: 3rem; margin-bottom: 1rem;}
.service-card h3 { font-size: 1.4rem; margin-bottom: 1rem; color: var(--dark);}
.service-card ul { list-style: none;}
.service-card li { padding: 0.5rem 0; color: var(--gray); display: flex; align-items: center; gap: 0.5rem;}
.service-card li::before { content: "✓"; color: var(--success); font-weight: bold;}
/* Precios */.pricing { padding: 80px 0; background: var(--light);}
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 1000px; margin: 0 auto;}
.price-card { background: white; border-radius: var(--border-radius); padding: 2rem; box-shadow: var(--box-shadow); transition: var(--transition); position: relative; border: 2px solid transparent;}
.price-card:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);}
.price-card.featured { border-color: var(--primary-color); transform: scale(1.05);}
.badge { position: absolute; top: -15px; right: 20px; background: var(--secondary-color); color: white; padding: 5px 15px; border-radius: 20px; font-weight: bold; font-size: 0.9rem;}
.price-header { text-align: center; border-bottom: 2px solid var(--light); padding-bottom: 1.5rem; margin-bottom: 1.5rem;}
.price-header h3 { font-size: 1.8rem; margin-bottom: 1rem;}
.price { font-size: 3rem; font-weight: bold; color: var(--primary-color);}
.price span { font-size: 1rem; color: var(--gray);}
.price-features { list-style: none; margin-bottom: 2rem;}
.price-features li { padding: 0.8rem 0; display: flex; align-items: center; gap: 0.5rem;}
.price-features i { font-size: 1.2rem;}
.fa-check { color: var(--success);}
.fa-times { color: var(--gray);}
/* Galería */.gallery { padding: 80px 0;}
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;}
.gallery-item { position: relative; overflow: hidden; border-radius: var(--border-radius); cursor: pointer; height: 300px;}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition);}
.gallery-item:hover img { transform: scale(1.1);}
.gallery-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); padding: 2rem; color: white; transform: translateY(100%); transition: var(--transition);}
.gallery-item:hover .gallery-overlay { transform: translateY(0);}
/* Testimonios */.testimonials { padding: 80px 0; background: var(--light);}
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;}
.testimonial-card { background: white; padding: 2rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow); position: relative;}
.stars { color: var(--secondary-color); font-size: 1.5rem; margin-bottom: 1rem;}
.testimonial-card p { font-style: italic; color: var(--gray); margin-bottom: 1.5rem;}
.testimonial-author { display: flex; flex-direction: column;}
.testimonial-author strong { color: var(--dark); margin-bottom: 0.3rem;}
.testimonial-author span { color: var(--gray); font-size: 0.9rem;}
/* Contacto */.contact { padding: 80px 0;}
.contact-wrapper { display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem; background: white; border-radius: var(--border-radius); box-shadow: var(--box-shadow); overflow: hidden;}
.contact-info { background: var(--dark); color: white; padding: 3rem;}
.contact-info h2 { font-size: 2rem; margin-bottom: 1rem;}
.info-item { display: flex; gap: 1rem; margin: 2rem 0;}
.info-item i { font-size: 1.5rem; color: var(--primary-color); margin-top: 0.3rem;}
.social-links { display: flex; gap: 1rem; margin-top: 2rem;}
.social-links a { width: 40px; height: 40px; background: var(--primary-color); color: white; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: var(--transition);}
.social-links a:hover { background: var(--secondary-color); transform: translateY(-3px);}
.contact-form { padding: 3rem;}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;}
.form-group { margin-bottom: 1.5rem;}
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--dark);}
.form-group input,.form-group select,.form-group textarea { width: 100%; padding: 12px; border: 2px solid var(--light); border-radius: var(--border-radius); font-family: inherit; transition: var(--transition);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline: none; border-color: var(--primary-color);}
/* Footer */.footer { background: var(--dark); color: white; padding: 3rem 0 1rem;}
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem;}
.footer-section h3 { font-size: 1.8rem; margin-bottom: 1rem;}
.footer-section h3 span { color: var(--primary-color);}
.footer-section h4 { margin-bottom: 1rem;}
.footer-section ul { list-style: none;}
.footer-section ul li { margin-bottom: 0.5rem;}
.footer-section a { color: var(--gray); text-decoration: none; transition: var(--transition);}
.footer-section a:hover { color: var(--primary-color);}
.footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); color: var(--gray);}
/* Botón WhatsApp */.whatsapp-float { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: #25d366; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 0 5px 20px rgba(37, 211, 102, 0.5); z-index: 999; transition: var(--transition);}
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 8px 30px rgba(37, 211, 102, 0.7);}
/* Botón Scroll Top */.scroll-top { position: fixed; bottom: 30px; left: 30px; width: 50px; height: 50px; background: var(--primary-color); color: white; border: none; border-radius: 50%; cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 1.2rem; transition: var(--transition); z-index: 999;}
.scroll-top:hover { background: var(--dark);}
.scroll-top.show { display: flex;}
/* Responsive */@media (max-width: 768px) { .mobile-menu-toggle { display: block; }
.nav-menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--dark); flex-direction: column; padding: 1rem; display: none; }
.nav-menu.active { display: flex; }
.hero h1 { font-size: 2rem; }
.hero p { font-size: 1rem; }
.contact-wrapper { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.features-grid, .services-grid, .pricing-grid, .gallery-grid, .testimonials-grid { grid-template-columns: 1fr; }
.price-card.featured { transform: scale(1); }}
@media (max-width: 480px) { .hero h1 { font-size: 1.8rem; }
.section-title { font-size: 2rem; }
.btn { padding: 10px 20px; font-size: 0.9rem; }
.whatsapp-float { width: 50px; height: 50px; font-size: 1.5rem; }}script.js - Funcionalidades JavaScript
javascript
// Mobile Menu Toggleconst mobileMenuToggle = document.getElementById('mobileMenuToggle');const navMenu = document.getElementById('navMenu');
mobileMenuToggle.addEventListener('click', () => { navMenu.classList.toggle('active');});
// Close mobile menu when clicking a linknavMenu.querySelectorAll('a').forEach(link => { link.addEventListener('click', () => { navMenu.classList.remove('active'); });});
// Smooth Scrollingdocument.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } });});
// Tabs Systemconst tabButtons = document.querySelectorAll('.tab-btn');const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(button => { button.addEventListener('click', () => { // Remove active class from all buttons and contents tabButtons.forEach(btn => btn.classList.remove('active')); tabContents.forEach(content => content.classList.remove('active')); // Add active class to clicked button button.classList.add('active'); // Show corresponding content const tabId = button.getAttribute('data-tab'); document.getElementById(tabId).classList.add('active'); });});
// Scroll to Top Buttonconst scrollTopBtn = document.getElementById('scrollTop');
window.addEventListener('scroll', () => { if (window.pageYOffset > 300) { scrollTopBtn.classList.add('show'); } else { scrollTopBtn.classList.remove('show'); }});
scrollTopBtn.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' });});
// Form Submissionconst contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', (e) => { e.preventDefault(); // Get form data const formData = new FormData(contactForm); const data = Object.fromEntries(formData); // Here you would normally send the data to a server console.log('Form submitted:', data); // Show success message (you can customize this) alert('¡Gracias por tu solicitud! Te contactaremos pronto.'); contactForm.reset();});
// Scroll Animationsconst observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px'};
const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } });}, observerOptions);
// Apply animation to elementsdocument.querySelectorAll('.feature-card, .service-card, .price-card, .gallery-item, .testimonial-card').forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(30px)'; el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; observer.observe(el);});
// Navbar background on scrollconst navbar = document.querySelector('.navbar');window.addEventListener('scroll', () => { if (window.pageYOffset > 100) { navbar.style.background = 'rgba(30, 41, 59, 0.95)'; navbar.style.backdropFilter = 'blur(10px)'; } else { navbar.style.background = 'var(--dark)'; navbar.style.backdropFilter = 'none'; }});🎯 Características Integradas de Todos los Modelos
Del Modelo Qwen (confianza 88.59%):
- ✅ Estructura de 4 páginas (index, services, about, contact)
- ✅ Integración de Google Maps para ubicación
- ✅ Sistema de precios en CUP (moneda cubana)
- ✅ Diseño con Flexbox y Grid
- ✅ Font Awesome para iconos
- ✅ Google Fonts (Roboto)
Del Modelo Claude (confianza 85.2%):
- ✅ Sistema de pestañas para alternar servicios
- ✅ Botón WhatsApp flotante funcional
- ✅ Botón "volver arriba"
- ✅ Animaciones al hacer scroll
- ✅ Validación de formulario
- ✅ Diseño responsive 100%
Del Modelo Gemini (confianza 66.82%):
- ✅ Tailwind CSS como opción alternativa
- ✅ Uso de imágenes de Unsplash
- ✅ Sección hero con gradiente
- ✅ Formulario con select de servicios
- ✅ Colores industriales (azul/gris)
📱 Guía de Personalización
1. Cambiar Información Básica:
javascript
// En index.html, busca y cambia:- Nombre del negocio: "AutoCare" → Tu nombre- Teléfono: +53 5 234-5678 → Tu número- Dirección: Calle Principal #123 → Tu ubicación- Email: contacto@autocare.cu → Tu email2. Configurar WhatsApp:
html
<!-- En index.html, línea del botón flotante --><a href="https://wa.me/53XXXXXXXX" class="whatsapp-float"><!-- Cambia 53XXXXXXXX por tu número (código país + número sin espacios) -->3. Ajustar Precios:
html
<!-- En la sección de precios --><div class="price">$500 <span>CUP</span></div><!-- Cambia los valores según tus tarifas -->4. Personalizar Colores:
css
/* En styles.css, líneas 2-11 */:root { --primary-color: #2563eb; /* Azul principal */ --secondary-color: #f59e0b; /* Naranja/amarillo */ --dark: #1e293b; /* Gris oscuro */ --light: #f8fafc; /* Fondo claro */}5. Agregar Google Maps:
html
<!-- Agrega antes del formulario en la sección de contacto --><div class="map-container" style="margin-bottom: 2rem;"> <iframe src="https://www.google.com/maps/embed?pb=TU_COORDENADA_AQUI" width="100%" height="400" style="border:0; border-radius: 12px;" allowfullscreen="" loading="lazy"> </iframe></div>🚀 Opciones de Hosting (Gratis)
Opción 1: Netlify (Más Fácil)
- Ve anetlify.com
- Arrastra la carpeta con tus archivos
- Tu sitio estará en línea en 30 segundos
- URL gratis:
tunombre.netlify.app
Opción 2: GitHub Pages
- Crea cuenta engithub.com
- Crea un repositorio llamado
tunombre.github.io - Sube los archivos HTML/CSS/JS
- Activa GitHub Pages en Settings
- URL:
tunombre.github.io
Opción 3: Vercel
- Ve avercel.com
- Conecta tu GitHub o sube archivos
- Deploy automático
- URL:
tunombre.vercel.app
📧 Configurar Formulario de Contacto
Opción A: Formspree (Gratis - 50 envíos/mes)
html
<!-- Cambia la etiqueta <form> por: --><form action="https://formspree.io/f/TU_ID_AQUI" method="POST"> <!-- Mismo contenido del formulario --></form>- Regístrate enformspree.io
- Copia tu ID único
- Los mensajes llegarán a tu email
Opción B: EmailJS (Gratis - 200 envíos/mes)
javascript
// En script.js, reemplaza el event listener del form:emailjs.sendForm('TU_SERVICE_ID', 'TU_TEMPLATE_ID', contactForm) .then(() => alert('¡Mensaje enviado!'));⚙️ Notas Técnicas Importantes
Conflictos Entre Modelos:
-
Frameworks CSS:
- Qwen/Claude recomiendan CSS puro
- Gemini sugiere Tailwind CSS
- Solución: El código proporcionado usa CSS puro (más control)
-
Estructura de archivos:
- Todos coinciden en 1 archivo index.html principal
- Difieren en si crear páginas separadas (services.html, about.html)
- Solución: El código usa una sola página (SPA) con anclas, más fácil de mantener
-
Sistema de precios:
- Qwen usa moneda CUP (Cuba)
- Claude/Gemini sugieren configuración flexible
- Solución: Precios en CUP según tu contexto (La Habana)
✅ Lista de Verificación Pre-Lanzamiento
- Cambiar número de WhatsApp
- Actualizar dirección y teléfono
- Configurar formulario de contacto
- Agregar fotos reales de tu taller
- Ajustar precios según tus tarifas
- Probar en móvil (Chrome DevTools F12)
- Verificar todos los enlaces
- Optimizar imágenes (TinyPNG)
- Agregar Google Maps
- Configurar dominio personalizado
- Agregar Google Analytics (opcional)
🎨 Mejoras Futuras Sugeridas
- Sistema de citas online (Calendly)
- Galería dinámica con más fotos
- Blog de consejos automotrices
- Chat en vivo (Tawk.to gratis)
- Reseñas de Google embebidas
- Video testimoniales
- Calculadora de precios interactiva
- Programa de fidelidad
¡Tu sitio web está 100% listo para lanzar! 🚗✨ Solo necesitas personalizar la información de contacto, subir fotos reales y elegir un hosting. ¿Necesitas ayuda con alguna personalización específica? ¡Pregunta!
·7m 36s