NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la ONG ficticia **Salon Valle** (salonvalle.com) usando **HTML estático + Tailwind CSS CDN + JavaScript vanilla** en un único archivo. Emplea la siguiente paleta de colores: #1E3A8A (azul principal), #F59E0B (ámbar accent), #F3F4F6 (gris claro fondo), #111827 (texto oscuro), #E5E7EB (borde/lineas). Tipografía: **Inter** para cuerpo y **Playfair Display** para títulos, cargadas desde Google Fonts.
Estructura del sitio:
1. **Header** fijo, con logo (texto "Salon Valle" en Inter, peso 700), menú ancla (About, Impact, Alliances, FAQ, Contact) y botón secundario "Contáctanos" que ancla al formulario.
2. **Hero** a pantalla completa, fondo degradado azul‑ámbar, chip pequeño con texto "Empoderar y Cambiar", título h1 centrado: "Construimos posibilidades para toda
4.553 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.553 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ú ancla y botón de contacto
- 1.2 Hero principal con frase motivadora, chips, botones primaria y secundaria y elementos decorativos
- 1.3 Sección vídeo de fondo a pantalla completa
- 1.4 Bloque "Sobre Nosotros" con chips, título y cuadrícula de tarjetas con imágenes y textos descriptivos
- 1.5 Bloque "Impacto" con contadores animados y gráficos sencillos
- 1.6 Bloque "Alianzas" con logos de socios y botón para colaborar
- 1.7 Sección FAQ con acordeón de preguntas frecuentes
- 1.8 Formulario de contacto con campos básicos y mapa ilustrativo
- 1.9 Footer con enlaces institucionales, redes sociales y datos de contacto
ABOUT
- 1.1 Título y sub‑título descriptivo
- 1.2 Texto de misión y visión
- 1.3 Galería de imágenes ilustrativas
- 1.4 Botón para descargar informe
IMPACT
- 1.1 Contadores animados (beneficiarios, proyectos, voluntarios)
- 1.2 Gráfica de distribución geográfica
- 1.3 Testimonios en carrusel
ALLIANCES
- 1.1 Logos de organizaciones colaboradoras
- 1.2 Breve descripción de cada alianza
- 1.3 Botón para unirse como aliado
FAQ
- 1.1 Lista de preguntas colapsables (8‑10 ítems)
CONTACT
- 1.1 Formulario (nombre, email, asunto, mensaje)
- 1.2 Mapa estático con pin de ubicación
- 1.3 Información de contacto (teléfono, email, dirección)
PROMPTS RELACIONADOS · BELLEZA / SPA
