NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia Market Marea (marketmarea.com) siguiendo el patrón de diseño del HTML proporcionado. El proyecto debe estar en un solo archivo HTML que incluya Tailwind CSS vía CDN y JavaScript vanilla para interactividad (dropdowns, carrito modal, accordion). Utiliza la siguiente paleta de colores: Primario #0D3B66, Secundario #FAF0CA, Acento #F4D35E, Fondo #F0F4F8, Texto #222222. Tipografía: headings con 'Montserrat' (weight 700), cuerpo con 'Inter' (weight 400).
**Estructura**
- Header: barra fija, logo a la izquierda, menú principal con enlaces Home, About, Services, Pages (mega‑dropdown con categorías Home, Team, Blog, Pricing, Book appointment, Shop, utility pages), Contact a la derecha y carrito con contador y modal.
- Hero: sección full‑width con
3.872 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.872 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 Header con logo, menú principal, dropdowns y carrito modal
- 2.1 Hero con título, subtítulo y botón principal
- 3.1 Sección de servicios con iconos y texto descriptivo
- 4.1 Galería de productos destacados en grid responsive
- 5.1 Testimonios con cards y foto del cliente
- 6.1 Llamado a la acción final con formulario de suscripción
- 7.1 Footer con enlaces útiles, redes sociales y datos de contacto
ABOUT US
- 1.1 Header reutilizado
- 2.1 Banner interno con título y breadcrumb
- 3.1 Texto corporativo con imagen acompañante
- 4.1 Equipo en cards con foto y rol
- 5.1 Valores en iconos y descripciones
- 6.1 Footer reutilizado
SERVICES
- 1.1 Header
- 2.1 Hero interno con resumen de servicios
- 3.1 Lista de servicios en tarjetas con icono y botón
- 4.1 Preguntas frecuentes en acordeón
- 5.1 CTA de contacto
- 6.1 Footer
PRODUCT DETAIL
- 1.1 Header
- 2.1 Breadcrumb y título del producto
- 3.1 Galería de imágenes del producto
- 4.1 Descripción, atributos y selector de cantidad
- 5.1 Botón "Añadir al carrito"
- 6.1 Productos relacionados en carousel
- 7.1 Footer
CART MODAL
- 1.1 Cabecera del carrito con título y botón cerrar
- 2.1 Lista de ítems con imagen, nombre, opciones y control de cantidad
- 3.1 Subtotal y botón de checkout
- 4.1 Mensaje carrito vacío
- 5.1 Footer (si corresponde)
PROMPTS RELACIONADOS · E-COMMERCE
