NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia **CampoVerde Studios** (campovertestudios.com) usando **HTML estático**, **Tailwind CSS vía CDN** y **JavaScript vanilla** en un único archivo. Emular el diseño analizado:
1. **Paleta de colores**:
- #0F172A (gris azul oscuro – fondo principal/header)
- #1E293B (gris medio – áreas de contenido)
- #F8FAFC (blanco nieve – textos y fondos claros)
- #10B981 (verde esmeralda – botones y acentos)
- #84CC16 (verde lima – barras de progreso)
2. **Tipografía**: *Inter* para todo el texto, tamaños responsivos (h1 48px, h2 36px, h3 24px, p 16px). Usa `font-sans` de Tailwind.
3. **Header (navbar)**: barra fija con fondo #0F172A, logo SVG ficticio a la izquierda, menú horizontal con enlaces: Home, About Us, Services, Pricing, Contact
4.560 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.560 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 y menú desplegable (incluye dropdowns y megamenu)
- 1.2 Hero de portada con título grande, subtítulo y imagen de fondo
- 1.3 Bloque de demos: tres tarjetas enlazadas, cada una con imagen, overlay y título
- 1.4 Sección Ultra Performance: título, párrafo y grid de 4 ítems con barra de progreso
- 1.5 Footer: enlaces principales, botón de contacto y datos de la empresa
ABOUT US
- 2.1 Cabecera estándar (heredada)
- 2.2 Hero interno con encabezado y descripción
- 2.3 Texto descriptivo sobre la compañía y equipo
- 2.4 Footer (heredado)
SERVICES
- 3.1 Cabecera estándar
- 3.2 Hero con título y breve descripción
- 3.3 Grid de servicios (icono + título + breve texto)
- 3.4 CTA de contacto
- 3.5 Footer
PRICING
- 4.1 Cabecera estándar
- 4.2 Hero con título
- 4.3 Tabla comparativa de planes (3 columnas)
- 4.4 Preguntas frecuentes
- 4.5 Footer
CONTACT US
- 5.1 Cabecera estándar
- 5.2 Hero con llamado a la acción
- 5.3 Formulario de contacto (nombre, email, mensaje, botón)
- 5.4 Mapa incrustado
- 5.5 Footer
PROMPTS RELACIONADOS · AGRICULTURA
