RESTAURANTE Y COMIDA · Claude Design · Tailwind · HTML5

AgriPulse: web agritech con IoT y métricas para el campo

★★★★★4,9 664 descargas

Theme para Claude AI que genera la web de AgriPulse, una marca agritech centrada en IoT y datos agrícolas. Incluye hero con vídeo, sección de impacto tecnológico con métricas, dropdowns animados y diseño responsive en un solo archivo HTML con Tailwind.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web completa para la marca ficticia **AgriPulse** (agritech), usando **un solo archivo HTML** que incluya Tailwind CSS vía CDN y JS vanilla en línea. La web debe reproducir fielmente la estructura y estilo de la plantilla analizada, sin copiar textos originales.

**Alcance**:
- Navbar blanco fijo con logo a la izquierda, menú horizontal con enlaces: Home, About Us, Service, Pricing, Blog y dos dropdowns "Page" con enlaces a versiones de home. Botón CTA "Contact Us" a la derecha. Menú colapsable en móvil con icono de hamburguesa y botón CTA interno.
- Preloader que muestra el logo AgriPulse con overlay mientras carga la página.
- Hero de pantalla completa con video de fondo (usar video de placeholder en URL pública), overlay oscuro, título grande, descripción breve y botón primary "Explore More".
- Sección "About Us": badge numeral "01" + título, párrafo descriptivo y botón secondary "Read more".
- Sección "Technology Impact": badge numeral "02", título, y grid 4 columnas con métricas (ej. "100M+" inversión, "1B+" AI analytics, "500,000+" farms, "800+" países). Cada item muestra número grande y texto bajo.
- Footer con fondo gris claro, columnas de enlaces (Company, Services, Legal), redes sociales (iconos SVG), y datos de contacto (email, teléfono).

**Paleta de colores** (extraer del diseño original):
- #ffffff (blanco base)
- #0f172a (azul marino muy oscuro para textos) 
- #10b981 (verde esmeralda para acentos y botones)
- #1f2937 (gris oscuro para fondos secundarios)
- #d1d5db (gris claro para bordes y placeholders)

**Tipografía**: Usar Inter (importar desde Google Fonts) para todo el sitio. Variante regular 400 para párrafos, medium 500 para subtítulos y bold 700 para títulos.

**Componentes interactivos**:
- Dropdowns del navbar con transición suave (height + opacity) usando CSS y JS.
- Botón de menú móvil que alterna la visibilidad del panel lateral.
- Botón de reproducción/pausa del video hero.
- Animaciones de aparición (fade‑in) para títulos y bloques al hacer scroll (IntersectionObserver).
- Hover en botones con cambio de fondo a verde más claro.

**Requisitos técnicos**:
- Incluir `<meta charset="UTF-8">`, viewport, y descripción.
- Cargar Tailwind 3.x desde CDN (`https://cdn.tailwindcss.com`). Configurar colores personalizados en `tailwind.config` inline mediante `tailwind.config = {theme:{extend:{colors:{primary:'#10b981',dark:'#0f172a',light:'#d1d5db'}}}}`.
- Incluir Google Font Inter (`<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">`).
- Todo el CSS adicional como clases Tailwind en los elementos; usar `@layer components` dentro de `<style>` para estilos complejos (preloader, overlay, video controls).
- Añadir script al final del body que gestione dropdowns, menú móvil, video play/pause y scroll animations.
- Mantener la estructura semántica: `<header>`, `<nav>`, `<section>`, `<footer>`.
- No incluir ningún texto del sitio original; generar contenido original en español de España siguiendo el tono descriptivo de la marca.

**Salida**: Un único archivo HTML listo para abrir en el navegador que reproduzca el diseño descrito, respetando la paleta y tipografía, con interactividad completa.

---

## 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.576 caracteres · 53 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Navbar fijo con logo, menú principal, dropdowns y botón de contacto
1.2 Preloader con logo animado
1.3 Hero con video de fondo, título, descripción y botón CTA
1.4 Sección "About Us" con badge, título, texto y botón "Read more"
1.5 Sección "Technology Impact" con badge, título y grid de métricas
1.6 Footer con información de contacto y enlaces sociales

ABOUT US

1.1 Header interno con breadcrumb y CTA de contacto
1.2 Texto ampliado de la misión y visión
1.3 Galería de imágenes de campo y equipos
1.4 Botón de descarga de presentación

SERVICE

1.1 Lista de servicios con iconos y descripciones breves
1.2 Slider de casos de éxito
1.3 CTA para solicitar demo

PRICING

1.1 Tabla comparativa de planes con iconos de check
1.2 FAQ acordeón
1.3 Botón de registro

BLOG

1.1 Grid de tarjetas de artículos con imágenes, títulos y fechas
1.2 Barra lateral con categorías y suscripción al newsletter
1.3 Paginación

CONTACT US

1.1 Formulario de contacto con campos nombre, email, mensaje
1.2 Mapa incrustado
1.3 Información de dirección y teléfono

PROMPTS RELACIONADOS · RESTAURANTE Y COMIDA

Otros prompts de la misma categoría

Ficha de marca

Nombre: AgriPulse
Sector: Tecnología agraria y soluciones IoT para la industria agrícola
Claim: Innovación inteligente para tierras más productivas

Bloques de la home

1.1 Navbar fijo con logo, menú principal, dropdowns y botón de contacto
1.2 Preloader con logo animado
1.3 Hero con video de fondo, título, descripción y botón CTA
1.4 Sección "About Us" con número de badge, título, texto descriptivo y botón secundario
1.5 Sección "Technology Impact" con badge, título y grid de 4 items de métricas
1.6 Footer (no incluido en el fragmento, pero se asume con enlaces de contacto y redes)

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