NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia EcoRaiz, una iniciativa de conservación y tienda ecológica. Utiliza HTML5 y Tailwind CSS vía CDN, con JavaScript vanilla en un único archivo. Paleta de colores: #0A3D62 (azul profundo), #3C9D9B (turquesa), #F0F5F9 (gris muy claro), #E8E8E8 (gris medio) y #FFFFFF. Tipografía: encabezados con 'Montserrat', cuerpo con 'Libre Franklin', ambas importadas de Google Fonts.
Estructura:
- Header fijo con logo SVG, menú horizontal (Home, About, Campaign, Shop, Contact), botón "Let’s Talk" a la derecha y carrito de compra con contador.
- Hero principal: sección a pantalla completa, fondo de imagen ambiental con overlay semi‑transparente, título grande, subtítulo y botón CTA "Descubre" centrado.
- Bloque de valores: 3 columnas, cada una con icono (SVG
3.490 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.490 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 con logo, navegación y carrito
- 1.2 Hero principal con fondo a pantalla completa y CTA
- 1.3 Bloque de valores/impacto
- 1.4 Galería de campañas
- 1.5 Productos destacados
- 1.6 Testimonios en carrusel
- 1.7 Llamado a la acción de contacto
- 1.8 Footer institucional
ABOUT
- 2.1 Cabecera reutilizada
- 2.2 Hero interno con título y foto de fondo
- 2.3 Texto descriptivo de la misión y visión
- 2.4 Equipo en tarjetas con foto y enlaces sociales
- 2.5 Estadísticas clave en contadores
- 2.6 Footer
CAMPAIGN
- 3.1 Cabecera
- 3.2 Hero de campaña con video de fondo
- 3.3 Lista de proyectos en grid con filtros
- 3.4 Botón de donación rápida
- 3.5 Footer
SHOP
- 4.1 Cabecera
- 4.2 Hero de tienda con banners promocionales
- 4.3 Lista de productos en tarjetas con filtros por categoría
- 4.4 Paginación y carrito lateral
- 4.5 Footer
CONTACT
- 5.1 Cabecera
- 5.2 Hero de contacto con mapa integrado
- 5.3 Formulario de contacto (nombre, email, mensaje)
- 5.4 Información de contacto y redes
- 5.5 Footer
PROMPTS RELACIONADOS · EDUCACIÓN
