NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Café Alba" (cafealba.com). El proyecto debe ser un único archivo HTML que incluya Tailwind CSS vía CDN y JavaScript vanilla (sin frameworks). Utiliza la paleta de colores: #3E2723 (marrón oscuro), #6D4C41 (marrón medio), #D7CCC8 (beige claro), #FFFFFF (blanco), #000000 (negro) y acentos #C0A080 (dorado apagado). Tipografía principal: 'Playfair Display' (serif) para títulos y 'Inter' (sans) para cuerpo, cargados desde Google Fonts.
Estructura y requisitos:
- **Header**: barra fija, fondo blanco, logo a la izquierda (texto "Café Alba"), enlaces de navegación (Inicio, Sobre nosotros, Café, Menú, Galería, FAQ, Testimonios, Contacto, Blog) con efecto hover que duplica el texto (como en el original). Incluye icono de búsqueda que despliega un
4.251 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.251 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 y buscador
- 1.2 Hero con fondo a pantalla completa, título, subtítulo y botón CTA
- 1.3 Grid de categorías de café (Decaf, Filter, Espresso, Cold Brew, Single Origin, Signature Blends)
- 1.4 Bloque de texto descriptivo con animación y botón secundario
- 1.5 Sección de ventajas (p.ej. calidad, origen, sustentabilidad)
- 1.6 Footer con enlaces a About, FAQ, Contacto, Blog, redes sociales y suscripción
ABOUT US
- 2.1 Header interno duplicado del sitio
- 2.2 Imagen hero secundaria y texto institucional
- 2.3 Valores de la marca en columnas
- 2.4 Equipo con fotos y descripciones
- 2.5 CTA a la tienda
COFFEE
- 3.1 Header repetido
- 3.2 Grid de productos de café con imágenes, nombre y botón “Ver detalle”
- 3.3 Filtros de categoría lateral
- 3.4 Banner promocional
- 3.5 Footer idéntico al home
MENU
- 4.1 Header
- 4.2 Lista de platillos y bebidas con fotos y precios simulados
- 4.3 Sección de reservas
- 4.4 Footer
GALLERY
- 5.1 Header
- 5.2 Galería de imágenes en mosaico responsivo
- 5.3 Texto inspiracional
- 5.4 Footer
FAQ
- 6.1 Header
- 6.2 Preguntas frecuentes en acordeón
- 6.3 CTA a contacto
TESTIMONIALS
- 7.1 Header
- 7.2 Carrusel de testimonios con foto y comentario
- 7.3 Footer
CONTACT US
- 8.1 Header
- 8.2 Formulario de contacto con campos nombre, email, mensaje
- 8.3 Mapa incrustado
- 8.4 Información de sucursales
- 8.5 Footer
BLOG
- 9.1 Header
- 9.2 Lista de artículos con thumbnail, título y extracto
- 9.3 Paginación
- 9.4 Footer
PROMPTS RELACIONADOS · RESTAURANTE Y COMIDA
