NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia Saber Titan, una agencia digital de branding y desarrollo, usando únicamente HTML, Tailwind CSS (CDN) y JavaScript vanilla en un único archivo. El proyecto debe replicar el diseño visual y estructura analizada:
- **Paleta de colores**: fondo principal #FFFFFF, texto principal #111111, acentos #0D6EFD (azul), #F3F4F6 (gris claro), #FFC107 (amarillo). Usa estos colores en todo el layout.
- **Tipografía**: fuente principal "Inter" vía Google Fonts, pesos 400 y 600. Títulos en 600, cuerpo en 400.
- **Header**: barra fija con logo (texto Saber Titan en #0D6EFD), menú hamburguesa que despliega un panel lateral con enlaces: Home, About, Work, Pricing, Blog, Contact y botones internos. Botón destacado "Reserva una llamada" con fondo #FFC107 y text
4.411 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.411 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, menú hamburguesa, botón "Reserva una llamada" y carrito modal
- 1.2 Hero principal: título grande, subtítulo, botón principal
- 1.3 Grid de proyectos destacados (3 columnas, imagen + overlay)
- 1.4 Sección de servicios: iconos, encabezado y descripción breve (4 columnas)
- 1.5 Testimonios: carrusel horizontal con foto, nombre y comentario
- 1.6 Últimas entradas del blog: tarjetas con imagen, título y excerpt
- 1.7 CTA final: fondo contrastante, texto y botón de contacto
- 1.8 Footer: columna de ubicación, hora, copyright, enlaces rápidos
ABOUT
- 2.1 Cabecera interna con breadcrumb
- 2.2 Texto descriptivo de la agencia y fotos del equipo
- 2.3 Valores y misión en bloques de iconos
- 2.4 CTA a proyecto o contacto
WORK
- 3.1 Galería filtrable de proyectos (categorías)
- 3.2 Detalle de proyecto: hero, descripción, imágenes en slider, resultados
PRICING
- 4.1 Tabla comparativa de planes con características y botones CTA
BLOG
- 5.1 Lista de artículos con imagen, título, excerpt y botón leer más
- 5.2 Paginación inferior
BLOG DETAILS
- 6.1 Artículo completo: título, autor, fecha, contenido, bloque de comentarios
CONTACT
- 7.1 Formulario de contacto: nombre, email, mensaje, botón enviar
- 7.2 Mapa incrustado y datos de oficina
CART MODAL (accesible desde cualquier página)
- 8.1 Lista de productos en el carrito con miniatura, nombre, precio, cantidad editable y botón eliminar
- 8.2 Resumen de subtotal y total
- 8.3 Botones para "Ver carrito" y "Finalizar compra"
PROMPTS RELACIONADOS · EDUCACIÓN
