# MarketingHero

> Componentes / Campanha (marketing) · Estado: **Em andamento** — Implementado e utilizável, mas ainda sem a validação completa de acessibilidade.

Topo de página de campanha, sobre foto escurecida: chapéu, título (`h1`), subtítulo, as chamadas e os sinais de confiança. Na variante `default`, tudo centrado num eixo; na `conversion`, o texto à esquerda e o cartão de preço à direita. Estrutura refeita na revisão 3 (E130).

- Função: Campanha (marketing)
- Também chamado de: topo de campanha, hero de campanha, landing, banner
- Mora em: `app/components/organisms/marketing/MarketingHero.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/MarketingHero](https://phorte-design-system.vercel.app/styleguide/peca/MarketingHero)
- Ficha no Storybook: [marketing-marketinghero](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/marketing-marketinghero--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/MarketingHero/0](https://phorte-design-system.vercel.app/previa/MarketingHero/0)
- Todas as peças: [https://phorte-design-system.vercel.app/llms.txt](https://phorte-design-system.vercel.app/llms.txt)

## Como usar no código

```tsx
import { MarketingHero } from '@/app/components/organisms/marketing/MarketingHero';

<MarketingHero />
```

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/MarketingHero/0)
2. [Sem destino](https://phorte-design-system.vercel.app/previa/MarketingHero/1)
3. [Conversão](https://phorte-design-system.vercel.app/previa/MarketingHero/2)
4. [Com destaques](https://phorte-design-system.vercel.app/previa/MarketingHero/3)

No topo de uma página de campanha ou de captação; `conversion` quando a oferta tem preço.

### Quando não usar

No topo da página inicial, use o Hero. No topo da página de eventos, o HeroCarousel.

### Faça

- Passe `title`, `subtitle` e `backgroundImage` da campanha; um `chapeu` curto ("Matrículas abertas") situa a oferta.
- Passe `ctaHref` e `ctaSecundarioHref`: cada chamada só aparece com o destino dela (E74); troque os textos com `rotuloDoCta` e `rotuloDoCtaSecundario`.
- Passe de dois a quatro `destaques` curtos e verdadeiros ("Credenciada pelo MEC", "+250 mil alunos").
- Na variante `conversion`, passe o cartão em `pricingCard` (o FloatingPricingCard).

### Evite

- Dois na mesma página: o título é `h1`.
- Foto clara sem conferir: o degradê cobre a maioria, mas o título precisa de 4,5:1 sobre o que ficar atrás.
- Destaque que não se prova: número de alunos, nota e credenciamento precisam ser reais.

### Anatomia

1. **Fundo** — A foto como imagem decorativa (`alt=""`), de ponta a ponta, com um degradê de `--ink` por cima que garante o contraste — de cima para baixo no `default`, da esquerda para a direita no `conversion`.
2. **Chapéu** — Opcional: pílula em `--sobre-escuro-medio`, 12px, caixa alta.
3. **Título** — `h1` em `--ink-inverse`, 36/48/60px (celular, tablet, computador), linhas equilibradas; aceita um trecho destacado em `--primary`.
4. **Subtítulo** — 18/20px, `--ink-inverse-muted`.
5. **Chamadas** — Buttons `lg` com `href`: a primária e, no `default`, a secundária contornada clara.
6. **Destaques** — Lista com o visto em `--secondary` e o texto em `--ink-inverse-muted`.
7. **Cartão de preço** — `conversion`: o `pricingCard`, à direita a partir de 1024px; embaixo do texto antes disso.

### Estados

| Estado | O que muda |
| --- | --- |
| Padrão | `variant="default"`: tudo centrado no mesmo eixo, até 768px de largura — testado na ficha. |
| Conversão | `variant="conversion"`: duas colunas a partir de 1024px; a chamada do texto some aí, onde o cartão de preço assume. |
| Sem destino | Sem `ctaHref` nem `ctaSecundarioHref`: sem chamadas. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Altura | Sai do conteúdo, com 80px de respiro (96px a partir de 1024px) — não mais 90% da tela com um vazio em volta (E130), testado na ficha. |
| Chamadas | Levam ao destino da prop; sem ela, não aparecem (E74, decisão de 2026-09-28) — testado na ficha. |
| Entrada | Sem animação: o HTML do servidor já sai com o título e as chamadas no lugar (E36). |

### Relacionados

- [FloatingPricingCard](https://phorte-design-system.vercel.app/styleguide/md/FloatingPricingCard.md) — O cartão de preço da variante de conversão.
- [Hero](https://phorte-design-system.vercel.app/styleguide/md/Hero.md) — O topo da página inicial.
- [PromoMarquee](https://phorte-design-system.vercel.app/styleguide/md/PromoMarquee.md) — A faixa promocional que costuma vir junto.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `title` | `React.ReactNode` | `( <> Transforme sua <span className="text-primary">carreira</span> hoje </> )` | não |  |
| `subtitle` | `string` | `'Aprenda com os melhores especialistas do mercado, com aulas ao vivo, tutoria e certificado reconhecido pelo MEC.'` | não |  |
| `chapeu` | `string` | — | não | Chapéu acima do título: "Pós-graduação EAD", "Matrículas abertas". |
| `variant` | `'default' \| 'conversion'` | `'default'` | não |  |
| `pricingCard` | `React.ReactNode` | — | não | O cartão de preço, à direita na variante `conversion` (depois do texto no celular). |
| `backgroundImage` | `string` | `'https://faculdadephorte.edu.br/wp-content/uploads/2025/09/ARTE-copy.webp'` | não |  |
| `ctaHref` | `string` | — | não | Destino da chamada principal (E74). Sem ele o botão não aparece — um CTA que não leva a lugar nenhum é pior que nenhum (decisão de 2026-09-28). |
| `rotuloDoCta` | `string` | `'Começar agora'` | não | Texto da chamada principal (padrão "Começar agora"). |
| `ctaSecundarioHref` | `string` | — | não | Destino da chamada secundária, só na variante `default`. Mesma regra. |
| `rotuloDoCtaSecundario` | `string` | `'Ver planos'` | não | Texto da chamada secundária (padrão "Ver planos"). |
| `destaques` | `string[]` | — | não | Sinais de confiança, curtos, embaixo das chamadas (E130): "Credenciada pelo MEC", "+250 mil alunos", "Certificado reconhecido". |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--foreground` | #1A1A1A | `bg-ink`, `from-ink`, `from-ink/85`, `to-ink`, `to-ink/60`, `via-ink/80`, `via-ink/90` |
| `--ink-inverse` | #FAFAFA | `text-ink-inverse` |
| `--ink-inverse-muted` | #C7C7C7 | `text-ink-inverse-muted` |
| `--primary` | #D42B2B | `text-primary` |
| `--secondary` | #0B8434 | `text-secondary` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | `default`: a chamada principal e a secundária. `conversion` em 1280px: só o que vier no `pricingCard`. |
| Enter | Segue a chamada em foco (são links). |

### Leitor de tela

- A foto é decorativa (`alt=""`); o título nomeia a região.
- Os destaques são uma lista com nome ("Por que a Phorte"); o visto é decorativo.

### O que sustenta o estado

Usa os padrões: estatico. Falta ouvir com leitor de tela: estatico.

## Status e recursos

| Tipo | Recurso | Status |
| --- | --- | --- |
| Código | `app/components/organisms/marketing/MarketingHero.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/marketing-marketinghero--docs | Disponível |
| Teste de acessibilidade | axe em `npm run test` | No gate de todo commit |
| Leitor de tela | Passada da E33 | Falta ouvir |
| Design | Figma | Desativado até a Fase 2 |

### Histórico

- `251416b` 2026-10-01 — E159: Testimonials — o vídeo toca dentro do cartão, YouTube e Vimeo
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/organisms/marketing/MarketingHero.tsx