NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia **Metrópolis Hub** (dominio metropolishub.com) con el siguiente alcance y stack:
- **Stack**: HTML estático, Tailwind CSS vía CDN, JavaScript vanilla (un único archivo). No usar frameworks externos ni librerías.
- **Paleta de colores**: #0A3D62 (azul oscuro), #1F7A8C (azul medio), #F0F5F9 (gris muy claro), #FFFFFF (blanco), #E0E0E0 (gris suave).
- **Tipografía**: "Inter", sans‑serif para todo el texto; títulos en peso 700, cuerpo en 400.
- **Header**: barra fija con fondo blanco, sombra ligera. Logo a la izquierda (SVG placeholder). Menú principal con ítems: "Inicio", "Sobre la ciudad" (desplegable con "Historia", "Equipo", "Socios"), "Servicios", "Departamentos" (desplegable con lista de departamentos y enlace "Todos los departamentos"), "
4.760 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.760 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 Barra de navegación fija con logo y menú desplegable (mega‑menú)
- 1.2 Hero banner con título grande, subtítulo y galería de screenshots
- 1.3 Sección de clientes/beneficios con iconos y textos descriptivos
- 1.4 Botón destacado de Contacto en la cabecera
- 1.5 Footer con enlaces institucionales y datos de contacto
ABOUT US
- 2.1 Cabecera interna con título y breadcrumb
- 2.2 Texto descriptivo de la ciudad y su historia
- 2.3 Galería de imágenes o video institucional
- 2.4 Equipo y valores
- 2.5 Footer
SERVICES
- 3.1 Lista de servicios municipales con tarjetas descriptivas
- 3.2 Filtros o categorías laterales
- 3.3 Botón para solicitar información
- 3.4 Footer
DEPARTMENTS
- 4.1 Menú lateral con listado de departamentos
- 4.2 Detalle de cada departamento (imagen, descripción, contacto)
- 4.3 Footer
EVENTS
- 5.1 Calendario de eventos municipales
- 5.2 Tarjetas de eventos con fecha, imagen y resumen
- 5.3 Enlace a detalle del evento
- 5.4 Footer
CONTACT US
- 6.1 Formulario de contacto con campos básicos
- 6.2 Mapa incrustado y datos de ubicación
- 6.3 Información de contacto rápido
- 6.4 Footer
PROMPTS RELACIONADOS · EDUCACIÓN
