CORPORATIVO · Claude Design · HTML

CargoVeloz Logística — Prompt de diseño web para Claude AI

★★★★★4,8 3.684 descargas

Empresa de transporte marítimo y logística internacional de mercancías Mueve tu carga por mar, tierra y aire con seguimiento en tiempo real.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una web corporativa completa de una sola página en HTML autocontenido para la empresa ficticia **CargoVeloz Logística**, dedicada al transporte marítimo, terrestre y aéreo de mercancías a escala internacional. Claim: "Mueve tu carga por mar, tierra y aire con seguimiento en tiempo real". Dominio: cargoveloz.com. Email: hola@cargoveloz.com. Año: 2025.

## Stack técnico
- Un único archivo HTML.
- Tailwind CSS vía CDN (https://cdn.tailwindcss.com).
- JavaScript vanilla embebido para interacciones (slider hero, contadores animados, carrusel testimonios, carrusel partners, formularios).
- Iconos vía Font Awesome CDN o SVG inline.
- Imágenes desde Unsplash (puertos, contenedores, camiones, aviones de carga, almacenes) usando URLs de unsplash.com/photos directas o source.unsplash.com.
- Tipografía Google Fonts: **Lexend** (pesos 300, 400, 500, 600, 700, 800).

## Paleta de color
- Azul marino primario: #0A2540
- Azul medio: #1E3A8A
- Amarillo acento: #FFB800
- Gris fondo: #F5F7FA
- Gris texto: #6B7280
- Blanco: #FFFFFF
- Negro suave: #111827

## Estructura de la home (en orden)

### 1.1 Header sticky
- Fondo blanco, sombra sutil al hacer scroll.
- Logo a la izquierda: icono de barco/contenedor + texto "CargoVeloz" en Lexend 700.
- Navegación centrada: Inicio, Servicios, Sobre nosotros, Seguimiento, Blog, Contacto.
- A la derecha: número de teléfono ficticio +34 900 123 456 con icono y botón amarillo "Solicitar cotización".
- En mobile: menú hamburguesa.

### 1.2 Hero slider
- Altura 90vh, imagen de fondo de un puerto con grúas y contenedores apilados, overlay oscuro azul a la izquierda con degradado.
- A la izquierda contenido: pequeño tag amarillo "Logística global desde 2008", titular grande blanco en 2 líneas ("Tu carga, en movimiento sin fricción"), párrafo descriptivo, dos botones: amarillo "Conoce servicios" y outline blanco "Ver seguimiento".
- Flechas de slider laterales y dots en la parte inferior. 3 slides distintas (puerto, camión carretera, avión carga).

### 1.3 Barra de seguimiento
- Tarjeta superpuesta al hero, posicionada centrada bajando un -80px, fondo blanco con sombra fuerte.
- Título pequeño "Localiza tu envío".
- Formulario horizontal con campo grande "Introduce código de seguimiento (ej. CV-2025-784512)" + selector de tipo (Marítimo/Terrestre/Aéreo) + botón amarillo "Rastrear ahora".

### 1.4 Sobre nosotros con contadores
- Dos columnas. Izquierda: imagen de almacén con trabajadores y montacargas, con detalle de imagen pequeña superpuesta en esquina.
- Derecha: tag amarillo "Sobre CargoVeloz", titular "Diecisiete años conectando puertos y mercados", párrafos describiendo la empresa, lista con iconos check de 3 puntos clave (flota propia, cobertura 90 países, atención 24/7).
- Debajo, fila de 4 contadores animados (con odómetro JS al entrar en viewport): 12.500+ envíos al mes, 90 países cubiertos, 340 vehículos en flota, 17 años de trayectoria.

### 1.5 Grid de servicios
- Fondo gris claro #F5F7FA.
- Tag centrado "Lo que hacemos" + titular "Servicios de logística integral".
- Grid de 4 tarjetas (2x2 en tablet, 4 en desktop): Transporte marítimo, Transporte terrestre, Carga aérea, Almacenaje y distribución.
- Cada tarjeta: icono grande en círculo azul marino, título, descripción de 2 líneas, enlace "Más información →" en amarillo. Hover: la tarjeta se eleva y el icono cambia a fondo amarillo.

### 1.6 Proceso de trabajo
- Fondo blanco. Tag "Cómo trabajamos" + titular "Cuatro pasos para mover tu carga".
- 4 pasos horizontales conectados por línea punteada: 01 Cotización, 02 Recogida, 03 Tránsito monitorizado, 04 Entrega y confirmación.
- Cada paso: número grande en color amarillo translúcido detrás de un icono circular azul, título y descripción corta.

### 1.7 Banner CTA con formulario
- Fondo azul marino oscuro #0A2540 con patrón de líneas sutiles y silueta de contenedores en el fondo.
- Dos columnas: izquierda con titular blanco "¿Tienes una carga que mover?", subtítulo, lista de beneficios con check amarillo.
- Derecha: tarjeta blanca con formulario de cotización rápida (Nombre, Email, Teléfono, Tipo de carga (select), Origen, Destino, botón amarillo "Pedir cotización").

### 1.8 Testimonios slider
- Fondo gris claro. Tag "Clientes que confían" + titular "Lo que dicen quienes mueven carga con nosotros".
- Slider de 3 testimonios visibles en desktop. Cada tarjeta: comillas grandes amarillas decorativas, texto del testimonio, separador, abajo foto circular + nombre + cargo + 5 estrellas amarillas. Inventa nombres y empresas ficticias (ej. Marta Encinas, Directora de Compras en TextilNorte SL).
- Flechas de navegación a los lados.

### 1.9 Últimos artículos del blog
- Tag "Actualidad" + titular "Novedades del sector logístico".
- Grid de 3 tarjetas. Cada tarjeta: imagen 16:9, fecha y categoría arriba, título grande, extracto, enlace "Leer artículo →".
- Títulos ficticios sobre logística (ej. "Cómo afecta el nuevo reglamento aduanero europeo a las pymes exportadoras").

### 1.10 Carrusel partners
- Fondo blanco, padding moderado.
- Texto pequeño centrado "Empresas que confían en nuestra red".
- Carrusel autoplay infinito de 8-10 logos en escala de grises (usar texto estilizado de marcas ficticias en SVG/CSS: TextilNorte, MarinaPort, IberCarga, AgroExport, etc.).

### 1.11 Footer
- Fondo azul marino muy oscuro #0A2540, texto blanco/gris claro.
- 4 columnas:
  - Columna 1: logo CargoVeloz, descripción breve, iconos sociales (LinkedIn, Twitter, Instagram, Facebook).
  - Columna 2: "Servicios" con enlaces.
  - Columna 3: "Contacto": dirección ficticia (Polígono Marítimo, Nave 14, 08040 Barcelona), teléfono, email hola@cargoveloz.com, horario.
  - Columna 4: "Boletín": breve texto + input email + botón amarillo "Suscribirme".
- Subfooter con separador: "© 2025 CargoVeloz Logística. Todos los derechos reservados." a la izquierda y enlaces legales (Aviso legal, Privacidad, Cookies) a la derecha.

## Requisitos técnicos
- Diseño totalmente responsive (mobile, tablet, desktop).
- Animaciones suaves en scroll (fade-up) usando IntersectionObserver.
- Contadores animados con efecto count-up al entrar en viewport.
- Slider del hero funcional con autoplay cada 6 segundos.
- Carrusel de testimonios y partners funcional.
- Hover states bien definidos en botones, tarjetas y enlaces.
- Accesibilidad básica (alt en imágenes, contraste correcto, aria-labels en botones de icono).
- Todo el texto en español de España, tono profesional pero cercano, sin lenguaje grandilocuente.
- No uses ningún nombre ni texto de marcas reales: inventa todo (nombres de personas, empresas clientes, artículos del blog).

6.621 caracteres · 93 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con navegación y CTA
1.2 Hero slider principal
1.3 Barra de seguimiento de envíos
1.4 Sobre nosotros con contadores
1.5 Grid de servicios
1.6 Proceso de trabajo 4 pasos
1.7 Banner CTA con formulario
1.8 Testimonios slider
1.9 Últimos artículos blog
1.10 Carrusel de partners
1.11 Footer

SERVICIOS

2.1 Header
2.2 Page header con breadcrumb
2.3 Grid completo de servicios con descripción
2.4 Bloque ventajas de trabajar con nosotros
2.5 CTA cotización
2.6 Footer

SOBRE NOSOTROS

3.1 Header
3.2 Page header con breadcrumb
3.3 Historia de la empresa con imagen lateral
3.4 Misión, visión y valores en 3 columnas
3.5 Equipo directivo grid
3.6 Contadores de logros
3.7 Footer

SEGUIMIENTO

4.1 Header
4.2 Page header con breadcrumb
4.3 Formulario amplio de tracking
4.4 Resultado de seguimiento con timeline de estados
4.5 FAQ sobre seguimiento
4.6 Footer

BLOG

5.1 Header
5.2 Page header con breadcrumb
5.3 Grid de artículos con sidebar (categorías, recientes, tags)
5.4 Paginación
5.5 Footer

CONTACTO

6.1 Header
6.2 Page header con breadcrumb
6.3 Información de contacto en tarjetas (oficinas, teléfono, email)
6.4 Formulario de contacto con mapa lateral
6.5 Footer

PROMPTS RELACIONADOS · CORPORATIVO

Otros prompts de la misma categoría

Ficha de marca

Nombre: CargoVeloz Logística
Sector: Empresa de transporte marítimo y logística internacional de mercancías
Claim: Mueve tu carga por mar, tierra y aire con seguimiento en tiempo real

Bloques de la home

1.1 Header con logo, navegación principal y CTA de cotización
1.2 Hero slider con imagen de fondo (puerto/contenedores), titular grande, subtítulo y botones de acción
1.3 Barra de búsqueda de seguimiento de envíos con campo de tracking ID
1.4 Bloque "Sobre nosotros" con imagen, contadores animados y descripción
1.5 Grid de servicios (marítimo, terrestre, aéreo, almacenaje) con iconos
1.6 Sección de proceso de trabajo en 4 pasos con líneas conectoras
1.7 Banner CTA con fondo oscuro y formulario de contacto rápido
1.8 Sección de testimonios en slider con foto y valoración
1.9 Grid de últimos artículos del blog (3 columnas)
1.10 Bloque de partners/clientes en carrusel logos
1.11 Footer con 4 columnas (info empresa, enlaces, contacto, newsletter) y subfooter copyright

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