NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Cargox" (logística y transporte) usando solo HTML estático, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. El diseño debe reproducir los patrones observados:
- **Paleta de colores**: #0a0a0a (negro profundo), #f5f5f5 (gris claro), #0066ff (azul primario), #ffffff (blanco), #777777 (gris medio) para textos secundarios.
- **Tipografía**: Fuente principal "Inter" (Google Fonts) para títulos y cuerpos, peso 400‑700, tamaño responsivo.
- **Header**: barra fija con logo a la izquierda, menú horizontal (Home, About, Services, News, Contact) con efecto de doble capa de texto (texto principal y sombra desplazada) y número de sección "(04)" al lado de Services. A la derecha, ícono de hamburguesa que abre un panel lateral con infor
4.597 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.597 caracteres · licencia libre
Solo descarga completa disponible
CAPTURA COMPLETA · HOME
Para que Claude replique el diseño con máxima fidelidad, descarga la imagen y adjúntala en tu chat.
Descargar captura
ESTRUCTURA DEL SITIO
Tabla de secciones
HOME
- 1.1 Cabecera fija con logo, menú principal y botón de menú móvil
- 1.2 Hero con video de fondo, título rotativo y botón "Solicita tu presupuesto"
- 1.3 Bloque "Hablemos" con foto del director y datos de contacto
- 1.4 Cuadrícula de servicios (4 tarjetas)
- 1.5 Últimas noticias (3 tarjetas)
- 1.6 Formulario breve de contacto y mapa integrado
- 1.7 Footer con dirección, teléfono, email, redes sociales
ABOUT
- 2.1 Header interno replicado
- 2.2 Historia de la empresa con imagen a la izquierda y texto a la derecha
- 2.3 Valores corporativos en iconos
- 2.4 Equipo directivo en tarjetas
- 2.5 CTA a contacto y footer
SERVICES
- 3.1 Header interno
- 3.2 Listado de servicios en tarjetas con icono y breve descripción
- 3.3 Sección de casos de éxito en slider
- 3.4 CTA a solicitud de presupuesto
- 3.5 Footer
NEWS
- 4.1 Header interno
- 4.2 Grid de artículos (3 columnas) con imagen, título y extracto
- 4.3 Paginación simple
- 4.4 Footer
CONTACT
- 5.1 Header interno
- 5.2 Formulario de contacto completo (nombre, email, asunto, mensaje)
- 5.3 Información de oficina, teléfono y mapa interactivo
- 5.4 Footer
PROMPTS RELACIONADOS · ARQUITECTURA
