NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una web corporativa híbrida con tienda online en un único archivo HTML autocontenido para el estudio ficticio Norvela Studio, un estudio de consultoría estratégica con catálogo propio de merchandising. Dominio norvela.com, contacto hola@norvela.com, año 2025. Claim: Estrategia, diseño y operaciones bajo un mismo techo.
ALCANCE
Genera la HOME completa con todos los bloques descritos, navegables. Añade enlaces de cabecera y footer hacia secciones internas con anclas (#sobre, #servicios, #casos, #productos, #blog, #contacto). No incluyas precios concretos en los productos, usa la etiqueta Consultar.
STACK
- HTML5 + Tailwind CSS por CDN + JavaScript vanilla.
- Single-file, sin dependencias externas más allá de Tailwind y Google Fonts.
- Animaciones suaves al hacer scroll usando Intersec
6.364 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
6.364 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 menú desplegable y carrito
- 1.2 Hero corporativo con métricas
- 1.3 Marquee de logos de clientes
- 1.4 Bloque Sobre nosotros con valores
- 1.5 Grid de servicios en tarjetas
- 1.6 Proceso en 4 pasos
- 1.7 Slider de casos de éxito
- 1.8 Contadores animados
- 1.9 Catálogo de productos merchandising
- 1.10 Carrusel de reseñas
- 1.11 Últimos artículos del blog
- 1.12 CTA final oscuro
- 1.13 Footer completo con newsletter
SOBRE NOSOTROS
- 2.1 Header
- 2.2 Hero con titular y breadcrumb
- 2.3 Historia del estudio con timeline vertical
- 2.4 Misión, visión y valores en 3 columnas
- 2.5 Equipo en grid con foto, nombre y rol
- 2.6 Bloque de cultura con galería de imágenes
- 2.7 CTA Únete al equipo
- 2.8 Footer
RESEÑAS
- 3.1 Header
- 3.2 Hero con titular y nota media destacada
- 3.3 Filtros por sector
- 3.4 Grid masonry de testimonios con foto, cargo y cita
- 3.5 Bloque de videotestimonio destacado
- 3.6 CTA Cuéntanos tu experiencia
- 3.7 Footer
SERVICIOS
- 4.1 Header
- 4.2 Hero de servicios con titular y subtítulo
- 4.3 Grid de servicios en tarjetas grandes con icono
- 4.4 Sección de metodología en pasos
- 4.5 Tabla comparativa de planes
- 4.6 FAQ en acordeón
- 4.7 CTA reserva
- 4.8 Footer
DETALLE DE SERVICIO
- 5.1 Header
- 5.2 Hero con breadcrumb y título del servicio
- 5.3 Descripción larga con imagen lateral
- 5.4 Beneficios en lista de iconos
- 5.5 Proceso específico del servicio
- 5.6 Casos relacionados
- 5.7 CTA contratar
- 5.8 Footer
BLOG
- 6.1 Header
- 6.2 Hero con artículo destacado
- 6.3 Filtros por categoría
- 6.4 Grid de artículos con imagen, categoría, título y fecha
- 6.5 Paginación
- 6.6 Newsletter inline
- 6.7 Footer
DETALLE DE ARTÍCULO
- 7.1 Header
- 7.2 Hero con imagen grande, categoría, título y autor
- 7.3 Cuerpo del artículo con tipografía editorial
- 7.4 Bloque de cita destacada
- 7.5 Compartir en redes
- 7.6 Artículos relacionados
- 7.7 Footer
CASOS DE ÉXITO
- 8.1 Header
- 8.2 Hero con titular y filtros por industria
- 8.3 Grid de casos con imagen, cliente y métrica
- 8.4 CTA Quiero ser caso
- 8.5 Footer
DETALLE DE CASO
- 9.1 Header
- 9.2 Hero con cliente, sector y reto
- 9.3 Ficha técnica lateral con datos del proyecto
- 9.4 Bloque solución con imagen
- 9.5 Resultados en métricas grandes
- 9.6 Testimonio del cliente
- 9.7 Casos relacionados
- 9.8 Footer
PRODUCTOS
- 10.1 Header
- 10.2 Hero de tienda con titular
- 10.3 Filtros por categoría y orden
- 10.4 Grid de productos con imagen, nombre y precio
- 10.5 Paginación
- 10.6 Footer
DETALLE DE PRODUCTO
- 11.1 Header
- 11.2 Galería de imágenes del producto
- 11.3 Información con nombre, precio, descripción, selector y botón Añadir
- 11.4 Tabs de descripción, materiales y envío
- 11.5 Productos relacionados
- 11.6 Footer
CONTACTO
- 12.1 Header
- 12.2 Hero con titular y datos de contacto
- 12.3 Formulario amplio con campos y selector de motivo
- 12.4 Mapa estático con dirección
- 12.5 FAQ corta
- 12.6 Footer
CHANGELOG
- 13.1 Header
- 13.2 Hero con titular
- 13.3 Timeline de versiones con fecha, etiqueta y cambios
- 13.4 Footer
LICENCIA
- 14.1 Header
- 14.2 Documento legal con apartados
- 14.3 Footer
STYLEGUIDE
- 15.1 Header
- 15.2 Paleta de color con muestras
- 15.3 Tipografía con escala
- 15.4 Botones en estados
- 15.5 Componentes (tarjetas, formularios, badges)
- 15.6 Footer
404
- 16.1 Header
- 16.2 Bloque centrado con ilustración, mensaje y botón volver al inicio
- 16.3 Footer
PROMPTS RELACIONADOS · COMERCIO ELECTRÓNICO