NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web para la marca ficticia **Estudio Digital Orion** (agencia digital creativa) usando **HTML estático**, **Tailwind CSS vía CDN** y **JavaScript vanilla** en un único archivo. El proyecto debe reproducir el diseño analizado:
- **Paleta de colores**: negro profundo #0A0A0A, gris carbón #1F1F1F, blanco puro #FFFFFF, acento azul neón #00E5FF, acento rosado #FF2D8A.
- **Tipografía**: encabezados con `font-brand` → *Montserrat* (700, 48px) y cuerpo con `font-sans` → *Inter* (400, 16px).
- **Header**: barra fija con logo a la izquierda, menú hamburguesa que abre un overlay con enlaces Home, About, Services, Projects, Contact y sección de detalles y redes. Botón "Get started" con efecto de filtro SVG y flecha decorativa.
- **Hero**: tres columnas.
1. **Izquierda**: iconos de red
3.985 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.985 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ú hamburguesa, botón "Get started" y enlaces sociales
- 2.1 Hero izquierda: iconos sociales y ubicación
- 2.2 Hero centro: nombre animado y galería rotada de imágenes
- 2.3 Hero derecha: lista de tags en marquee y flecha de desplazamiento
- 3.1 Servicios título y subtítulo
- 3.2 Servicios descripción con imagen y texto
- 3.3 Servicios contadores animados
- 4.1 Footer con enlaces de navegación, redes sociales y datos de contacto
ABOUT
- 1.1 Header idéntico al Home
- 2.1 Bloque título y texto descriptivo de la agencia
- 3.1 Equipo con tarjetas de perfil
- 4.1 Footer reutilizado
SERVICES
- 1.1 Header idéntico
- 2.1 Lista de servicios presentados en tarjetas con icono y breve descripción
- 3.1 Caso de estudio destacado con imagen grande y texto
- 4.1 Footer reutilizado
PROJECTS
- 1.1 Header idéntico
- 2.1 Grid de proyectos con filtro por categoría
- 3.1 Modal emergente de detalle de proyecto (imagen, texto, enlaces)
- 4.1 Footer reutilizado
CONTACT
- 1.1 Header idéntico
- 2.1 Formulario de contacto (nombre, email, asunto, mensaje) y mapa estático
- 3.1 Información de contacto y redes sociales
- 4.1 Footer reutilizado
PROMPTS RELACIONADOS · DIGITAL AGENCY
