NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web ficticio llamado "Mesa Vega" (dominio mesavega.com) para una cooperativa agrícola que vende sus productos en línea. El proyecto debe estar contenido en un único archivo HTML que utilice Tailwind CSS a través del CDN y JavaScript vanilla (sin frameworks). Utiliza la siguiente paleta de colores: #2C5F2D (verde bosque), #A7C957 (verde claro), #F4F4F4 (gris muy claro), #FFFFFF (blanco), #333333 (texto oscuro). Tipografía: "Inter" para títulos y "Open Sans" para cuerpo, ambas cargadas desde Google Fonts.
Estructura del sitio:
- **Header (navbar)**: barra fija con logo a la izquierda, menú de enlaces (Home, About, Service, Case Study, Shop, Blog), botón de carrito con contador, botón "Contact Us" estilo contorno. En móviles colapsa en un menú hamburguesa.
- **Home**:
1. **He
3.950 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.950 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ú principal, botón de carrito y enlace de contacto
- 1.2 Hero con fondo a pantalla completa, título grande, subtítulo y botón principal
- 1.3 Bloque de presentación de servicios en tres columnas con íconos y texto breve
- 1.4 Sección de ventajas con contador animado y descripción
- 1.5 Galería de productos destacados en grid de cuatro columnas
- 1.6 Testimonios rotativos en carrusel sencillo
- 1.7 Footer con columnas de enlaces, datos de contacto, redes sociales y suscripción al boletín
ABOUT
- 1.1 Cabecera interna con título de página y migas de pan
- 1.2 Texto descriptivo de la empresa y misión
- 1.3 Imagen de apoyo grande alineada a la derecha
- 1.4 Valores de la cooperativa en tarjetas de tres columnas
- 1.5 Equipo con fotos y breves biografías en grid
- 1.6 Footer replicado del home
SERVICE
- 1.1 Cabecera interna con título "Servicios"
- 1.2 Lista de servicios en tarjetas con ícono, título y descripción breve
- 1.3 Sección de proceso operativo en pasos numerados
- 1.4 CTA para solicitar información
- 1.5 Footer replicado del home
CASE-STUDY
- 1.1 Cabecera interna con título "Casos de éxito"
- 1.2 Grid de tarjetas de caso con imagen, título y breve resumen
- 1.3 Detalle expandible de cada caso (accordion)
- 1.4 CTA para contactar
- 1.5 Footer replicado del home
SHOP
- 1.1 Cabecera interna con título "Tienda"
- 1.2 Filtros laterales (categorías, rango de precios)
- 1.3 Grid de productos (imagen, nombre, precio, botón "Añadir al carrito")
- 1.4 Paginación inferior
- 1.5 Footer replicado del home
BLOG
- 1.1 Cabecera interna con título "Blog"
- 1.2 Lista de artículos en formato tarjeta (imagen, título, extracto, fecha)
- 1.3 Sidebar con categorías y últimos artículos
- 1.4 Footer replicado del home
CONTACT-US
- 1.1 Cabecera interna con título "Contacta"
- 1.2 Formulario de contacto (nombre, email, mensaje, botón enviar)
- 1.3 Mapa embebido de ubicación
- 1.4 Información de contacto rápida en columnas
- 1.5 Footer replicado del home
PROMPTS RELACIONADOS · RESTAURANT AND FOOD
