CORPORATIVO · Tailwind · HTML · VanillaJS

Kairon Strategy – Consultoría estratégica premium para pymes

★★★★★4,7 2.927 descargas

Theme web corporativo para Kairon Strategy, consultora estratégica dirigida a fundadores y equipos directivos de pymes. Incluye hero con tipografía serif, secciones de servicios, casos, blog y formularios de contacto, todo responsive con Tailwind CSS y JavaScript vanilla. Ideal para proyectos que buscan una estética editorial premium y datos estructurados para SEO.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una web corporativa single-file en HTML con Tailwind CSS por CDN y JavaScript vanilla, para la firma ficticia Kairon Strategy (kaironstrategy.com), consultoría estratégica que acompaña a fundadores y comités de dirección de pymes en decisiones complejas, crecimiento y reestructuración. Claim: 'Acompañamos decisiones difíciles con criterio y datos.' Email de contacto: hola@kaironstrategy.com. Año 2025. Todo el copy en español de España, original, en tono sobrio, profesional y nada marketinero. No incluyas precios.

ESTILO VISUAL
- Estética editorial premium tipo despacho consultor: mucho aire, retícula amplia, jerarquías tipográficas marcadas.
- Paleta: fondo principal crema cálido #F4F1EC, fondo secundario blanco #FFFFFF, fondo oscuro para secciones destacadas #1A1A1A, texto principal #1A1A1A, texto secundario #5A574F, acento ocre/oliva #6B7A4F y detalle dorado tenue #B89968.
- Tipografía: titulares con serif elegante (Fraunces o Playfair Display vía Google Fonts), cuerpo con sans-serif geométrica (Inter). Titulares muy grandes en hero (clamp 56-96px), interlineado ajustado, posibilidad de resaltar parte del titular en cursiva con color acento.
- Botones primarios: pill oscuro con círculo a la izquierda que contiene un icono flecha; hover desplaza el círculo. Botones secundarios igual pero en variante clara.
- Etiquetas de sección tipo 'caption' con punto circular + texto en mayúsculas espaciadas.

STACK Y REQUISITOS TÉCNICOS
- Un único archivo index.html autocontenido.
- Tailwind por CDN, Google Fonts, iconos vía heroicons inline SVG o lucide CDN.
- JS vanilla para: menú móvil, marquesina infinita de logos, slider de testimonios, acordeón FAQ (en página servicios), animación de contadores al hacer scroll en la sección de cifras, sticky behavior nativo via CSS.
- Responsive desde 360px hasta 1440px. Mobile-first.
- Accesible: roles, aria-labels, foco visible.

HEADER (en todas las páginas)
- Barra superior con logo a la izquierda (texto 'Kairon' en serif + punto acento), navegación central: Inicio, Sobre nosotros, Servicios, Casos, Blog, Contacto. A la derecha botón 'Reservar consulta' estilo pill oscuro.
- En móvil, menú off-canvas desde la derecha con enlaces grandes, bloque 'Síguenos' y 4 iconos sociales.

FOOTER (en todas las páginas)
- Fondo oscuro #1A1A1A, texto crema.
- 4 columnas: marca + descripción corta + redes; Navegación; Servicios; Contacto (dirección ficticia en Madrid, email hola@kaironstrategy.com, teléfono ficticio).
- Línea inferior con © 2025 Kairon Strategy y enlaces a Aviso legal y Privacidad.

HOME secciones en orden

1.1 HERO
- Sección a pantalla casi completa, fondo crema.
- Caption superior con punto y texto 'Consultoría estratégica'.
- Titular serif enorme a dos líneas, con la segunda parte en cursiva color ocre: 'Asesoramiento que sostiene el crecimiento de tu negocio.'
- Descripción de 2 líneas debajo.
- Botón primario 'Hablemos' con círculo y flecha.
- Debajo, marquesina infinita de 4 logos de clientes ficticios (usa SVG inline simples tipo wordmark) repetida 3 veces, animación CSS keyframes que desplaza horizontalmente en bucle.
- Línea divisoria fina y bloque 'Desliza' con icono flecha abajo animado.

1.2 SOBRE NOSOTROS
- Fondo crema.
- Caption 'Quiénes somos'.
- Titular grande serif: 'Trabajamos junto a fundadores y equipos de dirección que afrontan decisiones estratégicas críticas.'
- Tres tarjetas horizontales con icono circular, número grande y descripción corta:
  · 150+ proyectos de consultoría en estrategia y crecimiento
  · 90%+ tasa de continuidad en relaciones a largo plazo
  · 10+ años acompañando equipos directivos
- Los números deben animarse al entrar en viewport (cuenta progresiva con IntersectionObserver).

1.3 SERVICIOS
- Fondo oscuro #1A1A1A, texto crema.
- Layout sticky: columna izquierda (40%) con caption 'Servicios', titular serif 'Servicios estratégicos para organizaciones que deciden a largo plazo.', descripción y botón secundario 'Ver todos los servicios'. Esta columna permanece sticky mientras scrollea la derecha.
- Columna derecha (60%): grid de 4 tarjetas verticales, cada una con imagen placeholder (gradiente o foto unsplash de oficinas/reuniones), título h5 y descripción:
  · Due diligence y diagnóstico
  · Asesoramiento ejecutivo
  · Apoyo a la decisión
  · Estrategia de crecimiento y escalado
- Cards con borde sutil, hover sube ligeramente.

1.4 CASOS DE ESTUDIO
- Fondo crema. Caption 'Casos de estudio'. Titular 'Resultados que hablan por sí solos.'
- Grid editorial 2 columnas en desktop con 4 casos, cada uno con imagen grande, etiqueta de sector (Industrial, SaaS, Retail, Servicios financieros), titular del caso y enlace 'Leer caso'.
- Hover con leve zoom de imagen.

1.5 PROCESO
- Fondo crema. Caption 'Cómo trabajamos'. Titular 'Un método claro en cuatro fases.'
- 4 pasos en horizontal conectados por una línea fina:
  01 Escucha y diagnóstico
  02 Análisis y opciones
  03 Decisión y plan
  04 Implantación y seguimiento
- Cada paso con número grande serif y descripción.

1.6 TESTIMONIOS
- Fondo oscuro. Slider con 3 testimonios.
- Cada slide: cita larga en serif italic grande, separador, foto circular pequeña, nombre ficticio + cargo + empresa ficticia.
- Controles prev/next circulares abajo a la derecha y dots indicadores.
- Autoplay cada 7s, pausable al hover.

1.7 BLOG
- Fondo crema. Caption 'Ideas'. Titular 'Últimas publicaciones.'
- 3 tarjetas con imagen, categoría en etiqueta, fecha, titular h5 y enlace 'Leer artículo'.
- Enlace 'Ver todo el blog' a la derecha del titular de sección.

1.8 CTA FINAL
- Banner ancho, fondo oscuro con textura sutil o gradiente.
- Titular serif enorme: '¿Tienes una decisión por delante? Conversemos.'
- Botón primario claro 'Reservar consulta'.

1.9 FOOTER según especificación general.

DETALLES ADICIONALES
- Todas las imágenes vía placeholders (unsplash.com/random con keywords business, office, meeting, architecture) o gradientes CSS si no carga.
- Animaciones suaves de fade-up al entrar en viewport para titulares y tarjetas.
- Cursor por defecto, sin cursores custom.
- Verifica que el sitio se vea coherente, elegante y sobrio, sin elementos infantiles ni colores estridentes.

Entrega el archivo index.html completo listo para abrir en navegador.

---

## 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>
```

6.604 caracteres · 112 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Hero con marquesina de logos y CTA
1.2 Sobre nosotros con tarjetas de cifras
1.3 Servicios estratégicos sticky con 4 tarjetas
1.4 Casos de estudio destacados
1.5 Proceso en 4 pasos
1.6 Testimonios slider
1.7 Últimas entradas del blog
1.8 CTA final
1.9 Footer

SOBRE NOSOTROS

2.1 Hero interior con titular y breadcrumb
2.2 Historia de la firma a dos columnas (texto + imagen)
2.3 Valores en grid de 4 tarjetas con icono
2.4 Equipo directivo en grid de retratos con cargo
2.5 Logos partners y reconocimientos
2.6 CTA final
2.7 Footer

SERVICIOS

3.1 Hero interior de servicios
3.2 Listado completo de servicios en formato lista alterna imagen-texto
3.3 Metodología en bloque oscuro con pasos
3.4 FAQ acordeón
3.5 CTA final
3.6 Footer

CASOS DE ESTUDIO

4.1 Hero interior con filtros por sector
4.2 Grid de casos en mosaico con hover
4.3 Cita destacada de cliente
4.4 CTA final
4.5 Footer

BLOG

5.1 Hero interior del blog
5.2 Post destacado a ancho completo
5.3 Grid de artículos con filtros por categoría
5.4 Bloque de suscripción a newsletter
5.5 Footer

CONTACTO

6.1 Hero interior de contacto
6.2 Bloque a dos columnas: formulario y datos de contacto con mapa
6.3 Bloque de oficinas
6.4 Footer

404

7.1 Mensaje 404 centrado con CTA a Home
7.2 Footer

PROMPTS RELACIONADOS · CORPORATIVO

Otros prompts de la misma categoría

Ficha de marca

Nombre: Kairon Strategy
Sector: Consultoría estratégica para fundadores y equipos directivos de pymes
Claim: Acompañamos decisiones difíciles con criterio y datos.

Bloques de la home

1.1 Hero con titular serif a dos tonos, descripción, CTA primario circular y marquesina infinita de logos partners más indicador Scroll Down
1.2 Sección Sobre nosotros con caption de etiqueta, titular grande y tres tarjetas de cifras (150+, 90%+, 10+) con icono
1.3 Servicios estratégicos en layout sticky: columna izquierda con título y CTA, columna derecha con grid de 4 tarjetas (imagen + título + descripción)
1.4 Casos de estudio destacados en grid editorial con etiquetas de sector
1.5 Nuestro proceso en 4 pasos numerados con línea de unión
1.6 Testimonios en slider con foto, cita larga, nombre y cargo
1.7 Blog: últimas 3 publicaciones con imagen, categoría, fecha y titular
1.8 CTA final tipo banner oscuro con titular grande y botón Reservar consulta
1.9 Footer amplio con logo, descripción, columnas de enlaces, redes sociales y copyright

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