NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para **Estudio Digital Atlas** (agencia digital) usando *HTML* único, *Tailwind CSS* vía CDN y *JavaScript vanilla* en un solo archivo. Mantén la siguiente paleta de colores: #0A0A0A (negro), #FFFFFF (blanco), #1E3A8A (azul profundo), #3B82F6 (azul brillante), #F3F4F6 (gris claro), #111827 (gris oscuro). Usa la tipografía "Inter" para textos y "Poppins" para encabezados (cargar desde Google Fonts). Reproduce la estructura y patrones UI del ejemplo original sin copiar contenido literal.
**Requisitos de componentes:**
1. **Header** fijo con logo (svg ficticio), menú de navegación con dropdowns (Intro, Home, Components, Pricing, Blog, Help Center, Pages) y botón destacado "Buy Template" (estilo primario). Menú colapsable en móvil.
2. **Hero intro**: columna izquier
4.061 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.061 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ú desplegable (Intro, Home, Components, Pricing, Blog, Help Center, Pages) y botón "Buy Template"
- 2.1 Hero intro: título grande, párrafo descriptivo, botones primario y ghost, imágenes de iPhone y iPad flotantes
- 3.1 Section "Choose Yours": título, subtítulo, párrafo y galería de 6 layouts con badge y enlace
- 4.1 Sección de contadores: 4 bloques con número y etiqueta (Componentes, Layouts, Blog, Pricing)
- 5.1 Footer: columnas de enlaces (Productos, Recursos, Empresa) y datos de contacto
ABOUT
- 1.1 Header idéntico al Home
- 2.1 Bloque de presentación con imagen y texto descriptivo
- 3.1 Valores en tres columnas con íconos
- 4.1 Equipo: tarjetas con foto, nombre y rol
- 5.1 Footer reutilizado
CONTACT
- 1.1 Header idéntico
- 2.1 Formulario de contacto (nombre, email, asunto, mensaje) y mapa integrado
- 3.1 Información de contacto en columnas (dirección, email, teléfono)
- 4.1 Footer reutilizado
BLOG
- 1.1 Header idéntico
- 2.1 Lista de artículos en grid de tarjetas con imagen, título, excerpt y botón leer más
- 3.1 Paginación numerada
- 4.1 Footer reutilizado
PROMPTS RELACIONADOS · DIGITAL AGENCY
