NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia **AprendeConecta** (plataforma educativa) usando **HTML único**, **Tailwind CSS CDN** y **JavaScript vanilla** en un solo archivo. Utiliza la siguiente paleta de colores y tipografías:
- **Colores**: #1F2937 (gris oscuro), #3B82F6 (azul primario), #10B981 (verde acento), #F3F4F6 (gris claro), #FFFFFF (blanco).
- **Tipografía**: *Inter* para títulos y cuerpo (cargar desde Google Fonts).
**Estructura y componentes**:
1. **Header** fijo con logo (texto "AprendeConecta" en azul), menú de navegación (Inicio, Sobre Nosotros, Cursos, Blog, Contacto) y botón secundario "Contacto" con borde azul.
2. **Hero** a pantalla completa con fondo degradado azul‑gris, título grande en blanco "Impulsa tu futuro, domina nuevas habilidades", subtítulo gris
4.080 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.080 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 Header con barra de navegación y botón de contacto
- 1.2 Hero con título, subtítulo, buscador, y bloque de estadísticas
- 1.3 Sección de cursos destacados en cuadrícula
- 1.4 Testimonios con avatar y valoración
- 1.5 Llamada a la acción con formulario de suscripción
- 1.6 Footer con enlaces institucionales y redes sociales
ABOUT US
- 2.1 Header persistente
- 2.2 Banner interno con título y breve descripción
- 2.3 Historia de la plataforma en dos columnas
- 2.4 Equipo con tarjetas de miembros
- 2.5 Valores en iconos con texto
- 2.6 Footer
COURSES
- 3.1 Header persistente
- 3.2 Filtro de categorías y barra de búsqueda
- 3.3 Grid de tarjetas de cursos con imagen, título, descripción corta y botón
- 3.4 Paginación
- 3.5 Footer
BLOG
- 4.1 Header persistente
- 4.2 Lista de artículos en formato tarjeta con imagen, título y extracto
- 4.3 Sidebar con categorías y últimos artículos
- 4.4 Footer
CONTACT US
- 5.1 Header persistente
- 5.2 Formulario de contacto (nombre, email, mensaje, botón)
- 5.3 Mapa estático embed
- 5.4 Información de ubicación y teléfono
- 5.5 Footer
PROMPTS RELACIONADOS · EDUCACIÓN
