CORPORATIVO · Claude Design · Tailwind CSS · Vanilla JS

Korven Studio: Diseño para Consultoría Estratégica

★★★★★4,6 1.682 descargas

Plantilla corporativa de alta gama para consultoras y firmas de estrategia. Diseño sobrio basado en tipografía serif y una paleta orgánica en tonos crema y oliva.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una web corporativa completa en un único archivo HTML usando Tailwind CSS por CDN y JavaScript vanilla (sin frameworks, sin build). El sitio es para una consultora ficticia llamada **Korven Studio** (dominio korvenstudio.com, email hola@korvenstudio.com, año 2025), dedicada al acompañamiento estratégico de empresas en crecimiento. Claim: "Acompañamos decisiones complejas con criterio y método". Todo el copy debe ser original, en español de España, tono sobrio y profesional, sin jerga marketinera ni precios.

## Stack y requisitos técnicos
- HTML5 semántico + Tailwind CDN (https://cdn.tailwindcss.com) + JS vanilla en un solo archivo.
- Configura Tailwind inline con `tailwind.config` para paleta y fuentes.
- Tipografías Google Fonts: **Fraunces** (serif, titulares, pesos 400/500/600) e **Inter** (sans, cuerpo, 400/500/600).
- Responsive mobile-first, breakpoints md y lg.
- Animaciones suaves al hacer scroll con IntersectionObserver (fade-up).
- Accesible: roles ARIA en nav, alt en imágenes, contraste AA.
- Imágenes con placeholders de https://images.unsplash.com (fotos editoriales de oficinas, equipos, reuniones, paisajes urbanos en tono cálido).

## Paleta
- Fondo base crema: `#F4EFE6`
- Fondo alternativo claro: `#EFE7D8`
- Texto principal casi negro: `#0F0F0E`
- Acento verde oliva oscuro: `#3A4A2B`
- Acento secundario terracota suave: `#B5704A`
- Gris sutil para bordes: `#D9D1C0`

## Header (sticky, fondo crema con leve blur al hacer scroll)
- Logo "Korven" en serif a la izquierda con un pequeño glifo circular oliva.
- Menú centrado/derecha: Inicio, Servicios, Casos, Blog, Contacto.
- Item "Más" con mega menú desplegable (Guía de estilo, Licencias, 404, Changelog, Detalle de artículo, Detalle de proyecto).
- En móvil, icono hamburguesa de 3 líneas que abre overlay lateral.

## Home, sección a sección
1. **Hero**: dos imágenes circulares grandes a izquierda y derecha (retratos editoriales), entre ellas eyebrow con icono estrella y texto "Consultoría estratégica · Madrid", titular en Fraunces a 72-96px "Decisiones más claras para empresas que no se conforman", subtítulo de 2 líneas, dos botones: primario oliva "Reservar una conversación" y secundario outline "Ver casos". Debajo, microcopy con 3 puntos separados por bullets (sectores).
2. **Logos de clientes**: título pequeño a la izquierda "Han confiado en nosotros" y a la derecha tira horizontal de 6 logos ficticios en gris.
3. **About**: dos columnas. Izquierda imagen vertical recortada con bordes muy redondeados. Derecha eyebrow "Quiénes somos", titular serif y dos párrafos. Debajo fila de 3 contadores animados (años, proyectos, sectores) con número grande serif y etiqueta sans.
4. **Servicios**: grid de 6 tarjetas (2x3 en desktop) con fondo crema claro, borde 1px gris sutil, icono SVG inline en oliva, título h3, descripción 2 líneas y enlace "Saber más →". Servicios: Estrategia corporativa, Transformación operativa, Datos y analítica, Talento y cultura, Innovación de producto, Sostenibilidad.
5. **Proceso**: 4 pasos numerados (01-04) en fila horizontal con línea punteada conectora. Cada paso: número grande serif oliva, título y descripción corta. Pasos: Escucha, Diagnóstico, Hoja de ruta, Acompañamiento.
6. **Casos de éxito**: grid 3 columnas con tarjetas que muestran imagen con esquinas redondeadas, etiqueta de sector arriba, título del caso y flecha. Hover: zoom suave de imagen.
7. **Testimonios**: slider funcional con JS (botones prev/next y dots). Cita grande en serif, avatar circular, nombre y cargo. 3 testimonios.
8. **Equipo**: grid 4 columnas con fotos verticales en blanco y negro, nombre serif, rol sans pequeño y 3 iconos de redes.
9. **CTA central**: bloque ancho con fondo oliva oscuro `#3A4A2B`, titular crema en serif "Hablemos de lo que viene para tu organización", botón crema y nota breve.
10. **Blog**: 3 tarjetas con imagen, fecha + categoría, título y enlace.
11. **Footer**: fondo casi negro `#0F0F0E`, texto crema. 4 columnas: marca + claim + newsletter inline (input + botón), Empresa, Servicios, Legal. Línea inferior con © 2025 Korven Studio y enlaces sociales.

## Interacciones JS
- Menú móvil abrir/cerrar.
- Mega menú con hover en desktop y click en móvil.
- Slider de testimonios con autoplay (pausable al hover) y dots clickables.
- Contadores que animan al entrar en viewport.
- Fade-up de bloques al scroll.
- Header que añade clase `backdrop-blur` y borde inferior al scrollear más de 40px.

## Estilo visual general
- Mucho aire, márgenes generosos, secciones con padding vertical 96-128px en desktop.
- Esquinas muy redondeadas en imágenes y tarjetas (rounded-3xl).
- Botones pill (rounded-full), primario oliva con texto crema, secundario outline.
- Detalles tipográficos: titulares en Fraunces con ligaduras, cuerpo Inter 16/18px, line-height generoso.
- Pequeños iconos SVG inline (estrella, flecha diagonal, hamburguesa) en oliva oscuro.

Entrega el archivo HTML completo, válido y listo para abrir en navegador, con todas las secciones de la home implementadas y los enlaces del menú apuntando a anclas internas (#servicios, #casos, #blog, #contacto).

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```

5.457 caracteres · 71 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo y mega menú
1.2 Hero con imágenes circulares y doble CTA
1.3 Tira de logos de clientes
1.4 About con contadores
1.5 Grid de servicios (6)
1.6 Proceso en 4 pasos
1.7 Casos de éxito grid 3 columnas
1.8 Testimonios slider
1.9 Equipo grid 4 columnas
1.10 CTA central oscuro
1.11 Últimas entradas del blog
1.12 Footer

BLOG

2.1 Header
2.2 Cabecera de página con título y breadcrumb
2.3 Filtros por categoría tipo pills
2.4 Grid de artículos 3 columnas con paginación
2.5 Bloque newsletter inline
2.6 Footer

BLOG DETALLE

3.1 Header
3.2 Hero del artículo con categoría, título, autor, fecha y lectura
3.3 Imagen destacada full width
3.4 Cuerpo del artículo a 2 columnas (índice sticky + contenido)
3.5 Compartir en redes y tags
3.6 Artículos relacionados (3 tarjetas)
3.7 Footer

PROYECTOS DETALLE

4.1 Header
4.2 Cabecera con cliente, sector, año y reto
4.3 Galería de imágenes en mosaico
4.4 Bloque de resultados con cifras destacadas
4.5 Testimonio del cliente
4.6 Siguiente proyecto
4.7 Footer

CONTACTO

5.1 Header
5.2 Hero corto con título y subtítulo
5.3 Bloque a 2 columnas: formulario + datos de contacto y mapa
5.4 FAQ en acordeón
5.5 Footer

ESTILO / STYLE GUIDE

6.1 Header
6.2 Paleta de color
6.3 Tipografías y jerarquía
6.4 Botones y estados
6.5 Componentes (cards, inputs, badges)
6.6 Footer

404

7.1 Header
7.2 Ilustración + mensaje + botón volver
7.3 Footer

PROMPTS RELACIONADOS · CORPORATIVO

Otros prompts de la misma categoría

Ficha de marca

Nombre: Korven Studio
Sector: Consultora estratégica para negocios en crecimiento
Claim: Acompañamos decisiones complejas con criterio y método

Bloques de la home

1.1 Header con logo, menú horizontal (Home, Blog, Contacto) y mega menú Pages con icono hamburguesa
1.2 Hero con dos imágenes circulares laterales, eyebrow con icono estrella, titular serif XXL, subtítulo y doble CTA
1.3 Tira de logos de clientes en escala de grises con título a la izquierda
1.4 Bloque About con imagen vertical y texto a dos columnas + contadores numéricos
1.5 Grid de servicios (6 tarjetas) con icono, título, descripción y enlace flecha
1.6 Sección de proceso en 4 pasos numerados horizontales con línea conectora
1.7 Casos de éxito / proyectos destacados en grid 3 columnas con imagen, categoría y título
1.8 Bloque de testimonios tipo slider con cita grande, avatar, nombre y cargo
1.9 Sección equipo con tarjetas en grid 4 columnas (foto, nombre, rol, redes)
1.10 Bloque CTA central con titular grande sobre fondo oscuro y botón
1.11 Últimas entradas del blog en 3 tarjetas con imagen, fecha, categoría y título
1.12 Footer amplio con logo, claim, columnas de enlaces, newsletter y legal

Crea tu propia Skill

Genera una Skill personalizada para Claude AI en minutos. Sin código.

Empezar ahora ↗

← Volver al catálogo ↗ Crea tu Skill personalizada