NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia **EstructoPlus** (sector construcción) usando **HTML**, **Tailwind CSS CDN** y **JavaScript vanilla** en un solo archivo. El objetivo es replicar el diseño visual y la estructura del sitio fuente, sin copiar texto ni imágenes. Utiliza los siguientes valores:
**Paleta de colores**:
- Primario: #0D3B66 (azul oscuro)
- Secundario: #FAA916 (naranja vibrante)
- Gris oscuro: #333333
- Gris claro: #F5F5F5
- Blanco: #FFFFFF
**Tipografía**:
- Fuente principal: `Inter`, peso 400/600/700, carga desde Google Fonts.
- Fuente secundaria (titulares): `Roboto Slab`, peso 700.
**Estructura**:
1. **Header** fijo con logo a la izquierda, menú horizontal (Home, Sobre, Servicios, Proyectos, Blog, Contacto) y botón CTA “Obtener información” con icono de fle
4.492 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.492 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ú y botón CTA
- 1.2 Hero slider (3 slides) con título, subtítulo, párrafo y botón
- 1.3 Thumbs del slider con numeración y barra de progreso
- 1.4 Sección About: imagen, número 01, título, texto descriptivo
- 1.5 Sección Services (grid de tarjetas, iconos, título y breve descripción)
- 1.6 Sección Projects (galería filtro, tarjetas con imagen y overlay)
- 1.7 Sección Blog (lista de artículos, imágenes y extractos)
- 1.8 CTA final con formulario de contacto y mapa
- 1.9 Footer con links, redes, datos de contacto y copyright
ABOUT
- 2.1 Imagen destacada con efecto parallax
- 2.2 Título y párrafo de presentación
- 2.3 Numeración de paso y línea decorativa
- 2.4 Botón secundario "Conócenos"
SERVICES
- 3.1 Grid de 3 columnas, cada una con icono, título y descripción corta
- 3.2 Botón CTA bajo el grid
PROJECTS
- 4.1 Filtro de categorías (Industrial, Comercial, Residencial)
- 4.2 Galería de tarjetas con foto, título y overlay al hover
- 4.3 Botón "Ver todos los proyectos"
BLOG
- 5.1 Lista de 3 artículos destacados con imagen, título, fecha y resumen
- 5.2 Botón "Más artículos"
CONTACT
- 6.1 Formulario de contacto (nombre, email, asunto, mensaje) + botón enviar
- 6.2 Mapa incrustado con ubicación
- 6.3 Información de contacto rápida (teléfono, email, dirección)
FOOTER
- 7.1 Logo pequeño y claim
- 7.2 Menú de enlaces útiles (Inicio, Sobre, Servicios, Proyectos, Blog, Contacto)
- 7.3 Iconos de redes sociales
- 7.4 Texto de derechos reservados
PROMPTS RELACIONADOS · ARQUITECTURA
