BLOG / REVISTA · Tailwind · HTML · AlpineJS

Cortexia Labs – SaaS IA para decisiones empresariales

★★★★★4,9 1.315 descargas

Theme premium para Cortexia Labs, una plataforma SaaS de IA que potencia la gestión empresarial. Incluye hero impactante, grid de características, testimonios y llamadas a la acción optimizadas, todo con Tailwind CSS y JavaScript vanilla. Ideal para startups que buscan una presencia web moderna y funcional.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web para la marca ficticia **Cortexia Labs** (dominio cortexia.com, sector SaaS IA) usando **HTML único, Tailwind CSS vía CDN y JavaScript vanilla**. Utiliza la siguiente paleta de colores: #1F2937 (gris oscuro), #3B82F6 (azul primario), #F9FAFB (blanco), #6B7280 (gris medio), #10B981 (verde acento). Tipografía: **Inter** para títulos y body, peso 400‑600, importada desde Google Fonts.

**Header** (fijo, fondo blanco, sombra ligera): logo SVG a la izquierda, menú de navegación con dropdowns para Home, Pricing, Blogs, Contact, Resources. Cada enlace tiene efecto hover que cambia de color a #3B82F6 y muestra una flecha SVG. A la derecha, enlaces "Login" (texto) y botón "Contact us" (bg‑#3B82F6, hover bg‑#2563EB, texto blanco). Menú colapsable en móvil con botón hamburguesa.

**Home**
1. **Hero**: container centrado, título h1 con clase `text-5xl font-semibold text-gray-900`, subtítulo p `text-xl text-gray-600`, dos botones CTA: "Empieza ahora" (bg‑#3B82F6) y "Ver demo" (border‑2 border‑#3B82F6, text‑#3B82F6). Imagen decorativa a la derecha que entra con animación fade‑in‑up.
2. **Características**: grid `grid-cols-1 md:grid-cols-3 gap-8`. Cada tarjeta con icono SVG, título `text-2xl font-medium`, descripción `text-gray-600`. Fondo blanco, sombra `shadow-lg`, hover `shadow-xl`.
3. **Testimonios**: carrusel simple (JS) con 3 testimonios, cada uno con foto circular, nombre, cargo y cita. Fondo `bg-gray-100`.
4. **CTA secundaria**: sección de ancho completo con fondo `bg-Teal-600` (hex #10B981), texto centrado blanco, botón "Solicita una demo" (bg‑white, text‑teal-600).
5. **Footer**: fondo `bg-gray-900`, texto `text-gray-400`. Tres columnas: Navegación (enlaces principales), Recursos (blog, changelog, licencia), Contacto (email, dirección ficticia, iconos sociales). Pequeño copyright.

**Requisitos técnicos**
- Incluir `<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css" rel="stylesheet">` y `<script src="https://cdn.jsdelivr.net/npm/alpinejs@3" defer></script>` para interacciones simples (dropdowns, mobile menu, carrusel).
- Todas las clases deben ser de Tailwind, sin CSS personalizado externo.
- Usar `data-` attributes para animaciones (ej. `data-aos="fade-up"`).
- El HTML debe estar perfectamente anidado y validado, sin referencias a la web original.
- Mantener la estructura de páginas (Home, About, Features, Pricing, Contact) según la tabla, replicando los bloques descritos.
- Optimizar imágenes con `loading="lazy"` y tamaños apropiados.
- Asegurar accesibilidad: `alt` en imágenes, `aria-label` en botones, contraste de colores.

Entrega el código listo para copiar‑pegar en un fichero `index.html` que incluya todas las secciones y navegación funcional.

---

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

3.080 caracteres · 38 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME