NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia Panel Orion, una startup SaaS de gestión de datos y automatización. El proyecto debe ser un solo archivo HTML que incluya Tailwind CSS vía CDN y JavaScript vanilla (sin frameworks). Usa la siguiente paleta de colores neón: #0ff9e5 (cian brillante), #ff2d95 (rosa eléctrico), #1e293b (gris casi negro para fondos), #f5f5f5 (texto claro). Tipografía: Inter (cargada de Google Fonts) para todo el texto, usando weights 400, 600, 700.
Estructura y contenido:
- **Header**: barra fija con logo (SVG placeholder), menú principal con items Home, Features, Pricing, Resources (dropdown con Blog, Customer), About, Contact. Menú responsive con icono hamburguesa. Fondo transparente que cambia a #1e293b al hacer scroll.
- **Hero**: sección fullscreen con fon
4.278 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.278 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 Barra de navegación fija con logo y menús desplegables
- 1.2 Hero principal con título, subtítulo, botón CTA y fondo degradado
- 1.3 Sección de características en grid 3‑columna con iconos y texto
- 1.4 Bloque de contador animado con métricas clave
- 1.5 Testimonios en carrusel horizontal
- 1.6 Área de blog destacado con imagen y extracto
- 1.7 Llamada a la acción secundaria con formulario breve
- 1.8 Footer con logo, enlaces de navegación, redes sociales y datos de contacto
ABOUT
- 2.1 Cabecera con título de la página y breadcrumb
- 2.2 Texto descriptivo de la empresa y misión
- 2.3 Equipo en tarjetas con foto y rol
- 2.4 Valores en iconos con breve descripción
- 2.5 CTA para contactar
PRICING
- 3.1 Tabla comparativa de planes en tres columnas
- 3.2 Botón de selección por plan
- 3.3 FAQ acordeón
CONTACT
- 4.1 Formulario de contacto completo (nombre, email, mensaje)
- 4.2 Mapa interactivo incrustado
- 4.3 Información de contacto y enlaces sociales
BLOG
- 5.1 Lista de artículos en tarjetas con imagen, título y resumen
- 5.2 Paginación inferior
BLOG SINGLE
- 6.1 Artículo completo con encabezado, imagen destacada y cuerpo de texto
- 6.2 Sección de artículos relacionados
CUSTOMER
- 7.1 Caso de estudio con imagen, reto, solución y resultados
- 7.2 Testimonio del cliente
- 7.3 CTA para solicitar demo
PROMPTS RELACIONADOS · SAAS / STARTUP
