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

AgroVerde: web agrícola y ganadera con tecnología verde

★★★★★4,6 3.824 descargas

Theme web para AgroVerde, marca de soluciones integrales para agricultura y ganadería. Incluye home con hero, ventajas, galería de productos, testimonios y formulario, más páginas internas (About, Services, Products, Blog, Contact) en un único archivo HTML con Tailwind CDN.

↓ 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 usando HTML, Tailwind CSS (CDN) y JavaScript vanilla en un único archivo. La marca se llama AgroVerde (agroverde.com) y el claim es "Tecnología al servicio del campo". Reproduce fielmente la estructura UI del sitio de referencia, sin copiar texto literal.

**Paleta de colores**
- Verde principal: #2E7D32
- Verde claro: #81C784
- Gris oscuro: #212121
- Gris medio: #757575
- Blanco: #FFFFFF

**Tipografía**
- Fuente principal: 'Inter', sans‑serif (carga desde Google Fonts). Usa peso 400 para cuerpo y 600 para títulos.

**Header / Navbar**
- Barra blanca con logo a la izquierda (svg de hoja), menú centrado con enlaces: Home, About, Services, Products, Blog, Contact. Cada enlace tiene efecto hover que cambia el texto a verde y muestra una versión secundaria superpuesta (doble capa). Incluye dropdown multi‑nivel bajo "Pages" con tres columnas de enlaces (Menu, Inner Page, Utility) tal como el original. A la derecha, botón de carrito con icono de bolsa y contador redondo.

**Hero**
- Sección a pantalla completa, fondo degradado verde → blanco. Título grande (h1) en gris oscuro, subtítulo en gris medio, botón CTA verde con texto blanco "Descubrir productos".

**Bloque de ventajas**
- Tres columnas, cada una con icono circular (svg simple), título en verde y texto descriptivo en gris medio.

**Galería de productos**
- Grid responsive 3‑col (1‑col en móvil). Cada tarjeta muestra imagen, nombre del producto, precio ($0.00) y botón "Añadir al carrito" verde.

**Testimonios**
- Carrusel horizontal con tres tarjetas, fondo gris claro, texto del testimonio en gris oscuro, nombre del cliente en negrita.

**Llamado a acción de contacto**
- Sección con fondo verde suave, título centrado, breve texto y botón "Solicitar información".

**Footer**
- Fondo gris oscuro, columnas: Sobre nosotros (enlaces), Servicios, Legal, Redes sociales (iconos). Incluye datos de contacto (email, teléfono) y copyright.

**Páginas adicionales**
- About, Services, Products, Blog, Contact con la misma cabecera y footer. Cada una contiene hero interno, contenido específico (texto, grid, formulario) siguiendo la estructura descrita en la tabla.

**Interactividad**
- Menú dropdown con apertura en hover y cierre al mover el ratón fuera.
- Carrito lateral que se abre al hacer click en el icono, muestra lista de productos añadidos (uso de localStorage para simular). Botón "Remove" elimina items.
- Carrusel de testimonios mediante simple JavaScript (setInterval o botones de navegación).
- Formulario de contacto con validación básica (campos requeridos) y alerta de envío.

**Requisitos técnicos**
- Usa Tailwind CDN (`https://cdn.tailwindcss.com`). Configura colores personalizados en `tailwind.config` vía `tailwind.config = {theme:{extend:{colors:{primary:'#2E7D32',light:'#81C784',dark:'#212121',mid:'#757575'}}}}`.
- Incluye Google Fonts link para Inter.
- Todo el código debe estar dentro de un único archivo `index.html` (u otro nombre por página) que pueda copiarse y abrirse sin dependencias externas más allá de los CDN.
- No incluir contenido copiado del original; redacta textos originales en español de España.
- Asegura responsividad: colapsa el menú en hamburguesa en pantallas <768px, grid de productos se adapta a 1‑2‑3 columnas.
- Añade comentarios HTML claros que indiquen cada bloque (/* Navbar */, /* Hero */, etc.).

---

## 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>
```

3.701 caracteres · 66 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Navbar con logo, menú principal, dropdown multi‑nivel y carrito
1.2 Hero con título, subtítulo y botón CTA
1.3 Bloque de ventajas (3 columnas, icono + texto)
1.4 Galería de productos destacados (grid 3‑col)
1.5 Testimonios (carrusel horizontal)
1.6 Llamado a la acción de contacto (formulario corto)
1.7 Footer con enlaces institucionales, contacto y redes

ABOUT

1.1 Navbar común
1.2 Hero interno con título y foto de portada
1.3 Texto descriptivo de la empresa y valores
1.4 Equipo (grid de tarjetas con foto y cargo)
1.5 CTA a ver productos
1.6 Footer común

SERVICES

1.1 Navbar común
1.2 Hero interno
1.3 Lista de servicios en tarjetas con icono y descripción
1.4 Caso de estudio destacado
1.5 CTA a solicitar presupuesto
1.6 Footer común

PRODUCTS

1.1 Navbar común
1.2 Hero interno
1.3 Filtro y barra de búsqueda
1.4 Grid de productos (imagen, nombre, precio, botón "Añadir")
1.5 Paginación
1.6 Footer común

BLOG

1.1 Navbar común
1.2 Hero interno
1.3 Lista de artículos en tarjetas (imagen, título, extracto, fecha)
1.4 Sidebar con categorías y últimos posts
1.5 Footer común

CONTACT

1.1 Navbar común
1.2 Hero interno
1.3 Formulario de contacto (nombre, email, mensaje, enviar)
1.4 Mapa embebido
1.5 Footer común

PROMPTS RELACIONADOS · RESTAURANTE Y COMIDA

Otros prompts de la misma categoría

Ficha de marca

Nombre: AgroVerde
Sector: Soluciones integrales para agricultura y ganadería
Claim: Tecnología al servicio del campo

Bloques de la home

1.1 Navbar con logo, menú principal, dropdown multi‑nivel y botón de carrito; 1.2 Hero con título grande, subtítulo y llamado a acción; 1.3 Bloque de ventajas en columnas con iconos; 1.4 Galería de productos destacados; 1.5 Sección de testimonios con carrusel; 1.6 Llamado a contactar / formulario breve; 1.7 Footer con enlaces, datos de contacto y redes sociales.

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