NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia **AudioNube** (podcast platform) usando **HTML puro**, **Tailwind CSS vía CDN** y **JavaScript vanilla** en un solo archivo. La estructura debe reproducir el diseño analizado:
- **Paleta de colores**: #1A202C (oscuro), #2D3748 (gris profundo), #4A5568 (gris medio), #E2E8F0 (gris claro), #F7FAFC (blanco nieve), #3182CE (azul accent).
- **Tipografía**: `Inter`, sans‑serif; títulos en `font-bold` y subtítulos en `font-medium`.
- **Header**: barra fija, logo a la izquierda, menú principal centrado (Home, About, Episodes, Packages, Contact), dropdown "Pages" con enlaces internos, botones "Último episodio" (estilo secundario) y "Suscribirse" (primario). Incluye icono de carrito simple con contador.
- **Hero**: sección full‑width, fondo degradad
3.737 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.737 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, dropdown de páginas y botones de última entrega y suscripción
- 1.2 Hero con título grande, subtítulo y botones de llamada a acción
- 1.3 Sección de características en tres columnas con iconos y texto
- 1.4 Carrusel de episodios destacados
- 1.5 Paquetes de suscripción mostrados en tarjetas con precios y botón comprar
- 1.6 Testimonios en estilo slider
- 1.7 Newsletter con formulario de suscripción
- 1.8 Footer con enlaces de navegación, contacto, redes y aviso legal
ABOUT
- 2.1 Cabecera reutilizada
- 2.2 Bloque de presentación del equipo y misión
- 2.3 Valores con iconos en grid
- 2.4 CTA para unirse a la comunidad
- 2.5 Footer reutilizado
EPISODES
- 3.1 Cabecera reutilizada
- 3.2 Lista de episodios con imagen, título, descripción breve y botón reproducir
- 3.3 Filtro por categorías
- 3.4 Paginación
- 3.5 Footer reutilizado
PACKAGES
- 4.1 Cabecera reutilizada
- 4.2 Grid de paquetes con beneficio, precio ficticio y botón adquirir
- 4.3 Comparativa de planes en tabla
- 4.4 FAQ accordion
- 4.5 Footer reutilizado
CONTACT
- 5.1 Cabecera reutilizada
- 5.2 Formulario de contacto con nombre, email, asunto y mensaje
- 5.3 Mapa embebido (placeholder)
- 5.4 Información de contacto rápido
- 5.5 Footer reutilizado
PROMPTS RELACIONADOS · MODA
