NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Academia Berilo" (agencia creativa) usando HTML estático, Tailwind CSS vía CDN y JavaScript vanilla en un solo archivo. Reproduce fielmente la estructura y estilo visual del sitio original analizado, sin copiar texto ni imágenes. Utiliza la siguiente paleta de colores: #1F2937 (gris oscuro), #3B82F6 (azul primario), #F3F4F6 (gris claro), #FFFFFF (blanco), #9CA3AF (gris medio). Tipografía: Inter (sans-serif) para títulos y body, peso 400‑700.
**Header**: barra fija con logo SVG, menú horizontal (About, Services, Projects, Pricing, Blog, Pages dropdown con enlaces internos), botón "Contact" visible solo en móvil, icono de carrito que abre modal de carrito (estructura mínima, sin funcionalidad real).
**Footer**: fondo gris oscuro, cuatro
4.155 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.155 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 con logo, menú principal, dropdown y carrito
- 1.2 Hero con título, subtítulo y botón CTA
- 1.3 Bloque de servicios en tarjetas
- 1.4 Portafolio tipo grid con filtro por categoría
- 1.5 Testimonios en carrusel
- 1.6 Tabla comparativa de precios/planes
- 1.7 Últimos artículos del blog
- 1.8 CTA de suscripción al newsletter
- 1.9 Footer con navegación secundaria, redes y contacto
ABOUT US
- 1.1 Cabecera (reutilizada)
- 1.2 Hero interno con foto de equipo y misión
- 1.3 Historia de la empresa en sección de texto + imagen
- 1.4 Valores en columnas con iconos
- 1.5 Equipo en tarjetas con foto y biografía breve
- 1.6 CTA para contactar
- 1.7 Footer (reutilizado)
SERVICES
- 1.1 Cabecera
- 1.2 Hero con listado de servicios
- 1.3 Tarjetas descriptivas de cada servicio
- 1.4 Proceso de trabajo en pasos numerados
- 1.5 Preguntas frecuentes en accordion
- 1.6 CTA de presupuesto
- 1.7 Footer
PROJECTS
- 1.1 Cabecera
- 1.2 Hero con filtro de proyectos
- 1.3 Grid de proyectos con hover overlay
- 1.4 Detalle de proyecto (imagen, descripción, resultados)
- 1.5 CTA para ver más proyectos
- 1.6 Footer
PRICING
- 1.1 Cabecera
- 1.2 Hero con mensaje de valor
- 1.3 Tabla comparativa de planes (gratuito, pro, enterprise)
- 1.4 Beneficios destacados
- 1.5 FAQ accordion
- 1.6 CTA de suscripción
- 1.7 Footer
BLOG
- 1.1 Cabecera
- 1.2 Hero con búsqueda y categorías
- 1.3 Lista de artículos en tarjetas
- 1.4 Sidebar con últimos posts y etiquetas
- 1.5 Footer
CONTACT
- 1.1 Cabecera
- 1.2 Hero con formulario de contacto y mapa
- 1.3 Información de contacto en columnas
- 1.4 Footer
PROMPTS RELACIONADOS · EDUCATION
