NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Motor Vega" (taller mecánico y tienda de repuestos) usando únicamente HTML, Tailwind CSS vía CDN y JavaScript vanilla en un solo archivo. El proyecto debe reproducir los patrones de UI del sitio analizado:
- Header fijo con logo (70px), menú horizontal (Home, About, Services, Products, Blog, FAQ), botón "Contact us" visible en móviles, ícono de búsqueda que despliega una barra y carrito de compras con contador.
- Hero principal ocupando pantalla completa, fondo oscuro con overlay, título grande, subtítulo y dos botones CTA ("Ver servicios" y "Ver productos").
- Sección de servicios: 3 columnas, cada una con icono SVG, título y breve texto, fondo ligero.
- Sección de productos destacados: grid responsive 4 columnas (mobile 1‑2), tarjeta
3.430 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.430 caracteres · licencia libre
Solo descarga completa disponible
CAPTURA COMPLETA · HOME
Para que Claude replique el diseño con máxima fidelidad, descarga la imagen y adjúntala en tu chat.
Descargar captura
ESTRUCTURA DEL SITIO
Tabla de secciones
HOME
- 1.1 Cabecera fija con logo, menú, buscador, carrito y botón contacto
- 1.2 Hero con imagen de fondo, título, subtítulo y botones CTA
- 1.3 Servicios destacados en 3 columnas con íconos
- 1.4 Productos destacados en grid de 4 columnas
- 1.5 Testimonios en carrusel de 3 items
- 1.6 Formulario de suscripción al newsletter
- 1.7 Footer amplio con navegación, datos y redes
ABOUT US
- 2.1 Cabecera idéntica
- 2.2 Hero interno con título "Sobre nosotros"
- 2.3 Texto descriptivo de la empresa y misión
- 2.4 Equipo en tarjetas con foto y cargo
- 2.5 Valores en lista con íconos
- 2.6 CTA a contacto
SERVICES
- 3.1 Cabecera idéntica
- 3.2 Hero interno "Servicios"
- 3.3 Lista de servicios en tarjetas con icono, título y breve descripción
- 3.4 Botón para solicitar presupuesto
PRODUCTS
- 4.1 Cabecera idéntica
- 4.2 Hero interno "Productos"
- 4.3 Grid de productos con imagen, nombre, precio y botón "Añadir al carrito"
- 4.4 Filtros laterales por categoría
BLOG
- 5.1 Cabecera idéntica
- 5.2 Hero interno "Blog"
- 5.3 Lista de artículos en tarjetas con imagen, título, extracto y fecha
- 5.4 Paginación
FAQ
- 6.1 Cabecera idéntica
- 6.2 Hero interno "Preguntas frecuentes"
- 6.3 Acordeón de preguntas y respuestas
CONTACT US
- 7.1 Cabecera idéntica
- 7.2 Hero interno "Contacto"
- 7.3 Formulario de contacto (nombre, email, mensaje)
- 7.4 Mapa incrustado y datos de ubicación
PROMPTS RELACIONADOS · AUTOMOCIÓN
