Cómo crear landing pages cinematográficas con Claude

npm install -g @anthropic-ai/claude-code
claude

# MEGA-PROMPT — Cinematic Landing Page (Discovery + Auto-Build)

Pegá este documento completo en Claude como UN SOLO prompt. El modelo primero hace las 4 preguntas de discovery, espera tu respuesta, y luego construye la app de Vite completa de una sola vez.

---

## 0. BRIEF

Estás construyendo un sitio de marketing premium en el espíritu de Apple, Stripe, Linear y Vercel. Editorial, cinematográfico, liquid-glass. Dark theme por defecto. Mobile-first pero optimizado para 1440px como canvas principal.

Stack no negociable:
- Vite + React 18 + TypeScript
- Tailwind CSS v4 (con directiva @theme)
- shadcn/ui (button, accordion)
- Framer Motion (motion/react) para todo el movimiento
- lucide-react para íconos
- @fontsource/* para fuentes self-hosted

Intención de diseño:
- Editorial, premium, cinematográfico. Revista de moda meets SaaS.
- Cada espaciado, radio de borde y peso de fuente es intencional.
- Cero AI-slop: sin emojis decorativos, sin gradientes violet/purple por defecto, sin sombras de stock, sin lorem ipsum.

Definición de éxito: npm run dev levanta al primer intento, las 9 secciones renderizan con copy real en el idioma del usuario, las animaciones son fluidas, los marquees looopean sin cortes, el FAQ accordion funciona, sin errores de consola, sin assets faltantes.

---

## 1. DISCOVERY — PREGUNTAR ANTES DE CONSTRUIR

Antes de escribir una sola línea de código, enviá al usuario este mensaje con las 4 preguntas juntas y numeradas. No las hagas una por una. No empieces a codear antes de que responda. Hacelas en el idioma del usuario.

---

Antes de armar el sitio necesito 4 cosas. Respondé en un solo mensaje:

1. NEGOCIO
   ¿Cómo se llama la marca/producto y qué hace en 1-2 frases?
   (Ej: "Aurix — CRM con supervisión IA para inmobiliarias en LATAM y España")

2. NICHO
   ¿Quién es el cliente ideal? Edad/perfil, industria, país o región.
   (Ej: "Brokers de real estate, 30-55, oficinas medianas en Argentina, México, Madrid")

3. USO DE LA WEB
   ¿Cuál es la ÚNICA acción que querés que haga el visitante?
   (Ej: agendar demo, dejar email para waitlist, comprar, contactar, registrarse gratis)

4. COLORES Y ESTILO
   Elegí 3-5 palabras que describan el vibe + opcional 1-2 colores guía.
   Opciones: editorial / lujo / brutalist / futurista / minimalista / técnico /
   orgánico / agresivo / luminoso / oscuro / humano / corporativo.
   (Ej: "lujo + editorial + oscuro, ochre y terracotta")
   Si decís "auto" elijo yo según el negocio.

---

Esperá la respuesta. No inferas. No asumas.

---

## 2. AUTO-DECISIONES — DESPUÉS DE QUE EL USUARIO RESPONDE

Con los 4 inputs, tomá el resto de las decisiones internamente y en silencio. No mostrés un checklist; simplemente construí.

Del NEGOCIO:
- BRAND_NAME (el nombre que dieron)
- TAGLINE — línea memorable de 3-6 palabras que resume el valor, no las features
- Logo: si no dieron uno, generá un wordmark SVG minimalista en /public/logo.svg

Del NICHO:
- LANG — match con el idioma y región (ej: es-AR, pt-BR, en-US)
- Registro de copy — técnico para devs, status-driven para lujo, directo para SMBs

Del USO DE LA WEB:
- CTA_LABEL — verbo sin fricción: "Empezar gratis" / "Agendar demo" / "Acceder". Nunca "Comprar ahora" o "Contratar".
- Orden de secciones — default: Hero → Services → Why Us → Process → Stats → Testimonials → FAQ → CTA

Del ESTILO:
- 4 tokens de color HSL: INK (fondo, nunca negro puro), CREAM (frente, nunca blanco puro), OCHRE (acento primario), TERRA (acento secundario)
- 2 fuentes de @fontsource: FONT_DISPLAY (editorial, con personalidad, nunca Inter/Roboto) + FONT_BODY (legible, neutral)

Copy completo en el idioma del usuario:
- HERO_HEADLINE — 2-5 palabras. Lo que cambia en la vida del visitante, no lo que hace el producto.
- HERO_SUB — 1-2 frases. La promesa de resolución.
- PARTNERS — 5-6 nombres plausibles de partners/clientes del nicho
- SERVICES — 6 items con {icon, title, body}
- REASONS — 4 items con {icon, title, body}
- PROCESS_STEPS — 3-4 items con {n, title, body}
- STATS — 4 items con {value, label}. Números plausibles, no claims vagos.
- TESTIMONIALS — 6 items con {quote, name, role}
- FAQ_ITEMS — 5-8 items con {q, a} cubriendo objeciones reales del ICP
- CTA_HEADLINE + CTA_SUB — copy del beat final

---

## 3. BOOTSTRAP DEL PROYECTO

npm create vite@latest . -- --template react-ts
npm install
npm install -D tailwindcss@next @tailwindcss/vite @tailwindcss/postcss autoprefixer
npm install motion lucide-react
npm install @fontsource/[FONT_DISPLAY] @fontsource/[FONT_BODY]
npx shadcn@latest init -d
npx shadcn@latest add button accordion

Estructura de archivos:
src/
  App.tsx
  main.tsx
  index.css
  components/
    Navbar.tsx        — pill flotante liquid-glass, links, CTA, scroll behavior
    Hero.tsx          — Pattern A (SaaS/split) o Pattern B (lujo/centrado)
    ServicesBento.tsx — bento asimétrico: 1 tall + 3 small + 1 wide + 1 small
    WhyUs.tsx         — 4 columnas de pilares de confianza
    Process.tsx       — 3-4 pasos numerados con líneas conectoras
    Stats.tsx         — 4 métricas sobre fondo aurora
    Testimonials.tsx  — 2 filas marquee en direcciones opuestas
    Faq.tsx           — layout editorial: título sticky + acordeón
    CtaFooter.tsx     — headline italic gigante + CTA + footer
    BlurText.tsx      — animación stagger por palabra con useInView
    AnimatedGradient.tsx — aurora CSS de 3 gradientes radiales animados
    ui/
      button.tsx      — agregar variantes: hero, heroGlass, heroSolid
      accordion.tsx
  lib/
    utils.ts
public/
  logo.svg

---

## 4. DESIGN TOKENS

En src/index.css, encima de @import "tailwindcss":

Importar los pesos de cada fuente (300, 400, 500, 600, 700 para display; 300-600 para body).

Variables CSS en :root:
- --ink, --cream, --ochre, --terra (los 4 tokens de color en HSL)
- Mapear a --background, --foreground, --card, --primary, --secondary, etc.
- --muted: 240 4% 16%
- --border: 40 30% 90% / 0.18
- --radius: 0.75rem
- --font-display y --font-body
- --gutter: clamp(20px, 4.2vw, 56px)
- --max: 1440px

---

## 5. UTILIDADES LIQUID-GLASS

En @layer components dentro de index.css:

.liquid-glass:
- background: rgba(255,255,255,0.01), backdrop-filter blur(4px)
- ::before con border gradiente de rgba(255,255,255,0.45) a transparent y de vuelta

.liquid-glass-strong:
- backdrop-filter blur(50px)
- ::before con borde más intenso (0.50 en los extremos)

.gradient-fade-t y .gradient-fade-b: linear-gradient hacia el background

.noise::after: textura fractalNoise SVG inline, opacity 0.5, mix-blend-mode overlay

---

## 6. TAILWIND v4 CONFIG

Dentro de index.css, bloque @theme:
- Mapear todos los tokens de color
- Declarar --font-display y --font-body
- Radios: sm, md, lg, xl, 2xl, 3xl
- Animaciones: marquee 28s, marquee-rev 32s, fade-up 0.7s, aurora 18s

@keyframes:
- marquee: translateX(0) a translateX(-50%)
- marquee-rev: translateX(-50%) a translateX(0)
- fade-up: opacity 0 + y 24px + blur(6px) a opacity 1 + y 0 + blur(0)
- aurora: translate + scale suave entre 0%, 50% y 100%

---

## 7. VARIANTES DE BOTÓN

En src/components/ui/button.tsx, dentro del cva de buttonVariants:

hero:      bg-primary text-primary-foreground rounded-full px-7 py-3.5 text-base font-medium tracking-[-0.01em]
heroGlass: liquid-glass-strong text-foreground rounded-full px-7 py-3.5 text-base font-normal tracking-[-0.01em]
heroSolid: bg-foreground text-background rounded-full px-7 py-3.5 text-base font-medium tracking-[-0.01em]

---

## 8. ANIMATEDGRADIENT

Componente que reemplaza todos los fondos de video. Tres gradientes radiales borrosos derivando sobre los keyframes de aurora:
- blob 1: -top-1/4 -left-1/4, w/h 80vw, bg-primary/40, blur-[120px], animate aurora
- blob 2: top-1/3 -right-1/3, w/h 70vw, bg-secondary/35, blur-[140px], delay -6s
- blob 3: -bottom-1/4 left-1/4, w/h 60vw, bg-primary/25, blur-[160px], delay -12s
- overlay: radial-gradient transparente al 40%, background al 100%

Props: className, intensity ("low" | "medium" | "high") que controla opacity.

---

## 9. BLURTEXT

Componente de animación de headline. Divide el texto en palabras, anima cada una con stagger:
- initial: filter blur(10px), opacity 0, y 24
- animate cuando entra en viewport (useInView, once: true, amount 0.3)
- transition: 0.7s, cubic-bezier(0.22, 1, 0.36, 1), delay = startDelay + i * delay
- delay por defecto entre palabras: 0.07s

Props: text, className, delay, startDelay, as (tag HTML).

---

## 10. LAS 9 SECCIONES

NAVBAR: pill flotante liquid-glass, fixed top-4, reduce a top-2 en scroll > 40px con useScroll. Logo + brand name a la izquierda, 4-5 links al centro (hidden md), CTA heroSolid a la derecha. Mobile: ícono hamburguesa con sheet full-screen.

HERO — elegir patrón según negocio:
- Pattern A (SaaS/B2B/técnico): split editorial, headline izquierda, mockup SVG/JSX derecha
- Pattern B (lujo/agencia/marca): centrado monumental, headline que ocupa la pantalla
Reglas de ambos: headline font-display uppercase leading-0.92 max-14ch, atmósfera solo de AnimatedGradient, CTA: 1 hero + 1 heroGlass. Partners al pie en flex wrap o marquee.

SERVICES BENTO: grid asimétrico. Cards liquid-glass rounded-2xl con whileHover y:-4, ícono en pill liquid-glass-strong, título font-display uppercase, cuerpo font-body text-sm, ArrowUpRight top-right.

WHY US: grid 4 columnas. Cada card: ícono, título font-display uppercase, cuerpo, línea degradé h-px from-primary.

PROCESS: pasos numerados. Número gigante text-[140px] text-primary/25 en background. Línea horizontal conectora en desktop. Stack vertical en mobile.

STATS: sección sobre AnimatedGradient intensity="low". Card liquid-glass con grid 4 columnas. Valores font-display italic text-7xl con animación de conteo desde 0.

TESTIMONIALS MARQUEE: 2 filas en direcciones opuestas. Array duplicado para loop seamless. Mask gradient en bordes. Pausa en hover. Cards w-[400px] shrink-0.

FAQ ACCORDION: grid cols [0.9fr 1.1fr]. Izquierda: título sticky + subtítulo + botón contacto. Derecha: Accordion shadcn, triggers font-display uppercase, estado abierto text-primary.

CTA + FOOTER: headline italic gigante en AnimatedGradient intensity="high". Gradiente fade en top y bottom. Dos CTAs. Footer con copyright y 4 links.

---

## 11. PATRONES DE ANIMACIÓN (4, no más)

1. BlurText — headings. Stagger por palabra, 0.07s entre palabras, 0.7s por palabra.
2. Fade-up-on-view — subtextos y CTAs. initial: opacity 0, y 16, blur(8px). whileInView: opacity 1, y 0, blur(0).
3. Marquee — partners y testimoniales. 28s/32s, mask gradient en bordes, pausa en hover.
4. AnimatedGradient aurora — hero, stats, CTA. Tres blobs drifting.

---

## 12. APP.TSX

Importar y componer en este orden:
Navbar, Hero, ServicesBento, WhyUs, Process, Stats, Testimonials, Faq, CtaFooter.
Wrapper: div con bg-background text-foreground min-h-screen.

---

## 13. GUARDRAILS

- Sin emojis en ninguna parte
- Sin gradientes violet/purple a menos que el usuario los pida explícitamente
- Sin shadow-2xl en cards — solo el borde ::before y el inset highlight
- Botones: rounded-full. Cards: rounded-2xl. Pills internas: rounded-full.
- Sin lorem ipsum ni placeholders en el output final
- text-center solo en Hero Pattern B y CTA final
- Headings: font-display uppercase O font-display italic — nunca los dos en el mismo elemento
- Sin etiquetas video en ninguna parte
- El sitio completo en el idioma del usuario
- Responsive: limpio en 375px sin overflow horizontal
- Accesibilidad: focus-visible:ring-2 en todos los elementos interactivos

---

## 14. VERIFICACIÓN FINAL

Antes de terminar, verificar:
- npm run dev levanta sin errores
- npm run build completa sin errores TypeScript ni Vite
- Hero renderiza en el primer paint sin FOUC
- Marquee loopea sin saltos visibles
- FAQ accordion abre y cierra con animación de altura
- Navbar reduce offset en scroll
- Mobile 375px: sin overflow, bento en una columna, marquee animado

---

## 15. ORDEN DE EJECUCIÓN

1. Enviar las 4 preguntas de la Sección 1. Detenerse. Esperar.
2. Con las respuestas, tomar todas las decisiones de la Sección 2 en silencio.
3. Construir la app completa de Vite siguiendo las Secciones 3-13.
4. Correr el checklist de la Sección 14 e informar resultado.

No hacer preguntas adicionales. No saltear el discovery. Sin Next.js. Sin video tags. Sin placeholders vacíos en el código final. Build it.

1. NEGOCIO: Lumina — clínica de estética facial y tratamientos con aparatología en Córdoba
2. NICHO: mujeres 30-55, clase media-alta, que buscan tratamientos sin cirugía. Córdoba capital, Argentina
3. USO DE LA WEB: que agenden una consulta de valoración gratuita
4. COLORES Y ESTILO: lujo + luminoso + orgánico, tonos nude y dorado suave

mkdir mi-landing && cd mi-landing

npm install
npm run dev

npm install -g vercel
vercel