NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Design a full‑stack mock website for the fictitious brand "Ámbar Café" (ambar-cafe.com). The site must reproduce the visual patterns of the provided template: a fixed top navigation bar with logo, links (Home, About, Menu, Shop, Contact), phone number and cart button; a full‑screen hero with a scrolling‑parallax image background; clean sections with generous whitespace, rounded cards, and subtle drop‑shadows. Use the following design tokens:
- Palette: #3E2723 (dark coffee), #795548 (brown), #FFF3E0 (cream), #FF7043 (accent coral), #212121 (text).
- Typography: Heading – "Playfair Display", serif, weight 700; Body – "Inter", sans‑serif, weight 400.
- Buttons: rounded, bg #FF7043, hover darken, white text.
Implement the site in a single HTML file using Tailwind CSS via CDN and vanilla JavaS
3.786 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.786 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 acceso al carrito
- 1.2 Hero de imagen de fondo a pantalla completa con efecto de desplazamiento
- 1.3 Bloque de presentación con título y texto breve
- 1.4 Cuadrícula de categorías (Café, Pastelería, Tienda, Eventos)
- 1.5 Slider de productos destacados con botón "Añadir al carrito"
- 1.6 Testimonios en carrusel
- 1.7 Sección de suscripción al boletín
- 1.8 Footer con información de contacto, menús rápidos y redes sociales
ABOUT
- 2.1 Hero interno con imagen de fondo y título "Sobre nosotros"
- 2.2 Texto descriptivo de la historia y la filosofía de la cafetería
- 2.3 Equipo con fotos y breves biografías
- 2.4 Valores en iconos
- 2.5 Footer reutilizado
MENU
- 3.1 Hero interno con título "Menú"
- 3.2 Lista de categorías de bebidas y alimentos
- 3.3 Tarjetas de producto con foto, descripción y botón de detalle
- 3.4 Sección de menú destacado en formato grid
- 3.5 Footer reutilizado
SHOP
- 4.1 Hero interno con título "Tienda"
- 4.2 Grid de productos con imagen, nombre, precio y botón "Añadir"
- 4.3 Filtros laterales (categoría, precio)
- 4.4 Paginación
- 4.5 Footer reutilizado
CONTACT
- 5.1 Hero interno con título "Contacto"
- 5.2 Formulario de contacto (nombre, email, mensaje)
- 5.3 Mapa incrustado
- 5.4 Información de contacto y horario
- 5.5 Footer reutilizado
PROMPTS RELACIONADOS · RESTAURANTE Y COMIDA
