NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático para la marca ficticia LunaDerma (lunaderma.com) siguiendo el estilo visual del template analizado. Usa HTML5 + Tailwind CSS CDN (https://cdn.tailwindcss.com) + JavaScript vanilla en un único archivo. Paleta de colores: #1A1A1A (fondo principal), #FFFFFF (texto), #E63946 (acentos rojo), #F1FAEE (gris claro), #A8DADC (azul pastel). Tipografía: 'Inter' para encabezados y 'Open Sans' para cuerpo, cargadas desde Google Fonts.
Estructura requerida:
HEADER (sticky, flex, justificado entre logo y menú). Logo textual "LunaDerma" en Inter bold. Menú horizontal con enlaces Home, About, Service, Team, Contact. Icono de carrito a la derecha que abre un panel lateral izquierdo con lista de productos, subtotales y botón "Continuar al checkout".
HOME sections:
1. Hero: conte
3.792 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.792 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 con logo, menú y carrito lateral
- 1.2 Hero principal: título grande, imagen a la izquierda, botón "Conócenos"
- 1.3 Bloque de apoyo: imagen decorativa a la derecha, párrafo explicativo y botón "Reservar cita"
- 1.4 Grid de ventajas: 3 columnas con icono + texto breve
- 1.5 Llamada a la acción final: texto centrado y botón destacado
- 1.6 Footer: logo, enlaces a Home, About, Service, Team, menú extra, datos de contacto y redes sociales
ABOUT
- 2.1 Cabecera idéntica a Home
- 2.2 Hero interno con título y foto de fondo
- 2.3 Texto descriptivo de la empresa y misión
- 2.4 Equipo destacado con fotos y breves biografías
- 2.5 Footer idéntico a Home
SERVICE
- 3.1 Cabecera estándar
- 3.2 Lista de servicios en tarjetas con imagen, título y descripción corta
- 3.3 Botón para solicitar información o compra
- 3.4 Footer estándar
DOCTOR (Team)
- 4.1 Cabecera estándar
- 4.2 Grid de profesionales con foto, nombre, cargo y enlace a perfil
- 4.3 Footer estándar
CONTACT
- 5.1 Cabecera estándar
- 5.2 Formulario de contacto con campos nombre, email, mensaje y botón enviar
- 5.3 Información de ubicación y teléfono
- 5.4 Footer estándar
PROMPTS RELACIONADOS · COMERCIO ELECTRÓNICO