NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia **Saber Olmo** siguiendo el stack **HTML + Tailwind CSS (CDN) + JavaScript vanilla** en un único archivo. Usa la paleta de colores principal: #0D0D0D (negro profundo), #1A73E8 (azul eléctrico), #F5F5F5 (gris muy claro), #E91E63 (rosa magenta) y acentos en #FFFFFF. Tipografía: **Inter** para títulos y párrafos, peso 400‑700, y **Roboto Mono** para códigos o datos numéricos.
**Estructura general**:
- `<header>` fijo con logo SVG (texto Saber Olmo), menú de navegación horizontal (Home, About, Services, Portfolio, Blog, Contact), botón destacado "Work With Us" y menú hamburguesa para móvil que despliega un overlay con los mismos enlaces.
- `<section id="hero">` ocupa toda la ventana, fondo oscuro con sutil textura, título grande «Conecta tu s
4.448 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.448 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 con logo, enlaces principales y botón de contacto
- 1.2 Hero fullscreen con título, subtítulo y CTA
- 1.3 Bloque de estadísticas (horas, años, proyectos)
- 1.4 Sección "Quiénes somos" con texto y botón
- 1.5 Tarjetas de servicios (grabación, mezcla, master)
- 1.6 Carrusel de testimonios
- 1.7 Formulario de suscripción breve
- 1.8 Footer con enlaces, redes y contacto
ABOUT US
- 2.1 Header interno con hero de portada
- 2.2 Texto descriptivo extenso con imágenes
- 2.3 Equipo destacado en tarjetas
- 2.4 Valores y misión en bloques icónicos
- 2.5 CTA a contactar
SERVICES
- 3.1 Lista de servicios en grid de tarjetas
- 3.2 Detalle de cada servicio con imágenes y lista de beneficios
- 3.3 Preguntas frecuentes en acordeón
- 3.4 CTA a agendar sesión
PORTFOLIO
- 4.1 Galería filtrable de proyectos con imágenes en mosaico
- 4.2 Modal de vista ampliada con descripción del proyecto
- 4.3 Enlaces a caso de estudio completo
BLOG
- 5.1 Lista de artículos en formato tarjeta con imagen, título y extracto
- 5.2 Paginación o carga infinita
- 5.3 Sidebar con categorías y etiquetas
CONTACT
- 6.1 Formulario de contacto con campos nombre, email, mensaje
- 6.2 Mapa incrustado de ubicación
- 6.3 Información de contacto y horario
FOOTER (presente en todas las páginas)
- 7.1 Enlaces rápidos, redes sociales, suscripción al newsletter
- 7.2 Copyright y política de privacidad
PROMPTS RELACIONADOS · EDUCACIÓN
