# Elevación visual de la landing (`credifygo.com`)

- **Fecha:** 2026-07-30
- **Rama:** `feat/landing-elevation`
- **Estado:** diseño aprobado en brainstorming (Approach A + paleta emerald), pendiente de plan.
- **Motivación:** apareció un clon (`credifyapp.com`); al usuario le gusta su dirección visual — específicamente **la paleta verde** y el **hero sobrio de titular gigante con mucho aire**. Objetivo: elevar NUESTRA landing tomando esas fortalezas, **corridas a nuestro emerald**, sin copiar assets/copy/marca del clon.

## Diagnóstico (clon vs. nuestra landing)

No es un problema de *efectos* — tenemos más (aurora animada, gradient text, glows). Es de **composición/jerarquía**:
- **Clon:** hero centrado, **un titular gigante**, **mucho aire**, un CTA. Cero producto visible. Lee premium por confianza y espacio.
- **Nuestro:** texto-izq + **cluster de ~4 mockup-cards** a la derecha → más recargado; el titular **compite** con las cards.
- **Ventaja nuestra:** los mockups **muestran el producto** (el clon es puro texto) — se conserva.

## Decisiones (del brainstorming)

- **Approach A — "split confiado":** mantener el layout hero texto-izq + producto-der, pero **titular mucho más grande y dominante**, **más aire**, y **rebalancear** el cluster de cards a **2 sobrias** que acompañen, no compitan.
- **Paleta emerald, sin cyan/teal:** correr toda la landing a nuestro emerald de marca (`#34d399` / `#10b981` / `#059669`; texto emerald-50 `#ecfdf5`), **eliminando** los `teal-*`/`cyan-*` (81 ocurrencias). Un solo acento.
- ~~**Cuerpo claro / hero oscuro:** se conserva la estructura actual.~~ **SUPERSEDIDO en ejecución:** al probar en vivo, la transición hero-oscuro→cuerpo-claro se veía murky; el usuario optó por **tema completamente oscuro** (como el clon y la app). El cuerpo se convirtió a oscuro (secciones, tarjetas glass, nav) y se eliminó el fade — no hay transición.
- **Contenido intacto:** no se toca copy, mensajes ni estructura de secciones. Es elevación **visual**.
- **SEO:** track/plan **aparte** (no en este spec).

## Alcance

**Archivo único:** `resources/views/welcome.blade.php` (790 líneas; Blade con `<style>` inline + utilidades Tailwind, `@vite(['resources/css/app.css'])`, servido en `/` por la ruta `welcome`, recibe `$plans`/`$plan`). No hay otros archivos de landing.

Secciones (se elevan todas, se reordena/reescribe ninguna): Navbar → **Hero** → Prueba social → Beneficios → Para quién → Precios → Promesa/Valor → FAQ → Banda CTA final → Footer → Bot de ventas.

## Cambios de diseño

### 1. Paleta → emerald (transversal)
- **Utilidades Tailwind en el markup:** `teal-{n}` → `emerald-{n}`; `cyan-{n}` → `emerald-{n}` (o eliminar el segundo tono de los gradientes bicolor teal→cyan, dejándolos emerald mono o emerald-400→emerald-600). 81 ocurrencias.
- **Clases custom del `<style>`** (usan hex crudo): retonar a emerald los valores en `.gradient-text`, `.gradient-text-green`, `.gradient-text-hero`, `.hero-dark` (aurora), `.hero-grid`, `.glass`/`.glass-sm` (bordes/tintes), `.bento`, `.hero-card`, `.hero-glass-pill`. Referencia de tonos: emerald-300 `#6ee7b7`, 400 `#34d399`, 500 `#10b981`, 600 `#059669`, 700 `#047857`, base oscura `#04130e`.
- **Sección "Promesa/Valor"** (`bg-linear-to-br from-teal-600 to-cyan-700`) → `from-emerald-600 to-emerald-800` (o emerald-700). Es la fuente más visible de cyan.

### 2. Hero — titular dominante + aire + 2 cards
- **Titular (`<h1>`, hoy `text-5xl sm:text-6xl`):** subir a `text-6xl sm:text-7xl` (o `text-[52px] sm:text-[64px]`), `leading-[1.02]`, mantener `font-extrabold tracking-tight` y el gradient emerald en "en cintura". Es el foco.
- **Aire:** más espacio vertical/horizontal en el hero; el titular respira (más `max-w`, más margen antes del subhead/CTAs).
- **Cards:** del cluster actual (~4: cobro+comprobante, alerta mora, recibo WhatsApp, badge sin-internet) **reducir a 2 protagonistas** (recomendado: la card "Cobro registrado / Recaudo del día $1.240.000 ✓" como principal + "Alerta de mora" como secundaria superpuesta), más limpias y con menos superposición. El badge "sin internet" pasa al micro-trust del texto (ya existe la línea de social-proof).
- **Motion:** conservar `animate-slide-up`/`animate-float`/`animate-aurora`; ya hay `prefers-reduced-motion` (respetarlo, no agregar motion nuevo sin el guard).

### 3. Secciones del cuerpo — aire + sobriedad + acento emerald
- **Más aire:** homogeneizar el ritmo vertical (padding de sección generoso y consistente), y el ancho de línea de los títulos/subtítulos para que respiren como el clon.
- **Tarjetas unificadas:** beneficios / roles / precios comparten un estilo de card sobrio y consistente (radio, borde sutil, sombra suave, acento emerald), evitando la deriva de tonos.
- **Jerarquía tipográfica:** títulos de sección consistentes (`text-4xl md:text-5xl font-extrabold tracking-tight`), subtítulos muted uniformes.
- **Nada de reescribir contenido** — solo el vestido visual.

## No-objetivos / límites
- **No** copiar del clon: logo, imágenes, textos, ni su marca. Solo se toma la *dirección* (sobriedad + verde), corrida a nuestro emerald y con nuestro copy/producto.
- **No** full-dark del cuerpo (se mantiene claro).
- **No** cambios de contenido, rutas, ni backend. Es solo `welcome.blade.php`.
- **No** SEO en este spec (track aparte).

## Riesgos / gotchas
- **Tailwind v4 compile gotcha (CLAUDE.md):** la landing usa utilidades que deben quedar en el content-scan del build. El swap a `emerald-*` es de bajo riesgo (esas utilidades ya se usan en toda la app), pero **verificar tras `npm run build`** que la landing renderiza con los tonos correctos (que ninguna utilidad emerald se "pierda"). Las clases del `<style>` son CSS crudo → sin riesgo de purge.
- **Consistencia de tono:** el objetivo es **un** acento (emerald). Al hacer el swap, no dejar teal/cyan residual — verificar `grep -E 'teal-|cyan-' welcome.blade.php` = 0 al final.
- **Regresión visual:** la landing es un solo archivo largo; cambios de layout del hero pueden romper responsive. Verificar en 375/768/1280 y claro/oscuro donde aplique (el hero es oscuro fijo).

## Verificación
- `npm run build` sin errores; `grep -E 'teal-|cyan-' resources/views/welcome.blade.php` → **0**.
- Preview del navegador: hero con titular dominante + 2 cards + emerald; secciones con aire; sin cyan en ningún lado; responsive 375/768/1280; `prefers-reduced-motion` desactiva animaciones.
- Screenshot antes/después para el usuario.
- (No hay tests JS de la landing; verificación visual + build, como el resto del frontend.)

## Fuera de alcance (siguiente track)
- **SEO** — meta/OG/Twitter tags, JSON-LD (Organization/SoftwareApplication/FAQPage — la landing ya tiene FAQ), `sitemap.xml`, `robots.txt`, títulos/description, performance (LCP del hero), keywords/contenido. Su propio spec+plan.