NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia **Blog Alba**, una agencia digital de diseño para startups y creadores. Usa exclusivamente HTML, Tailwind CSS (CDN) y JavaScript vanilla en un solo archivo. Replicar el **patrón de UI** del sitio analizado:
- **Header**: barra transparente que se vuelve sólida al hacer scroll, logo a la izquierda, menú de navegación con enlaces a Home, About, Portfolio, Services, Blog, Contact y un botón destacado "Book A Call" con efecto hover. Incluye hamburguesa para móvil.
- **Hero**: sección a pantalla completa con título grande "Product Designer", año actual, dos contadores animados ("Project completed" y "Startup raised"), subtítulo y botón de scroll a "About". Los contadores deben animarse con números que incrementan al entrar en vista.
- **Sección
3.952 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.952 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 fija con logo, enlaces principales y botón "Book A Call".
- 1.2 Hero principal con texto destacado, contadores animados de métricas y botones de llamada a la acción.
- 1.3 Sección "Sobre nosotros".
- 1.4 Servicios en cuadrícula.
- 1.5 Portfolio de proyectos.
- 1.6 Blog con artículos recientes.
- 1.7 CTA final y formulario breve.
- 1.8 Footer con enlaces y redes.
ABOUT
- 2.1 Encabezado interior con título "Sobre Blog Alba".
- 2.2 Texto descriptivo y foto del equipo.
- 2.3 Valores y misión en bloques.
- 2.4 CTA a proyecto.
SERVICES
- 3.1 Lista de servicios con iconos.
- 3.2 Detalle de cada servicio en tarjetas.
- 3.3 Testimonios rotativos.
- 3.4 CTA a solicitud.
PORTFOLIO
- 4.1 Galería filtrable de proyectos.
- 4.2 Tarjetas con imagen, título y categoría.
- 4.3 Modal de proyecto individual.
BLOG
- 5.1 Lista de artículos con imagen, título y extracto.
- 5.2 Sidebar con categorías y últimos posts.
- 5.3 Paginación.
CONTACT
- 6.1 Formulario de contacto sencillo (nombre, email, mensaje).
- 6.2 Información de contacto y mapa.
- 6.3 CTA "Book A Call".
PRIVACY POLICY
- 7.1 Texto legal estructurado en secciones.
STYLE GUIDE
- 8.1 Palette, tipografías y componentes UI.
404
- 9.1 Mensaje de error y enlace al inicio.
PROMPTS RELACIONADOS · BLOG / MAGAZINE
