NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático completo para la marca ficticia **Campus Puerto** (dominio campuspuerto.com) con el objetivo de presentar una solución SaaS de gestión de proyectos. El proyecto debe estar en un solo archivo HTML que incluya Tailwind CSS vía CDN y JavaScript vanilla (también embebido) para interacciones mínimas (dropdowns, carrusel de testimonios y modal de carrito). Utiliza la siguiente paleta de colores: #0A2740 (azul marino), #1E3A5F (azul medio), #4A90E2 (azul acento), #F5F7FA (gris claro), #FFFFFF (blanco). Tipografía: **Inter** para títulos y cuerpo, weight 400‑700, importada desde Google Fonts.
**Estructura y secciones** (replicar el orden y estilo del template original):
1. **Navbar** fija, fondo blanco, logo a la izquierda, enlaces: Home, Feature, Pages (dropdown con M
4.797 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.797 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, enlaces principales y dropdowns de páginas.
- 2.1 Hero principal con título, subtítulo, botón CTA y gráfica decorativa.
- 3.1 Cuadrícula de características resaltando tres ventajas con iconos.
- 4.1 Sección de integración mostrando logos de partners.
- 5.1 Testimonios en carrusel con foto, nombre y comentario.
- 6.1 Tabla comparativa de planes de precios.
- 7.1 Llamada a la acción final con formulario de suscripción.
- 8.1 Footer con enlaces rápidos, redes sociales y datos de contacto.
FEATURE
- 1.1 Encabezado interno reutilizando la barra de navegación.
- 2.1 Detalle de funcionalidades con bloques alternados de texto e imagen.
- 3.1 CTA secundario para probar la demo.
ABOUT US
- 1.1 Barra de navegación.
- 2.1 Historia de la empresa con foto y texto.
- 3.1 Valores y misión en tarjetas.
- 4.1 Equipo destacado con fotos y breves biografías.
PRICING
- 1.1 Barra de navegación.
- 2.1 Tabla de precios con tres planes, lista de características y botones de selección.
- 3.1 FAQ en acordeón.
BLOG
- 1.1 Barra de navegación.
- 2.1 Lista de artículos en grid, cada uno con imagen, título, extracto y meta.
- 3.1 Sidebar con categorías y newsletter.
CONTACT
- 1.1 Barra de navegación.
- 2.1 Formulario de contacto con campos nombre, email, mensaje y botón enviar.
- 3.1 Mapa embebido y datos de contacto.
PRIVACY POLICY
- 1.1 Barra de navegación.
- 2.1 Texto extenso de política de privacidad con encabezados y párrafos.
UTILITY PAGES (STYLE GUIDE, LICENSE, CHANGELOG, etc.)
- 1.1 barra de navegación mínima.
- 2.1 contenido específico de cada página según su propósito.
PROMPTS RELACIONADOS · EDUCACIÓN
