NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático completo para la marca ficticia **AlmaViva** (dominio alraviva.com) usando **HTML** y **Tailwind CSS CDN** en un único archivo con **JavaScript vanilla** para interactividad. El proyecto debe reproducir el diseño y la estructura de la web analizada, sin copiar texto literal ni imágenes originales.
**Alcance**
- Header fijo con logo a la izquierda, menú de navegación horizontal (Home, Sobre Nosotros, Eventos, Sermones, Equipo, Blog, Contacto) y un botón resaltado "Donar ahora" a la derecha.
- Hero section de dos columnas: izquierda con título grande (h1) y párrafo descriptivo, derecha con una galería de tres imágenes que aparecen con animación de desplazamiento (use CSS transitions y `intersectionObserver`). Incluir un botón "Descubrir más".
- Carrusel de tarjeta
4.761 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.761 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 logo, menú principal, botón de donación
- 1.2 Hero de dos columnas: texto destacado y galería de imágenes animadas
- 1.3 Carrusel de tarjetas de eventos con imagen, fecha, descripción y botón
- 1.4 Footer con información de contacto, enlaces rápidos y redes sociales
ABOUT
- 1.1 Header (reutilizado)
- 1.2 Sección de presentación con imagen y texto descriptivo
- 1.3 Misión, visión y valores en columnas
- 1.4 Footer (reutilizado)
EVENTS
- 1.1 Header
- 1.2 Lista de eventos en cuadrícula con tarjetas similares al carrusel
- 1.3 Filtro de categorías y calendario
- 1.4 Footer
SERMONS
- 1.1 Header
- 1.2 Galería de sermones con audio integrado y descripción
- 1.3 Botón para descargar material
- 1.4 Footer
TEAM
- 1.1 Header
- 1.2 Tarjetas de miembros del equipo con foto, cargo y breve bio
- 1.3 Llamada a la acción para unirse al equipo
- 1.4 Footer
BLOG
- 1.1 Header
- 1.2 Lista de artículos con imágenes, resumen y enlaces
- 1.3 Sidebar con categorías y últimos posts
- 1.4 Footer
CONTACT
- 1.1 Header
- 1.2 Formulario de contacto con campos nombre, email, mensaje
- 1.3 Mapa incrustado y datos de ubicación
- 1.4 Footer
PROMPTS RELACIONADOS · EDUCACIÓN
