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

LogiFlex Solutions – Plataforma web corporativa de logística y transporte

★★★★★4,8 4.026 descargas

Theme estático para LogiFlex Solutions, empresa de logística, con diseño responsive y animaciones CSS. Incluye navegación fija, hero impactante, secciones de confianza, sobre nosotros y soluciones freight con tabs interactivos. Optimizado para SEO y accesibilidad.

↓ 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 empresa ficticia llamada LogiFlex Solutions (logiflex.com) usando únicamente un archivo HTML que incluya Tailwind CSS vía CDN y JavaScript vanilla (sin frameworks). Reproduce la estructura y estilo del sitio original, respetando estos requisitos:
- Paleta de colores: #001E62 (navy profundo), #FFFFFF (blanco), #FF4D4D (rojo acento), #F5F5F5 (gris claro), #0A0A0A (texto oscuro).
- Tipografía: "Inter" para cuerpos y "Playfair Display" para encabezados, cargadas desde Google Fonts.
- Header: barra fija con logo (svg placeholder), links "Inicio", "Sobre nosotros", "Servicios", "Contacto", "Blog" y botón principal "Comenzar" con estilo de botón relleno navy y hover rojo.
- Hero: sección a pantalla completa con tres líneas de título grande (h1) alineado a la izquierda, texto descriptivo y dos botones CTA ("Solicitar presupuesto" relleno navy + flecha, "Más información" contorno blanco). Fondo navy con degradado sutil.
- Bloque de confianza: fila de tres imágenes circulares de clientes (placeholders) y texto "Más de 50 000 clientes satisfechos" centrado.
- Sección "Sobre nosotros": título grande, subtítulo con énfasis, dos columnas – izquierda visión/misión numeradas (01 Visión, 02 Misión) con texto gris, derecha imagen de camión.
- Sección "Soluciones de Freight": título central, tabs horizontales (Aéreo, Marítimo, Ferroviario, Terrestre). Cada tab muestra imagen (placeholder) y texto explicativo, botón CTA idéntico al del hero.
- Footer: fondo gris claro, columnas con enlaces institucionales, redes sociales (iconos SVG) y datos de contacto (email, teléfono, dirección). Texto en negro.
- Interactividad: tabs cambiantes mediante JavaScript, botón de menú responsive (hamburguesa) que colapsa la navegación en pantalla móvil.
- Animaciones: fade‑in con transición CSS al cargar secciones (utilizar @keyframes y clase .animate-fade).
- Código limpio, semántico, accesible (aria‑labels, alt en imágenes). No incluir contenido real; generar textos originales en español de España.
Entregarlo como un único archivo index.html listo para abrir en el navegador.

---

## 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.450 caracteres · 30 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, enlaces y botón principal
1.2 Hero con título fragmentado en tres líneas, texto descriptivo y dos botones CTA
1.3 Área de confianza con fotos de clientes y cifra de 50K+ clientes
1.4 Bloque "Sobre nosotros" con título, subtítulo, visión y misión en dos columnas y foto de camión
1.5 Sección de soluciones freight con tabs (Aéreo, Marítimo, Ferroviario, Terrestre) y contenido ilustrado
1.6 Pie de página con enlaces institucionales, redes y datos de contacto

ABOUT

2.1 Encabezado de página con título y breadcrumb
2.2 Texto institucional y valores de la empresa
2.3 Equipo con foto y breve descripción
2.4 CTA a contacto

SERVICES

3.1 Lista de servicios con iconos y descripciones breves
3.2 Tabla comparativa de modalidades de freight
3.3 Botón de solicitud de presupuesto

CONTACT

4.1 Formulario de contacto (nombre, email, mensaje)
4.2 Mapa incrustado y datos de ubicación
4.3 Información de teléfono y email

BLOG

5.1 Lista de artículos con imagen, título y extracto
5.2 Paginación y barra lateral de categorías

PROMPTS RELACIONADOS · AUTOMOCIÓN

Otros prompts de la misma categoría

Ficha de marca

Nombre: LogiFlex Solutions
Sector: Servicios integrales de logística y transporte
Claim: Conectamos tu carga con el mundo

Bloques de la home

1.1 Barra de navegación fija con logo, enlaces y botón principal
1.2 Hero con título fragmentado en tres líneas, texto descriptivo y dos botones CTA
1.3 Área de confianza con fotos de clientes y cifra de 50K+ clientes
1.4 Bloque "Sobre nosotros" con título, subtítulo, visión y misión en dos columnas y foto de camión
1.5 Sección de soluciones freight con tabs (Aéreo, Marítimo, Ferroviario, Terrestre) y contenido ilustrado
1.6 Pie de página con enlaces institucionales, redes y datos de contacto

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

LogiFlex Solutions – Plataforma web corporativa de logística y transporte

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

SERVICES

CONTACT

BLOG

Otros prompts de la misma categoría

LavaLux Spa

LogiFlux

LogiMira

LogiMova