AUTOMOCIÓN · Tailwind CSS · Vanilla JavaScript · Claude Design

LogiFlux – Soluciones logísticas con diseño web Tailwind

★★★★★4,6 4.470 descargas

Tema web completo para LogiFlux, empresa de soluciones logísticas, con diseño responsivo, hero slider, mega‑menu y testimonios. Optimizado para SEO y construido con Tailwind CSS y JavaScript puro.

↓ 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 LogiFlux (logiflux.com), empresa de soluciones logísticas, usando únicamente HTML, Tailwind CSS vía CDN y JavaScript vanilla en un solo archivo. La página debe incluir:
- Paleta de colores: #0D1B2A (azul marino), #1B263B (gris azul), #415A77 (gris medio), #778DA9 (gris claro), #E0E1DD (almost white).
- Tipografía: 'Inter' para títulos y cuerpos, cargada desde Google Fonts.
- Header: barra de navegación fija con logo blanco, enlaces Home, Servicios, Proyectos, Blog, Contacto y un mega‑menu bajo "Servicios" que despliegue dos columnas de enlaces. Iconos de redes sociales (facebook, twitter, instagram, youtube) a la derecha y botón de carrito (solo visual).
- Hero: slider automático con tres diapositivas, cada una con fondo degradado azul oscuro, título grande (Inter 4xl, blanco), subtítulo (Inter lg, gris claro) y botón CTA primario (bg #415A77, hover #778DA9).
- Sección Servicios: grid 3 columnas, tarjetas con icono SVG, título y breve descripción, fondo #1B263B, hover sombra.
- Sección Proyectos: grid responsive 4 columnas en escritorio, 2 en tablet, 1 en móvil, imágenes de proyecto con overlay de título al pasar el cursor.
- Testimonios: carrusel simple (JS) con foto circular, nombre, cargo y texto, fondo #0D1B2A.
- CTA final: bloque con fondo #415A77, texto invitando a solicitar presupuesto y formulario de email + botón.
- Footer: fondo #1B263B, columnas con Información de contacto, Enlaces rápidos, Suscripción al newsletter (campo email) y iconos sociales.
- Interactividad: scroll‑spy para resaltar enlaces del menú, animaciones suaves de aparición (tailwind animate-fade‑in), carrusel y slider con setInterval.
- Todos los textos deben ser originales en español de España, sin copiar del sitio original. Usa clases utilitarias de Tailwind para espaciamientos, tipografía y colores. No incluir ningún recurso externo que no sea la CDN de Tailwind y Google Fonts.
- El archivo debe ser auto‑contenible, sin dependencias externas ni referencias a la URL original.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Hero slider con título, subtítulo y botón CTA
1.2 Navegación principal con logo, mega‑menu y enlaces a páginas internas
1.3 Área de servicios con tarjetas ilustrativas
1.4 Sección de proyectos destacados en grid
1.5 Testimonios rotativos con foto y texto
1.6 Llamada a la acción final con formulario breve
1.7 Footer con información de contacto, enlaces útiles y redes sociales

ABOUT US

2.1 Cabecera interna con imagen de fondo
2.2 Texto descriptivo de la empresa y misión
2.3 Valores en columnas con iconos
2.4 Equipo con foto y breve bio
2.5 Footer común

SERVICES

3.1 Lista de servicios con iconos y descripción
3.2 Beneficios en bloques resaltados
3.3 CTA de solicitud de presupuesto
3.4 Footer común

PROJECTS

4.1 Galería tipo masonry de proyectos
4.2 Filtro por categoría
4.3 Modal de detalle de proyecto
4.4 Footer común

BLOG

5.1 Lista de entradas con imagen, título y extracto
5.2 Barra lateral con categorías y últimos posts
5.3 Paginación
5.4 Footer común

CONTACT

6.1 Formulario de contacto con campos básicos
6.2 Mapa incrustado
6.3 Datos de contacto y horarios
6.4 Footer común

PROMPTS RELACIONADOS · AUTOMOCIÓN

Otros prompts de la misma categoría

Ficha de marca

Nombre: LogiFlux
Sector: Soluciones integrales de logística y transporte
Claim: Conectamos tu carga con el camino más eficiente

Bloques de la home

1.1 Hero slider con título, subtítulo y botón CTA
1.2 Navegación principal con logo, mega‑menu y enlaces a páginas internas
1.3 Área de servicios con tarjetas ilustrativas
1.4 Sección de proyectos destacados en grid
1.5 Testimonios rotativos con foto y texto
1.6 Llamada a la acción final con formulario breve
1.7 Footer con información de contacto, enlaces útiles 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