NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia **FortiVista** (plataforma de seguridad y defensa) usando **HTML único**, **Tailwind CSS vía CDN** y **JavaScript vanilla** en un solo archivo. Reproduce fielmente la estructura y estilo del sitio analizado:
- **Paleta de colores**: #0A0E2C (azul marino profundo), #1F2B5B (azul grisáceo), #E5E7EB (gris claro), #F3F4F6 (blanco humo), #2563EB (azul primario para botones y enlaces).
- **Tipografía**: `Inter` para todo el texto, tamaños variables de 1rem a 3rem según jerarquía.
- **Header**: barra fija, logo a la izquierda, menú principal con enlaces Home, About, Services, Pricing, Contact y un mega‑menu desplegable con categorías similares al original. A la derecha, botones "Request demo" (bordes y fondo blanco) y "Get in touch" (fondo #25
3.937 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.937 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 botones de demo y contacto
- 1.2 Hero con título destacado, subtítulo y botones primario/secundario
- 1.3 Bloque de características (grid 3 columnas con icono, título y descripción)
- 1.4 Testimonios en carrusel (cards con foto, nombre, cargo, comentario)
- 1.5 Comparativa de precios (tabla 3 columnas, plan básico, pro, enterprise)
- 1.6 CTA centrado con formulario breve (nombre, email, botón enviar)
- 1.7 Footer con columnas de enlaces, suscripción y datos de contacto
ABOUT
- 2.1 Cabecera reutilizada
- 2.2 Hero interno con título y subtítulo
- 2.3 Historia de la empresa (texto + imagen)
- 2.4 Valores y misión (grid 4 bloques)
- 2.5 Equipo (tarjetas con foto, nombre, rol)
- 2.6 Footer
SERVICES
- 3.1 Cabecera
- 3.2 Hero de servicios
- 3.3 Lista de soluciones (cards 3 columnas)
- 3.4 Caso de estudio destacado
- 3.5 CTA a contacto
- 3.6 Footer
PRICING
- 4.1 Cabecera
- 4.2 Hero de precios
- 4.3 Tabla comparativa de planes
- 4.4 FAQ accordion
- 4.5 CTA a demo
- 4.6 Footer
CONTACT
- 5.1 Cabecera
- 5.2 Hero de contacto
- 5.3 Formulario completo (nombre, email, empresa, mensaje)
- 5.4 Mapa integrado
- 5.5 Footer
PROMPTS RELACIONADOS · TECNOLOGÍA