NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Farallón Lúmina" (estudio creativo de diseño UI/UX y branding) utilizando solo HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. La web debe replicar el diseño visual y la estructura del sitio de referencia, sin copiar textos ni imágenes originales.
**Alcance**: Home, About, Projects, Blog, Services y Contact. Cada página comparte la misma cabecera y footer.
**Stack**:
- `<script src="https://cdn.tailwindcss.com"></script>` para Tailwind.
- JavaScript vanilla para menú hamburguesa, animaciones on‑scroll (IntersectionObserver) y efectos hover en iconos.
**Paleta de colores** (extraída del original y adaptada):
- Primary: #007CE6 (azul vibrante)
- Primary Light: #E0F2FF (azul muy claro, 10% opacity)
- Accent: #FF4D4D
5.267 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
5.267 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 Cabecera fija con logo, menú hamburguesa y botón "Hire Me"
- 1.2 Hero con foto circular, saludo "Hello", nombre y título profesional en rotación
- 1.3 Bloque de información personal con breve descripción
- 1.4 Tarjetas de contacto: teléfono, email y enlaces a redes sociales
- 1.5 Sección de servicios en grid de 3 columnas con iconos y descripción breve
- 1.6 Footer con enlaces a secciones principales y datos de contacto
ABOUT US
- 2.1 Cabecera compartida
- 2.2 Imagen lateral y texto descriptivo del estudio
- 2.3 Equipo y valores
PROJECTS
- 3.1 Cabecera compartida
- 3.2 Galería tipo masonry de proyectos con filtros
- 3.3 Detalle de proyecto emergente
BLOGS
- 4.1 Cabecera compartida
- 4.2 Lista de artículos en cards con imagen, título y excerpt
- 4.3 Paginación inferior
SERVICES
- 5.1 Cabecera compartida
- 5.2 Lista de servicios en grid con iconos y botones de CTA
CONTACT US
- 6.1 Cabecera compartida
- 6.2 Formulario de contacto con campos nombre, email, mensaje
- 6.3 Información de contacto adicional y mapa estático
PROMPTS RELACIONADOS · PORTFOLIO
