NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web de una tienda online ficticia llamada Solidaria Aurora (solidariaaurora.com) que ofrezca productos y servicios jurídicos. Utiliza HTML único en un solo archivo, con Tailwind CSS CDN y JavaScript vanilla.
Paleta de colores: #0A1F44 (azul marino profundo), #1E3A8A (azul real), #3B82F6 (azul brillante), #F3F4F6 (gris muy claro), #FFFFFF (blanco).
Tipografía: 'Inter' para títulos y párrafos, peso 400-700, tamaños fluidos con clamp().
Estructura y secciones ( Home ):
1.1 Navbar fija con logo SVG, enlaces: Servicios, Contacto, Blog, Sobre Nosotros; botón de carrito que abre sidebar derecho, botón “Sign Up”. Usa flex, espacio entre y hover suave.
1.2 Hero: fondo degradado azul → azul claro, texto centrado: título grande (clamp(2.5rem,5vw,4rem)), subtítulo, botón principal “
4.323 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.323 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 Barra de navegación con logo, enlaces a Servicios, Contacto, Blog, Sobre Nosotros y botones de carrito y registro
- 1.2 Hero con título destacado, subtítulo y llamada a la acción
- 1.3 Sección de servicios en tarjetas con íconos y descripción breve
- 1.4 Área de testimonios con carrusel automático
- 1.5 Bloque de blog reciente con tarjetas de artículo
- 1.6 Llamada a la acción de suscripción al boletín
- 1.7 Footer con enlaces institucionales, redes sociales y datos de contacto
SERVICIOS
- 1.1 Encabezado de página Servicios
- 1.2 Lista de productos/servicios en cuadrícula con tarjetas y botón “Añadir al carrito”
- 1.3 Filtros laterales por categoría y precio
- 1.4 Pie de página reutilizado
BLOG
- 1.1 Encabezado de Blog
- 1.2 Lista de artículos en tarjetas con imagen, título y extracto
- 1.3 Paginación inferior
- 1.4 Footer común
CONTACTO
- 1.1 Formulario de contacto con campos nombre, email, mensaje
- 1.2 Mapa incrustado y datos de localización
- 1.3 Footer común
SOBRE NOSOTROS
- 1.1 Historia y misión en bloques de texto e imágenes
- 1.2 Equipo con tarjetas de perfil
- 1.3 Valores y metodología
- 1.4 Footer común
PROMPTS RELACIONADOS · NONPROFIT
