NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia **Escuela Ámbar**, agencia digital de branding y desarrollo web. Usa únicamente **HTML**, **Tailwind CSS (CDN)** y **JavaScript vanilla** en un solo archivo. El proyecto debe incluir:
- **Paleta de colores**: #0A0A0A (negro profundo), #FFFFFF (blanco), #1A73E8 (azul vibrante), #F2F2F2 (gris claro), #FF6B6B (rojo coral para acentos).
- **Tipografía**: "Inter" para textos y "Space Grotesk" para títulos, importadas desde Google Fonts.
- **Header**: barra fija con logo (texto Lumenia), menú colapsable (Home, About, Services, Case Studies, Contact) y botones de redes sociales (Instagram, X, LinkedIn, Facebook) usando SVGs similares a los del original.
- **Hero circular**: sección full‑width con una cuadrícula de 10 círculos que muestran imágene
3.772 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.772 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 Encabezado con barra de navegación, menú colapsable y enlaces a redes sociales
- 1.2 Hero circular con grid de 10 imágenes en movimiento
- 1.3 Bloque de presentación de la agencia (título, subtítulo, CTA)
- 1.4 Galería de casos de estudio en tarjetas
- 1.5 Sección de servicios con iconos y descripciones
- 1.6 Formulario de contacto rápido
- 1.7 Pie de página con navegación secundaria, información de contacto y enlaces a redes sociales
ABOUT
- 2.1 Hero interno con título y párrafo descriptivo
- 2.2 Historia de la agencia en layout de dos columnas
- 2.3 Equipo con tarjetas de perfil
- 2.4 Valores y metodología en bloques iconográficos
- 2.5 CTA a proyectos
CASE STUDIES
- 3.1 Listado de estudios de caso en tarjetas con imagen, título y resumen
- 3.2 Filtros por categoría
- 3.3 Paginación
CONTACT
- 4.1 Formulario completo (nombre, email, mensaje)
- 4.2 Mapa incrustado
- 4.3 Información de contacto y horarios
- 4.4 Enlaces a redes sociales
FOOTER
- 5.1 Navegación secundaria (Home, About, Services, Contact)
- 5.2 Datos legales y copyright
- 5.3 Suscripción al newsletter
- 5.4 Iconos de redes sociales
PROMPTS RELACIONADOS · EDUCATION
