RESTAURANTE Y COMIDA · Claude Design · Tailwind CSS · Vanilla JS

Ágora Verde — Web gourmet de temporada elegante

★★★★★4,8 3.937 descargas

Theme de una sola página para restaurantes de alta cocina estacional. Incluye navbar fija, hero a pantalla completa, secciones de menú, sobre nosotros, catering y footer con mapa, todo con una paleta cálida y tipografía elegante Playfair Display e Inter.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web estático de una sola página usando HTML, Tailwind CSS CDN y JavaScript vanilla (un único archivo). La marca es Ágora Verde, un restaurante gourmet de temporada. Utiliza la siguiente paleta de colores: #2C1E13 (marrón oscuro), #8C5E3C (marrón medio), #D9B99B (beige claro), #F5F1EA (casi blanco), #A72828 (rojo vino). Tipografía: encabezados con "Playfair Display" (serif elegante) y cuerpo con "Inter" (sans‑serif). 

Estructura requerida:

1. **Navbar fija** con fondo semitransparente, logo (texto Ágora Verde) a la izquierda, enlaces horizontales (Inicio, Sobre, Menú, Catering, Contacto) y bloque a la derecha con horario y datos de contacto (teléfono, email). En móvil, colapsar en icono de hamburguesa que despliega el menú.

2. **Sección Hero** a pantalla completa con imagen de fondo difuminada (representar con URL placeholder), título grande "Sabores de temporada, experiencias memorables" y subtítulo descriptivo. Botones: "Reservar mesa" (estilo secundario) y "Ver menú" (estilo terciario). Texto centrado y con overlay oscuro para legibilidad.

3. **Sobre nosotros**: layout de dos columnas (texto a la izquierda, imagen del chef a la derecha). Texto original que hable de tradición e innovación. Añadir segunda fila con dos imágenes pequeñas en collage.

4. **Menú**: sección con fondo oscuro (#2C1E13) y título "Explora nuestro menú estacional". Mostrar una cuadrícula de 4 tarjetas, cada una con imagen de categoría, título (Entrantes, Platos principales, Postres, Bebidas) y breve descripción. Cada tarjeta enlaza a "#".

5. **Catering**: bloque de ancho completo con fondo claro (#F5F1EA), título "Catering estacional para cada celebración" y párrafo explicativo. A la izquierda texto, a la derecha collage de 3 imágenes pequeñas solapadas.

6. **Footer**: fondo #2C1E13, columnas con: (a) Logo y claim, (b) Enlaces de navegación, (c) Información de contacto (dirección, teléfono, email) y (d) mapa incrustado (usar iframe con src placeholder). Añadir íconos de redes sociales simples.

Requisitos técnicos:
- Todas las transiciones de scroll y hover deben usar clases de Tailwind (e.g., transition, duration-300, ease-in-out).
- El menú hamburguesa debe abrir/cerrar con JavaScript vanilla manipulando clases.
- Imágenes deben usar atributos `loading="lazy"` y `srcset` genéricos.
- Asegúrate de que el sitio sea responsive: columnas se apilan en dispositivos ≤768px.
- Incluye meta tags básicos (charset, viewport, title, description).
- No insertar contenido real del sitio original; inventa todo el texto siguiendo el tono descrito.

Devuelve el código completo listo para insertar en un archivo `index.html`.

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```

2.991 caracteres · 42 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación fija con logo y enlaces
1.2 Hero con imagen, título y botones
1.3 Sobre nosotros (texto + imágenes)
1.4 Menú (cuadrícula de categorías)
1.5 Catering (texto y collage)
1.6 Footer con datos de contacto, redes y mapa

MENÚ

2.1 Cabecera de página con título y subtítulo
2.2 Grid de platos por categoría con foto, nombre y descripción breve
2.3 Botón de reserva rápida al final de la sección

SOBRE NOSOTROS

3.1 Imagen destacada del chef
3.2 Texto histórico y filosófico
3.3 Galería de fotos de la cocina y proceso creativo

CATERING

4.1 Texto descriptivo de servicios de catering
4.2 Collage de imágenes de eventos
4.3 Llamada a la acción para reserva

CONTACTO

5.1 Formulario de contacto (nombre, email, mensaje)
5.2 Mapa interactivo de ubicación
5.3 Información de horario y teléfono

PROMPTS RELACIONADOS · RESTAURANTE Y COMIDA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Ágora Verde
Sector: Restaurante de alta cocina con enfoque estacional
Claim: Sabores de temporada, experiencias memorables

Bloques de la home

1.1 Barra de navegación fija con logo, enlaces y bloque de información de horario y contacto
1.2 Hero con imagen de fondo a pantalla completa, título grande y botones de reserva y menú
1.3 Sección "Sobre nosotros" con texto descriptivo y galería de imágenes del chef y la cocina
1.4 Sección de menú con cuadrícula de categorías (Entrantes, Platos principales, Postres, Bebidas) con imágenes y descripciones
1.5 Bloque promocional de catering con texto y collage de fotos
1.6 Formulario de contacto y mapa incrustado en el footer con datos de la sede

Crea tu propia Skill

Genera una Skill personalizada para Claude AI en minutos. Sin código.

Empezar ahora ↗

← Volver al catálogo ↗ Crea tu Skill personalizada

Ágora Verde — Web gourmet de temporada elegante

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

MENÚ

SOBRE NOSOTROS

CATERING

CONTACTO

Otros prompts de la misma categoría

Kiku Sabor

Línea Áurea

AgriPulse

AgroVerde