AUTOMOCIÓN · Claude Design · Tailwind · HTML5

LogiMira – Tema corporativo de logística integral

★★★★★4,7 1.106 descargas

Tema web para LogiMira, empresa de transporte y logística integral, con diseño responsive y animaciones suaves. Incluye navbar sticky, hero con CTA, línea temporal, cuadrícula de servicios y formulario de presupuesto. Todo construido con Tailwind CSS y JavaScript vanilla.

↓ 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 bajo el nombre ficticio **LogiMira** (logimira.com). La web es corporativa del sector logística y debe reproducir el diseño visual y la estructura del ejemplo proporcionado, sin copiar textos ni imágenes originales. Utiliza **HTML5**, **Tailwind CSS CDN** y **JavaScript vanilla** en un único archivo.

**Paleta de colores**
- Primario: #0D3B66 (azul oscuro)
- Secundario: #FAF0CA (crema claro)
- Acento 1: #F4D35E (amarillo dorado)
- Acero: #FFFFFF (blanco) y #F1F1F1 (gris muy claro)

**Tipografía**
- Fuente principal: `Inter`, peso 400/600, tamaños entre 14px y 48px.
- Fuente secundaria (títulos): `Montserrat`, peso 700.

**Header**
- Navbar sticky, fondo blanco con sombra ligera.
- Logo a la izquierda (placeholder SVG).
- Menú horizontal: Home, About, Services, Pricing, Blog, Contact.
- Botón de teléfono con ícono a la derecha, visible solo en desktop.
- botón hamburguesa para móvil que despliega el menú.

**Secciones de la Home**
1. **Hero** – fondo gris claro, título grande “LogiMira – Soluciones Logísticas”, párrafo descriptivo, botón CTA “Solicita tu presupuesto”, imagen decorativa a la derecha (placeholder). Animaciones de fade‑in al cargar.
2. **Nuestra trayectoria** – título “Nuestro camino al éxito”, párrafo breve, botón “Descubre más”.
3. **Línea temporal** – dos fichas con años 2010 y 2012, cada una con título y pequeño texto.
4. **Servicios** – cuadrícula 4‑columnas (responsive a 2 en tablet, 1 en móvil). Cada ítem muestra número en gran formato, título, breve descripción y una imagen de servicio (placeholder). Los números usan color de acento alternado.
5. **Solicitud de presupuesto** – fondo primario, título “Solicita tu cotización gratuita”, párrafo corto, formulario inline con campos: nombre, email, teléfono, mensaje y botón “Enviar”.

**Footer**
- Fondo primario, texto blanco.
- Columnas: Información de contacto, Enlaces rápidos, Suscripción (campo email + botón), redes sociales (iconos SVG). 
- Copyright “© 2026 LogiMira. Todos los derechos reservados.”

**Interactividad**
- Menú hamburguesa toggles mediante JS.
- Animaciones de scroll (fade‑in) usando `IntersectionObserver`.
- Validación básica del formulario (campos obligatorios).
- Enlaces de navegación suavizados.

**Requisitos técnicos**
- Usa la CDN de Tailwind 3 (`https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css`).
- Incluir la fuente Inter y Montserrat desde Google Fonts.
- Todas las rutas de imágenes deben ser placeholders (`https://via.placeholder.com/400`).
- No incluir ningún texto copiado del original; redacta contenido original en español de España.
- Mantén la estructura de clases semánticas para que Claude Design pueda identificar bloques (ej. `hero-section`, `service-item`, `timeline-item`).
- El archivo HTML debe ser autocontenido y listo para ser renderizado en cualquier 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>
```

3.203 caracteres · 61 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, menú principal y botón de teléfono
1.2 Hero con título, descripción, imagen decorativa y botón de acción
1.3 Bloque “Nuestra trayectoria” con título, párrafo y enlace a Más información
1.4 Línea temporal de hitos con años y descripciones
1.5 Sección de servicios en cuadrícula de 4 ítems, cada uno con número, título, descripción e imagen
1.6 Formulario de solicitud de presupuesto con título, texto explicativo y campos básicos

ABOUT

2.1 Banner interno con título “Sobre nosotros”
2.2 Texto descriptivo largo y galería de imágenes
2.3 Equipo de trabajo en tarjetas con foto, nombre y cargo

SERVICES

3.1 Lista de servicios detallada con iconos y texto descriptivo
3.2 CTA para contactar al equipo de ventas

PRICING

4.1 Tabla comparativa de planes con características y botón de selección

CONTACT

5.1 Formulario de contacto completo (nombre, email, teléfono, mensaje)
5.2 Mapa incrustado y datos de ubicación

BLOG

6.1 Lista de artículos con imagen, título, extracto y fecha
6.2 Paginación al final de la lista

FAQ

7.1 Preguntas frecuentes en acordeón

PROMPTS RELACIONADOS · AUTOMOCIÓN

Otros prompts de la misma categoría

Ficha de marca

Nombre: LogiMira
Sector: Servicios de transporte y logística integral
Claim: Conectamos tu carga con precisión y confianza

Bloques de la home

1.1 Barra de navegación fija con logo, menú principal y botón de teléfono
1.2 Hero con título, descripción, imagen decorativa y botón de acción
1.3 Bloque “Nuestra trayectoria” con título, párrafo y enlace a Más información
1.4 Línea temporal de hitos con años y descripciones
1.5 Sección de servicios en cuadrícula de 4 ítems, cada uno con número, título, descripción e imagen
1.6 Formulario de solicitud de presupuesto con título, texto explicativo y campos básicos

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