# LP Camisa — Features & Melhorias UX/UI

## Contexto

A landing page atual é uma página de produto única (single-file HTML) para a Camisa Oficial do Brasil Copa 2026. A base já é sólida: glassmorphism, cores brasileiras, countdown, carrossel, reviews, FAQ e sticky bar. O objetivo aqui é **refinar e elevar** cada elemento sem alterar a identidade visual ou a estrutura de conversão — menos "reformar", mais "polir até brilhar".

---

## 1. Tipografia — Troca de Fonte

### Problema Atual
- **Barlow Condensed + Barlow + Syne** funcionam, mas o conjunto não tem personalidade forte o suficiente para uma edição limitada de Copa do Mundo. Barlow Condensed é muito genérica para um produto premium de edição limitada.

### Proposta

| Papel | Fonte Atual | Fonte Nova | Motivo |
|---|---|---|---|
| Display / Headlines | Barlow Condensed 900 | **Bebas Neue** | Mais impacto visual, amplamente associada a sportswear premium (Nike, Adidas). Zero-serif, condensada, tensão máxima. |
| Subheadings / Labels | Syne 700–800 | **Space Grotesk 700** | Geométrica moderna, techy, melhor legibilidade em tamanhos médios, harmonia com Bebas. |
| Body / Descriptions | Barlow 400–600 | **Inter 400–500** | Padrão ouro para leitura em tela, melhor legibilidade em tamanhos pequenos, ampla cobertura de caracteres PT-BR. |

**Import Google Fonts:**
```html
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
```

**Mapeamento de variáveis CSS:**
```css
--font-display: 'Bebas Neue', sans-serif;
--font-heading: 'Space Grotesk', sans-serif;
--font-body: 'Inter', sans-serif;
```

> **Resultado esperado:** Headlines com muito mais força e identidade esportiva, corpo de texto mais limpo e profissional.

---

## 2. Melhorias por Seção

---

### 2.1 Announcement Bar

**Atual:** Texto corrido em loop simples com fundo amarelo.

**Melhorias:**
- Adicionar **ícone animado** (⚽ ou bandeira) que gira/pulsa suavemente antes do texto
- Separar os highlights com `·` e tornar cada ponto **bold** isoladamente (ex: `Frete Grátis · 12x Sem Juros · Entrega em 2–5 dias`)
- Considerar uma segunda mensagem alternando via fade: `"Só restam X unidades no tamanho M"` — urgência dinâmica baseada no tamanho selecionado

---

### 2.2 Header

**Atual:** Logo texto + badge + botão CTA. Glassmorphism funcional.

**Melhorias:**
- **Logo:** Adicionar um micro-ícone de escudo da CBF ou losango verde ao lado de "VERDE&OURO" para tornar a marca mais visual
- **Progress de scroll:** Uma linha de progresso verde (`3px`) abaixo do header que avança conforme o usuário desce — sutil indicador de posição na página
- **CTA do header:** Adicionar micro-animação de `wiggle` no botão "Comprar Agora" após 8s de inatividade para recapturar atenção
- **Mobile:** O badge "Loja Oficial · Copa 2026" pode sumir no mobile e dar espaço para o logo respirar melhor

---

### 2.3 Hero Section

**Atual:** Split 55/45 com carrossel + info. Sólido mas poderia ter mais tensão visual.

**Melhorias:**

#### Carrossel (esquerda)
- **Zoom sutil ao trocar de slide:** `scale(1.03)` na imagem entrante com `overflow: hidden` no container — efeito Ken Burns lite
- **Indicadores de progresso:** Substituir thumbnails por **barras de progresso finas** (`4px height`) que preenchem durante o auto-play — mais moderno e menos poluído visualmente
- **Badge flutuante** sobre a imagem: `"EDIÇÃO LIMITADA"` em amarelo, rotacionado -15deg, no canto superior esquerdo — como um "sticker" colado na foto
- **Efeito de paralaxe leve** no scroll dentro do hero (a imagem se move mais devagar que a página)

#### Conteúdo (direita)
- **Eyebrow:** Adicionar uma linha decorativa (`2px` verde) à esquerda do eyebrow text — detalhe de refinamento tipográfico
- **Preço:** O badge `-25%` pode ter um fundo gradiente verde→amarelo em vez de só amarelo sólido — mais premium
- **Seletor de tamanhos:** Ao selecionar um tamanho, animar o elemento com uma micro-vibração (`shake` 0.3s) e atualizar um texto contextual abaixo: `"Tamanho M — Guia de Medidas →"` como link
- **Botão CTA principal:** Adicionar ícone de `🛒` antes do texto com separador `|` e efeito de shimmer (brilho passando) em hover — mais atrativo
- **Urgência:** Abaixo dos botões, adicionar `"⚡ 47 pessoas viram isso hoje"` ou `"🔴 Últimas 12 unidades no tamanho M"` — social proof dinâmico (atualizar baseado no tamanho selecionado)
- **Certificação:** Mini badges horizontais abaixo dos botões: `[Nike] [CBF] [SSL]` com ícones pequenos e texto micro — reforço de confiança no momento de decisão

---

### 2.4 Countdown Section

**Atual:** Fundo amarelo com contador. Funcional mas visualmente simples.

**Melhorias:**
- **Flip animation:** Cada dígito ao mudar executa uma animação de flip (card flip 3D) — clássico e eficaz para urgência
- **Background:** Gradiente diagonal amarelo→verde sutil em vez de amarelo sólido
- **Copy mais agressivo:** `"⏳ Oferta expira em — garanta o seu preço especial"` em vez da mensagem atual mais neutra
- **Ícone de relógio** pulsando suavemente à esquerda do contador
- **Separador animado:** Os `:` entre números piscando (opacity 0→1 a cada 1s) — detalhe clássico de countdown profissional

---

### 2.5 Trust Bar

**Atual:** Grid 4 colunas com ícone + texto. Ok, mas muito parecido com qualquer e-commerce.

**Melhorias:**
- **Ícones:** Substituir os SVGs atuais por ícones maiores (`40px`) com um **círculo de fundo** em verde escuro semi-transparente — mais presença visual
- **Divisores verticais:** Adicionar uma linha `1px` vertical entre os itens no desktop — separação mais clara
- **Hover nos itens:** Leve `scale(1.04)` + borda verde ao passar o mouse — feedback interativo
- **Número em destaque:** Para "Frete Grátis", adicionar em micro-texto `"em todo Brasil"`. Para "12x Sem Juros", destacar `"ou 5% no PIX"` em verde

---

### 2.6 Product Details (Features)

**Atual:** Lista 4 itens numerados com título e descrição. Layout 2 colunas.

**Melhorias:**
- **Numeração estilizada:** Os números `01`, `02`, `03`, `04` em fonte display grande (`80px`, `opacity: 0.08`) como watermark atrás de cada item — detalhe de design editorial
- **Animação on-scroll:** Cada item entra com `fade + slide-up` escalonado (stagger 100ms) ao entrar na viewport (Intersection Observer)
- **Tag da tecnologia:** Para o item Nike Dri-FIT ADV, adicionar a logo Nike em micro formato ou um badge `"DRITECHNOLOGY"` — associação de marca premium
- **Linha de progresso lateral:** Uma barra verde de `3px` à esquerda de cada item que preenche de cima para baixo ao fazer scroll — detalhe visual sofisticado
- **Grid de imagens:** A imagem grande poderia ter um overlay sutil com o texto `"Vista por Fora"` / `"Detalhe do Escudo"` etc em hover — contexto das fotos

---

### 2.7 Stats Section

**Atual:** 4 números grandes em amarelo. Grid 4 colunas.

**Melhorias:**
- **Counter animation:** Os números contam de zero até o valor final ao entrar na viewport (`countUp`) — muito mais impactante do que aparecer estático
- **Ícones acima dos números:** Pequeno ícone contextual acima de cada stat (camisa, estrela, relógio, coração) para escanear mais rápido
- **Separadores decorativos:** Linhas verticais `1px` em verde entre os stats no desktop
- **Background:** Uma textura de losangos verde escuro (padrão da camisa) como fundo — consistência visual com o produto

---

### 2.8 Reviews Section

**Atual:** Grid 3 colunas de cards de review. Sólido.

**Melhorias:**
- **Rating bar:** Acima dos cards, adicionar um breakdown de ratings (5★ 78%, 4★ 15%, 3★ 5%, etc.) com barras de progresso — aumenta credibilidade
- **Fotos de compradores:** Nos cards que têm avatar, usar um avatar circular com borda colorida indicando o número de estrelas (verde = 5★)
- **Badge "Compra Verificada":** Visual mais destacado — atualmente é pequeno. Tornar um badge verde com ícone de checkmark
- **Carousel em mobile:** Em vez de 1 coluna estática no mobile, transformar em carrossel horizontal deslizável com snap scroll
- **Foto do produto em uso:** Pelo menos 1 card poderia ter uma foto do cliente usando a camisa — UGC (User Generated Content) é o social proof mais poderoso

---

### 2.9 Guarantee Section

**Atual:** Badge circular central + lista 2 colunas.

**Melhorias:**
- **Badge:** Adicionar um anel de progresso animado ao redor do badge circular (`stroke-dasharray` animation) — chama atenção ao entrar na viewport
- **Ícones coloridos:** Cada item da lista com ícone em verde em vez de ícone genérico — mais calor visual
- **Selos:** Adicionar logos de meios de pagamento (Visa, Mastercard, Pix, Boleto) abaixo dos itens de garantia — contexto de segurança de pagamento
- **Copy:** `"Compre com Zero Risco"` poderia ser `"Sua Satisfação ou Devolvemos Tudo"` — mais emocional e direto

---

### 2.10 FAQ Section

**Atual:** Accordion simples. Funcional.

**Melhorias:**
- **Busca de FAQ:** Um pequeno input de busca no topo que filtra as perguntas em tempo real — feature útil se FAQ crescer
- **Numeração:** Adicionar número da pergunta `01.`, `02.` antes do texto — organização visual
- **Ícone de pergunta:** Trocar o ícone de toggle por `+` / `-` mais elegante e bem dimensionado
- **Link âncora:** Cada resposta poderia ter um link `"Falar com suporte →"` para WhatsApp ao final — captura de intenção para quem ainda tem dúvidas
- **Schema markup:** Adicionar `<script type="application/ld+json">` com FAQ schema — melhora SEO e pode gerar rich snippets no Google

---

### 2.11 Final CTA Section

**Atual:** Headline + preço + botão + nota de segurança.

**Melhorias:**
- **Imagem da camisa** ao fundo (posicionada à direita, com opacity baixa) — contexto visual no momento de decisão final
- **Social proof inline:** `"Junte-se a +38.000 torcedores"` logo acima do botão CTA
- **Botão:** Adicionar animação de `bounce` suave em loop (`transform: translateY(-3px)`) para atrair o clique
- **Nota de segurança:** Expandir os ícones de segurança para incluir logos reais (Mercado Pago, PagSeguro ou similar) — mais tangível
- **Âncora de retorno:** `"← Ver mais detalhes do produto"` link que volta ao hero suavemente — para quem chegou até aqui sem converter

---

### 2.12 Footer

**Atual:** 4 colunas funcionais, bem estruturado.

**Melhorias:**
- **WhatsApp button:** O link do WhatsApp poderia ser um botão verde estilizado em vez de texto simples — mais clicável
- **Newsletter field:** Um input `"Receba alertas de reposição"` com botão — captura de leads para tamanhos esgotados
- **Social links:** Adicionar ícones de Instagram/TikTok — credibilidade de marca e canal de prova social
- **Selos de segurança:** Tornar os badges `SSL / Compra Protegida / Site Verificado` mais visuais, com ícones reais

---

### 2.13 Sticky Buy Bar (Liquid Glass)

**Atual:** Barra fixa no bottom, glassmorphism, seletor de tamanho e CTA.

**Melhorias:**
- **Animação de entrada:** `slide-up` mais expressivo com `spring easing` — a barra "saltando" da borda inferior
- **Feedback visual de tamanho:** Quando o tamanho está selecionado, o botão muda de cor/estado de forma mais visível
- **Preço com desconto:** Mostrar o preço riscado + preço atual lado a lado na barra — reforço do desconto no momento crítico
- **Pulse no CTA:** O botão "Comprar" da sticky bar pulsa suavemente (`box-shadow glow`) a cada 4s para atrair atenção

---

## 3. Melhorias Globais / Transversais

### 3.1 Micro-interações
- **Cursor personalizado:** No desktop, um cursor customizado com um losango verde pequeno — detalhe premium que impressiona
- **Ripple effect nos botões:** Efeito de onda ao clicar (como Material Design, mas em verde/amarelo)
- **Scroll indicator:** Ícone de seta animada no hero indicando "role para baixo" — sumir após primeiro scroll

### 3.2 Performance Visual
- **Skeleton loaders:** Para as imagens do carrossel, mostrar um skeleton animado (shimmer cinza) enquanto carregam
- **Lazy sections:** Sections abaixo da dobra com `content-visibility: auto` — melhora tempo de renderização

### 3.3 Acessibilidade
- **Skip link:** `"Ir para conteúdo principal"` visível no focus para leitores de tela
- **Contraste:** Revisar textos cinza `--gray-3` (#9A9A92) sobre fundo escuro — pode estar abaixo de WCAG AA em alguns contextos
- **Focus rings:** Uniformizar o estilo de foco em todos os elementos interativos

### 3.4 SEO / Metadados
- **Open Graph completo:** `og:image`, `og:title`, `og:description`, `og:price` com imagem do produto
- **Twitter Card:** `twitter:card: summary_large_image`
- **Canonical URL:** `<link rel="canonical" href="...">`
- **Schema Product:** JSON-LD com preço, disponibilidade, reviews aggregate — Google pode exibir rich snippets

### 3.5 Analytics / Conversão
- **UTM tracking:** Parâmetros de URL preservados no link de checkout
- **Scroll depth events:** Disparar eventos ao atingir 25%, 50%, 75%, 100% da página
- **Size selection tracking:** Evento ao selecionar cada tamanho
- **CTA click tracking:** Diferenciar cliques no hero vs sticky bar vs CTA final

---

## 4. Priorização Sugerida

| Prioridade | Item | Impacto em Conversão | Esforço |
|---|---|---|---|
| 🔴 Alta | Troca de fontes (Bebas Neue + Space Grotesk + Inter) | Alto | Baixo |
| 🔴 Alta | Counter animation nos Stats | Alto | Baixo |
| 🔴 Alta | Indicador de urgência dinâmico no hero (últimas unidades) | Alto | Médio |
| 🔴 Alta | Flip animation no Countdown | Alto | Médio |
| 🟡 Média | Zoom sutil no carrossel (Ken Burns lite) | Médio | Baixo |
| 🟡 Média | Progress bar de scroll no header | Médio | Baixo |
| 🟡 Média | Rating breakdown na seção de reviews | Médio | Baixo |
| 🟡 Média | Animações on-scroll (stagger) nos Product Details | Médio | Médio |
| 🟡 Média | FAQ Schema markup (SEO) | Médio | Baixo |
| 🟡 Média | Badge flutuante "Edição Limitada" no carrossel | Médio | Baixo |
| 🟢 Baixa | Cursor personalizado | Baixo | Médio |
| 🟢 Baixa | Skeleton loaders das imagens | Baixo | Médio |
| 🟢 Baixa | Newsletter no footer | Baixo | Médio |

---

## 5. Notas Finais

- Todas as melhorias mantêm a identidade Brasil (verde, amarelo, azul) e o tom urgente/premium da LP
- Nenhuma alteração estrutural é proposta — apenas refinamentos visuais, de copy e de micro-interações
- A troca de fontes é a melhoria com maior ROI por esforço: muda a percepção de qualidade do produto sem mexer em nada funcional
- As animações on-scroll usam `IntersectionObserver` (já disponível nativamente) — sem dependências externas
