sinapse-ai 1.8.0 → 1.9.1

package/squads/squad-artdir/knowledge-base/case-nyo-ia-reference.md

@@ -1,289 +0,0 @@
-# Case Study: nyo.ia.br — Canonical Art Direction Reference
-
-> Analise completa do site nyo.ia.br como referencia canonica de art direction para conversao.
-> Cada decisao estetica e desconstruida pelo principio psicologico que a sustenta.
-
----
-
-## Overview
-
-**URL:** https://nyo.ia.br
-**Categoria:** AI Agents SaaS (B2B)
-**Audiencia:** Founders, CTOs, VPs de Vendas (Brasil)
-**Posicionamento:** "Seus agentes de IA nunca dormem" — automacao agressiva com resultado concreto
-
----
-
-## 1. Visual Language Analysis
-
-### Dark Mode Decision
-
-| Decisao | Justificativa Psicologica |
-|---------|--------------------------|
-| Background: neutral-950 (#0a0a0a aprox.) | Sofisticacao tech, reducao de fadiga, imersao |
-| Nao e true black (#000) | Evita "void" feeling, mantém profundidade |
-| Text: neutral-100 (off-white) | Contraste alto sem glare de pure white |
-| Accent: red-orange (#E8402D) | Von Restorff — unico elemento quente em campo frio |
-
-**Principios em acao:** Von Restorff (accent destoa), Authority (dark = sofisticacao), Contrast (legibilidade)
-
-### Accent Color Strategy
-
-```
-Toda a pagina: neutral dark + neutral light
-UNICO elemento com cor quente: CTAs e highlights em red-orange
-
-→ Von Restorff effect maximizado
-→ Quando TUDO e frio, o QUENTE converte
-→ Accent usado em: botoes CTA, badges, hover states, progress indicators
-```
-
-**Principio:** Max 1 accent rule — restricao forca atencao para os pontos de conversao
-
-### Density Level
-
-- **Alta densidade de informacao** — cada viewport tem conteudo substancial
-- Nao ha secoes "vazias" — ate o espaco e intencional
-- Dados, metricas, agentes — informacao densa para audiencia tecnica
-- **Principio:** Audiencia tech/founder espera densidade — low-density pareceria "empty"
-
-### Visual Identity Signals
-
-| Sinal | O que Comunica | Como Comunica |
-|-------|---------------|---------------|
-| "//" prefix em textos | "Somos builders, somos codigo" | Estetica terminal/code |
-| Monospace accent | Precisao tecnica | JetBrains Mono / Space Mono |
-| Dark mode | Sofisticacao, tech-native | Ambiente dev-like |
-| Metrics visuals | Data-driven, transparencia | Numeros grandes, counters |
-| Live clock | Presenca real-time | Relogio local no header |
-
----
-
-## 2. Motion Philosophy
-
-### Core Motion Decisions
-
-| Tecnica | Implementacao | Principio |
-|---------|--------------|-----------|
-| Lenis smooth scroll | Smooth scrolling nativo, nao browser default | Controle da experiencia, premium feel |
-| GSAP ScrollTrigger | Scroll-driven animations para reveals | Progressive disclosure via scroll |
-| Frame sequence | 60+ frames como image sequence pinned | Cinema-level hero, impressao de premium |
-| Text scramble | Caracteres randomicos → texto final | Tech aesthetic, anticipation principle |
-| Marquee scroll-direction | Inverte direcao baseado no scroll | Engagement, surpresa, interatividade |
-| Clip-path reveal | Sections revelam via clip-path morph | Staging, storytelling, drama |
-
-### Frame Sequence Hero
-
-```
-60+ imagens renderizadas
-Pinned section com ScrollTrigger
-Scroll position → frame index mapping
-Efeito: usuario "controla" a animacao com scroll
-
-Principios:
-- Anticipation: scroll como trigger cria expectativa
-- Control: usuario sente agency sobre a experiencia
-- Zeigarnik: scroll incompleto = narrativa incompleta → scroll mais
-```
-
-### Text Scramble Effect
-
-```
-"■▓▒░█▓▒" → "AGENTES" → "AGENTES DE IA"
-
-Sequence:
-1. Random chars aparecem (noise)
-2. Chars gradualmente resolvem para texto correto
-3. Left-to-right ou simultaneous reveal
-
-Principios:
-- Anticipation (Disney): buildup antes do reveal
-- Curiosity gap: o que esse texto vai dizer?
-- Tech aesthetic: "decodificando" — reforça posicionamento AI
-```
-
-### Marquee com Scroll Direction
-
-```
-Scroll para baixo → marquee move para direita
-Scroll para cima → marquee inverte para esquerda
-
-Principios:
-- Secondary action (Disney): movimento secundário ao scroll
-- Engagement: conteudo responde ao usuario
-- Continuity (Gestalt): direcao consistente com scroll
-```
-
-### Body Lock em Modals
-
-```
-Modal abre → body scroll trava
-Focus trap dentro do modal
-Escape ou click outside fecha
-
-Principios:
-- Staging (Disney): modal e o unico palco ativo
-- Focus: elimina distracao do background
-- Commitment: usuario engajou, agora complete a acao
-```
-
-### Progress Bars e Indicators
-
-```
-Barra fixa no topo que avanca com scroll
-Indica progresso na pagina
-
-Principios:
-- Zeigarnik: barra incompleta = tarefa incompleta → scroll mais
-- Goal gradient: "80% — quase la" → esforco aumenta
-- Cognitive fluency: usuario sabe onde esta
-```
-
----
-
-## 3. IA as Psychological Tool
-
-### Information Architecture Breakdown
-
-| Secao | Papel Cognitivo | Principio |
-|-------|----------------|-----------|
-| 1. Hero com frame sequence | HOOK — impacto visual + curiosity gap | Von Restorff, Zeigarnik |
-| 2. "AI Agents never sleep" | PROMISE — beneficio central | Framing (always-on) |
-| 3. Agent showcase carousel | DEMONSTRATE — o que cada agente faz | Progressive disclosure |
-| 4. Agent modals | DEEP DIVE — expandir detalhes por agente | Zeigarnik (abrir = completar) |
-| 5. Metrics section | PROOF — numeros concretos | Anchoring, authority |
-| 6. Comparison table | COMPARE — nos vs alternativas | Framing, anchoring |
-| 7. Testimonials | PROOF (social) — clientes reais | Social proof |
-| 8. FAQ | OVERCOME — resolver objecoes | Risk reversal |
-| 9. CTA final | CONVERT — multiplas opcoes | Hick's (limitado), commitment |
-| 10. Footer com trust | REINFORCE — ultima impressao | Peak-end rule |
-
-### Progressive Disclosure via Agent Modals
-
-```
-Carousel → mostra 10 agentes como cards
-Cada card: nome + icone + one-liner
-Click → modal expande com:
-  - Descricao detalhada
-  - Features especificas
-  - Metricas de resultado
-  - CTA contextual
-
-Principios:
-- Progressive disclosure: L1 (card) → L2 (modal)
-- Zeigarnik: card mostra parcial → click para completar
-- Hick's Law: 10 opcoes MAS so uma por vez no modal
-```
-
-### Comparison Table Strategy
-
-```
-| Feature     | Eles   | NYO      |
-|-------------|--------|----------|
-| Agentes AI  | 3      | 10       |
-| Uptime      | 99.5%  | 99.97%   |
-| Resposta    | 2h     | 2min     |
-| Preco       | $$$    | $$       |
-
-Coluna NYO: highlighted com accent color
-
-Principios:
-- Anchoring: numeros concorrentes sao a ancora
-- Framing: features escolhidas favorecem NYO
-- Von Restorff: coluna highlight = focal point
-```
-
-### FAQ como Objecao Handling
-
-```
-Cada pergunta = uma objecao comum
-Respostas curtas, diretas, com link para proof
-
-"E se eu quiser cancelar?" → "Cancele quando quiser, sem multa"
-"Funciona com meu CRM?" → "Integramos com +50 CRMs. Lista completa"
-
-Principios:
-- Risk reversal: remove medo
-- Cognitive fluency: resposta simples = mais crivel
-- Commitment: ler FAQ = micro-compromisso com a decisao
-```
-
-### Multiple CTAs Strategy
-
-```
-CTA #1 (hero): "Agendar demonstracao" — alto compromisso
-CTA #2 (mid-page): "Comece gratis" — baixo compromisso
-CTA #3 (modal): "Fale com vendas" — personalizado
-CTA #4 (sticky bar): "Agende uma demo" — persistente
-CTA #5 (footer): "Comece agora" — ultima chance
-
-Principios:
-- Diferentes niveis de intencao: explore → learn → try → buy
-- Hick's Law respeitada: max 2 opcoes por viewport
-- Availability: CTA sempre visivel, sempre acessivel
-```
-
-### Real Social Handles
-
-```
-Testimonials incluem @username do Twitter/LinkedIn
-Verificavel — usuario pode checar se e real
-
-Principio:
-- Verifiability: proof que pode ser validado = mais confiavel
-- Authority: handles reais > "Joao, CEO"
-- Social proof: publico, nao anonimo
-```
-
----
-
-## 4. CRO Patterns Applied
-
-### Pattern Map
-
-| Padrao | Localizacao | Principio | Impacto Estimado |
-|--------|-----------|-----------|-----------------|
-| Frame sequence hero | Topo | Engagement, premium perception | +20-30% time on page |
-| Live clock | Header | Real-time presence, tech signal | +5% credibility |
-| Agent carousel | Mid-page | Progressive disclosure | +15% engagement |
-| Comparison table | Pre-CTA | Anchoring, framing | +15-25% conversion |
-| Sticky CTA | After hero | Availability | +15-25% CTA visibility |
-| Testimonials + handles | Post-compare | Social proof (verifiable) | +10-20% trust |
-| FAQ accordion | Pre-footer | Objection handling | +10% reduction in bounce |
-| Multiple CTAs | Throughout | Intent capture | +10-15% total conversion |
-| Progress bar | Fixed top | Zeigarnik, goal gradient | +5-10% scroll depth |
-| Text scramble | Hero + sections | Tech aesthetic, curiosity | +10% time on page |
-
----
-
-## 5. Lessons for Art Direction
-
-### O que Copiar (princípios)
-
-1. **Single accent color** — restricao maximiza Von Restorff
-2. **Dark mode + density** — match com audiencia tech
-3. **Scroll as narrative** — usuario controla o ritmo
-4. **Progressive disclosure via modals** — L1 overview → L2 detail on demand
-5. **Real social proof** — handles verificaveis, numeros concretos
-6. **Multiple intent CTAs** — capture diferentes niveis de compromisso
-7. **FAQ as objection handling** — cada pergunta e uma venda
-
-### O que NAO Copiar (execucao especifica)
-
-1. **Frame sequence exato** — necessita 60+ renders custom, high cost
-2. **Text scramble em tudo** — use com parcimonia, senao perde efeito
-3. **Custom cursor** — nao presente neste site, adicionar apenas se fizer sentido
-4. **Exata paleta de cor** — extract o principio (high contrast accent on dark), nao os hex codes
-
-### O que Entender (gatilhos)
-
-> "Nunca clone sem entender qual gatilho cada elemento ativa."
-
-| Elemento | Gatilho que Ativa | Se Remover, Perde |
-|---------|-------------------|-------------------|
-| Frame sequence | Agency do usuario + premium perception | Engagement hero, time on page |
-| Text scramble | Curiosity + tech positioning | Brand differentiation |
-| Live clock | Real-time trust | Subtle authority signal |
-| Marquee reversal | Engagement via interactivity | Secondary motion richness |
-| Progress bar | Zeigarnik + goal gradient | Scroll completion |
-| Agent modals | Progressive disclosure depth | Detail without overwhelm |