# Elevación visual de la landing Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Elevar `resources/views/welcome.blade.php` — paleta 100% **emerald** (fuera teal/cyan), **hero de titular dominante + aire + 2 cards**, y cuerpo con más aire y tarjetas sobrias — sin tocar copy ni backend.

**Architecture:** Un solo archivo Blade (790 líneas: `<style>` inline + utilidades Tailwind, `@vite(['resources/css/app.css'])`, ruta `welcome` en `/`). Los cambios son: (1) swap mecánico de utilidades `teal-*`/`cyan-*` → `emerald-*` + retono de 4 gradientes/aurora en el `<style>`; (2) edición quirúrgica del hero; (3) ajustes de aire/tipografía por sección. Verificación por **build + preview del navegador** (no hay tests JS de la landing).

**Tech Stack:** Blade, Tailwind v4 (`@vite` app.css), CSS inline. Verificación: `npm run build` + Browser pane (preview_start/navigate/screenshot).

**Gotcha (CLAUDE.md):** Tailwind v4 purga por content-scan. El swap a `emerald-*` es de bajo riesgo (esas utilidades ya se usan en toda la app), pero **verificar tras el build** que la landing renderiza con los tonos correctos. Las clases del `<style>` son CSS crudo → sin purge.

---

### Task 1: Paleta → emerald (todo el archivo)

Swap de utilidades `teal-*`/`cyan-*` → `emerald-*` en el markup + retono de los colores hex en el `<style>`. Cubre color en TODAS las secciones (hero + cuerpo).

**Files:**
- Modify: `resources/views/welcome.blade.php`

- [ ] **Step 1: Swap de utilidades Tailwind (sed)**

En la landing, `teal-` y `cyan-` solo aparecen como tokens de color Tailwind. Reemplazar globalmente:

```bash
wsl bash -lc "cd /var/www/html/credify && sed -i 's/teal-/emerald-/g; s/cyan-/emerald-/g' resources/views/welcome.blade.php"
```

- [ ] **Step 2: Retonar los 4 colores hex del `<style>`**

En el bloque `<style>` (líneas ~59–128) aplicar estos 4 cambios exactos con Edit:

`.gradient-text` (era teal→sky→indigo, multi-hue) →
```css
        .gradient-text {
            background: linear-gradient(135deg, #059669 0%, #10b981 55%, #34d399 100%);
```
(reemplaza solo la línea `background: linear-gradient(135deg, #0d9488 0%, #0ea5e9 60%, #6366f1 100%);`)

`.gradient-text-green` (era green-600/700) →
```css
            background: linear-gradient(135deg, #10b981, #059669);
```
(reemplaza `background: linear-gradient(135deg, #16a34a, #15803d);`)

`.hero-dark` aurora — reemplazar las 2 líneas de glow cyan/teal:
```css
                radial-gradient(50% 70% at 88% 12%, rgba(52,211,153,0.14), transparent 60%),
                radial-gradient(55% 65% at 72% 92%, rgba(16,185,129,0.14), transparent 62%),
```
(reemplaza `rgba(6,182,212,0.16)` y `rgba(20,184,166,0.16)` respectivamente; la 1ª línea `rgba(16,185,129,0.20)` ya es emerald, no se toca)

`.gradient-text-hero` (terminaba en cyan `#22d3ee`) →
```css
            background: linear-gradient(120deg, #6ee7b7 0%, #34d399 38%, #059669 100%);
```
(reemplaza `linear-gradient(120deg, #6ee7b7 0%, #34d399 38%, #22d3ee 100%)`)

- [ ] **Step 3: Verificar 0 residuos + build**

```bash
wsl bash -lc "cd /var/www/html/credify && grep -nE 'teal-|cyan-|#0d9488|#0ea5e9|#6366f1|#16a34a|#15803d|22d3ee|182,212|184,166' resources/views/welcome.blade.php"
```
Expected: **sin resultados** (0 residuos teal/cyan/hex-viejos).

```bash
wsl bash -lc "cd /var/www/html/credify && npm run build 2>&1 | grep -iE 'error|built in'"
```
Expected: build sin errores.

- [ ] **Step 4: Commit**

```bash
git add resources/views/welcome.blade.php
git commit -m "style(landing): paleta a emerald (fuera teal/cyan)"
```

---

### Task 2: Hero — titular dominante + aire + 2 cards

**Files:**
- Modify: `resources/views/welcome.blade.php` (sección HERO, ~180–316)

- [ ] **Step 1: Titular más grande + más aire (h1)**

Reemplazar la etiqueta `<h1 ...>` (era `text-5xl sm:text-6xl ... mb-5`):

```html
            <h1 class="animate-slide-up d100 text-5xl sm:text-6xl lg:text-7xl font-extrabold leading-[1.03] tracking-tight mb-6 text-white">
                El software que pone<br>
                <span class="gradient-text-hero">en cintura</span> tu negocio<br>
                de microcréditos.
            </h1>
```
(cambios: `lg:text-7xl` añadido, `leading-[1.06]`→`leading-[1.03]`, `mb-5`→`mb-6`. Nota: `lg:text-7xl` da el golpe "gigante" solo en desktop; si se ve excesivo en preview, bajar a `lg:text-[64px]`.)

- [ ] **Step 2: Reducir el cluster a 2 cards**

En `<!-- MOCKUP CARDS -->` (~240): **conservar** la "Card principal" (Cobro/Recaudo, `animate-float-a`) y la "Card: alerta mora". **Eliminar** dos bloques completos: el `<!-- Card: recibo WhatsApp -->` (`animate-float-b`, ~292–308) y el `<!-- Mini badge: sin internet -->` (~310–314). Borrar esos dos bloques íntegros (su comportamiento — comprobante y "sin internet" — ya está cubierto por la card principal y por la línea de social-proof del texto).

Tras borrarlos, reposicionar la "Card: alerta mora" para que respire (menos superposición): cambiar su contenedor de `absolute top-8 right-0 ... w-56` a `absolute bottom-10 right-2 ... w-60` (queda como secundaria clara debajo-derecha de la principal). Ajustar en preview si hace falta.

- [ ] **Step 3: Aire del contenedor hero (opcional, si se ve apretado en preview)**

Si el hero se ve cargado, subir el gap del grid `gap-12`→`gap-16` en el `<div class="relative max-w-6xl ... grid lg:grid-cols-2 gap-12 ...">` (~191). Verificar en preview.

- [ ] **Step 4: Build + verificación visual**

```bash
wsl bash -lc "cd /var/www/html/credify && npm run build 2>&1 | grep -iE 'error|built in'"
```
Expected: sin errores.

Preview (dev server o build servido por Laravel): abrir `/`, confirmar hero con titular dominante, 2 cards limpias (principal + mora), emerald, y responsive en 375/768/1280 (las cards están `hidden lg:block` — en móvil solo el texto, correcto).

- [ ] **Step 5: Commit**

```bash
git add resources/views/welcome.blade.php
git commit -m "feat(landing): hero con titular dominante + 2 cards (rebalance del cluster)"
```

---

### Task 3: Cuerpo — aire + tarjetas sobrias

Ajustes de ritmo/tipografía en las secciones del cuerpo (Beneficios, Para quién, Precios, Promesa, FAQ, CTA final). El color ya lo resolvió Task 1; aquí es **aire + consistencia**. Cambios pequeños y verificados en preview.

**Files:**
- Modify: `resources/views/welcome.blade.php` (~319–748)

- [ ] **Step 1: Ritmo vertical consistente**

Las secciones ya usan `py-24` (Beneficios/Para quién/Precios/FAQ) y `py-16` (Promesa). Homogeneizar el aire: dejar `py-24 md:py-28` en las 4 secciones de contenido para más respiro (buscar cada `<section ... class="py-24 ...">` y añadir `md:py-28`). La Promesa (`py-16`) se deja como banda más compacta a propósito.

- [ ] **Step 2: Títulos de sección uniformes**

Confirmar que los `<h2>` de sección comparten `text-4xl md:text-5xl font-extrabold tracking-tight` (ya lo hacen — ver ~349/443/550/634). Si alguno difiere, alinearlo. No cambiar el texto.

- [ ] **Step 3: Tarjetas sobrias y consistentes**

Las tarjetas de Beneficios/Roles/Precios usan la clase `.bento` (hover lift) + bordes/tintes. Unificar el acento a emerald (ya via Task 1) y asegurar que todas usen el mismo patrón de borde/sombra suave (`.bento` + `border border-slate-100`/`shadow`); corregir cualquier card que use un estilo divergente para que respire igual. Ajustes puntuales guiados por el preview — no reescribir contenido.

- [ ] **Step 4: Build + verificación visual (secciones)**

```bash
wsl bash -lc "cd /var/www/html/credify && npm run build 2>&1 | grep -iE 'error|built in'"
```
Preview: recorrer las secciones — más aire, acento emerald consistente, tarjetas homogéneas. Responsive 375/768/1280.

- [ ] **Step 5: Commit**

```bash
git add resources/views/welcome.blade.php
git commit -m "style(landing): aire y tarjetas sobrias en el cuerpo"
```

---

### Task 4: Verificación holística + CHANGELOG

**Files:**
- Modify: `CHANGELOG.md`

- [ ] **Step 1: Verificación final**

```bash
wsl bash -lc "cd /var/www/html/credify && grep -cE 'teal-|cyan-' resources/views/welcome.blade.php && npm run build 2>&1 | grep -iE 'error|built in'"
```
Expected: `0` (sin teal/cyan) + build sin errores.

Preview del navegador (before/after screenshots para el usuario):
- Hero: titular dominante, 2 cards, emerald, sin cyan.
- Cuerpo: aire, tarjetas sobrias, acento emerald consistente en las 6 secciones.
- Responsive 375 / 768 / 1280.
- `prefers-reduced-motion`: con el emulador de reduced-motion, las animaciones (`animate-*`) se detienen (el bloque `@media (prefers-reduced-motion: reduce)` ya existe).

- [ ] **Step 2: CHANGELOG**

Bajo `## [Sin publicar]` → `### Cambiado` (créala si no existe), añadir: elevación visual de la landing (`welcome.blade.php`) — paleta unificada a emerald (fuera teal/cyan), hero con titular dominante + cluster reducido a 2 cards, y cuerpo con más aire y tarjetas sobrias; solo diseño, sin cambios de copy/estructura/backend. Ref al spec.

- [ ] **Step 3: Commit**

```bash
git add CHANGELOG.md
git commit -m "docs(landing): CHANGELOG elevación visual de la landing"
```

---

## Self-Review (cobertura vs. spec)

- **Paleta emerald sin teal/cyan (81 ocurrencias + 4 hex del `<style>`):** Task 1 (sed + retono + grep=0). ✅
- **Hero titular dominante + aire + 2 cards:** Task 2 (h1 `lg:text-7xl`, borrar card WhatsApp + badge, reposicionar mora). ✅
- **Cuerpo aire + tarjetas sobrias + jerarquía:** Task 3. ✅
- **Se conserva** cuerpo-claro/hero-oscuro, contenido, motion + `prefers-reduced-motion`: ningún task los toca. ✅
- **Compile gotcha:** verificado en Task 1 Step 3 + Task 4 Step 1 (build + render). ✅
- **SEO fuera de alcance:** no aparece en el plan (track aparte). ✅

**Placeholders:** ninguno `TBD/TODO`; los "ajustar en preview si hace falta" son verificaciones visuales legítimas (no hay runner JS; el preview ES la verificación), con valores concretos de partida en cada paso.

**Consistencia:** los tonos emerald usados (`#059669/#10b981/#34d399/#6ee7b7` + rgba equivalentes) son los de marca de la app, consistentes entre el `<style>` y las utilidades `emerald-*`. Las clases referenciadas (`.gradient-text-hero`, `.hero-card`, `.bento`, `animate-*`) existen en el archivo.