NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia "Boutique Orion" (producción y servicios de video digital) usando solo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. Reproduce fielmente la estructura y estilo del sitio analizado:
- Paleta de colores: negro (#000000), blanco (#FFFFFF), gris oscuro (#1A1A1A), azul profundo (#0A3D62), acentos verde lima (#A3D977).
- Tipografía: Inter (sans‑serif) para títulos y body, peso 400‑700, tamaños responsivos.
- Header: barra transparente fija, logo a la izquierda, menú mega‑dropdown con categorías (Demos, About Us, Services, Works, Blog, Contact), botón CTA "Let's Talk" a la derecha con efecto hover.
- Hero: sección full‑width con fondo de imagen webp, título h1 blanco, subtítulo, botón primario azul.
- Sección Demos: grid
3.452 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.452 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 transparente con logo, megamenú y botón "Let's Talk"
- 2.1 Hero con título, descripción y imagen de fondo responsive
- 3.1 Galería de demos (tres tarjetas con miniaturas y enlaces a distintas home)
- 4.1 Sección de ultra performance (cuatro métricas con barras de progreso)
- 5.1 Bloque azul con título, descripción y botón CTA
- 6.1 Footer con enlaces principales, formulario de newsletter y datos de contacto
ABOUT US
- 1.1 Header común
- 2.1 Título de página y texto descriptivo
- 3.1 Imagen o video institucional
- 4.1 Equipo destacado en grid
- 5.1 CTA a contacto
SERVICES
- 1.1 Header común
- 2.1 Lista de servicios en tarjetas
- 3.1 Detalle de servicio con imágenes y texto
- 4.1 Testimonios rotativos
- 5.1 CTA a solicitud de presupuesto
WORKS
- 1.1 Header común
- 2.1 Galería filtrable de proyectos
- 3.1 Detalle de proyecto con carrusel de imágenes
- 4.1 Comentarios de cliente
- 5.1 CTA a contacto
BLOG
- 1.1 Header común
- 2.1 Listado de artículos en tarjetas
- 3.1 Paginación
- 4.1 Sidebar con categorías y newsletter
- 5.1 CTA al final de cada artículo
CONTACT US
- 1.1 Header común
- 2.1 Formulario de contacto con campos básicos
- 3.1 Mapa incrustado
- 4.1 Información de contacto y redes sociales
- 5.1 CTA a redes
PROMPTS RELACIONADOS · MODA
