NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Bistro Atlas" (restaurante y cafetería de alta cocina urbana) usando únicamente HTML, Tailwind CSS (CDN) y JavaScript vanilla en un único archivo. La web debe reproducir fielmente la estructura y estilo del sitio analizado, sin copiar textos ni imágenes originales.
- Paleta de colores: #0D0D0D (negro profundo), #F2F2F2 (gris muy claro), #C0392B (rojo vino), #E67E22 (naranja cálido), #FFFFFF (blanco). Usa estas variables en Tailwind mediante @layer utilities o inline style.
- Tipografía: Fuente principal "Roboto" (sans-serif) para cuerpo y "Playfair Display" (serif) para encabezados. Importa ambas desde Google Fonts.
- Header (sticky): logo SVG ficticio a la izquierda, menú de navegación horizontal (Home, About us, Menu, Contact) con efect
4.169 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.169 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 Cabecera fija con logo, menú principal y carrito
- 1.2 Hero de pantalla completa con imagen de fondo, título y botón CTA
- 1.3 Bloque de introducción con historia breve y botón "Descubre más"
- 1.4 Cuadrícula de platos destacados (cards con imagen, nombre y breve descripción)
- 1.5 Galería tipo slider de fotos del local y platos
- 1.6 Testimonios rotativos de clientes
- 1.7 Formulario de reserva rápido con campos nombre, email, fecha y número de comensales
- 1.8 Pie de página con enlaces de navegación, redes sociales y datos de contacto
ABOUT US
- 2.1 Cabecera reutilizada
- 2.2 Hero interno con imagen de ambiente y título "Nuestra historia"
- 2.3 Texto descriptivo ampliado con fotos intercaladas
- 2.4 Equipo: tarjetas con foto, nombre y breve biografía
- 2.5 Valores del restaurante en iconos
- 2.6 CTA a reservas
- 2.7 Footer idéntico al home
MENU
- 3.1 Cabecera reutilizada
- 3.2 Hero interno con título "Nuestro menú"
- 3.3 Sección de categorías (Entrantes, Principales, Postres, Bebidas) vía tabs
- 3.4 Lista de platos por categoría: foto, nombre, descripción y botón "Añadir" al carrito
- 3.5 Highlights de platos recomendados
- 3.6 Footer
CONTACT
- 4.1 Cabecera reutilizada
- 4.2 Hero interno con título "Contacto"
- 4.3 Formulario de contacto: nombre, email, asunto, mensaje
- 4.4 Mapa incrustado y datos de ubicación
- 4.5 Información de horarios y teléfono
- 4.6 Footer
PROMPTS RELACIONADOS · RESTAURANTE Y COMIDA
