NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia Studio Atlas siguiendo estas especificaciones. Usa HTML5, TailwindCSS vía CDN y JavaScript vanilla en un solo archivo.
**Paleta de colores**: #0A0A0A (fondo principal), #FFFFFF (texto), #1E40AF (azul primario), #3B82F6 (azul accent), #E5E7EB (gris claro).
**Tipografía**: "Inter" para encabezados y cuerpo, peso 400‑600, tamaños responsivos (h1 3rem, h2 2.25rem, p 1rem).
**Header**: barra fija con logo sencillo (texto Lúmina), enlaces Home, About, Services, Case Studies, Contact y iconos de Instagram, X, LinkedIn, Facebook alineados a la derecha. Menú hamburguesa para móvil, animación de apertura.
**Hero** (sección 2): contenedor circular que muestra 10 imágenes en un grid radial, cada una dentro de un div .circle-item con animación de
3.717 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.717 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 barra de navegación fija, logo ficticio y enlaces principales + iconos sociales.
- 2.1 Hero circular: grid de 10 imágenes en círculo animado, texto introductorio y botón CTA.
- 3.1 Sección "Servicios" con tarjetas horizontales, iconos y breve descripción.
- 4.1 Galería de casos de estudio en grid de tres columnas, imágenes con overlay.
- 5.1 Formulario de contacto simple con campos nombre, email, mensaje y botón enviar.
- 6.1 Footer con enlaces rápidos, suscripción a newsletter y iconos sociales.
ABOUT
- 1.1 Header reutiliza la barra de navegación.
- 2.1 Bloque de presentación con foto grande y texto sobre la agencia.
- 3.1 Valores en tarjetas con iconos.
- 4.1 Equipo en cuadrícula de retratos circulares.
- 5.1 Footer idéntico al de Home.
SERVICES
- 1.1 Header.
- 2.1 Listado de servicios en tarjetas con iconos y descripciones.
- 3.1 CTA para contactar.
- 4.1 Footer.
CASE STUDIES
- 1.1 Header.
- 2.1 Grid de proyectos con imagen, título y breve resumen.
- 3.1 Filtro por categoría.
- 4.1 Footer.
CONTACT
- 1.1 Header.
- 2.1 Formulario de contacto ampliado (nombre, email, asunto, mensaje).
- 3.1 Mapa incrustado (placeholder).
- 4.1 Información de contacto y redes.
- 5.1 Footer.
PROMPTS RELACIONADOS · MISCELÁNEO
