Colégio Arena: landing page e Plataforma Arena
Site, página inicial e protótipo da plataforma do Colégio Arena, com a nova linguagem visual da marca. Astro (páginas estáticas), WebGL2 no mapa "Arena pelo mundo" e Preact só nas telas da plataforma.
O deploy tem três endereços que formam um fluxo só:
/: página inicial da Plataforma Arena, que explica o caminho completo (site → captação → matrícula → família → aluno → professor → gestão) e abre cada etapa já como a pessoa certa./site/: a landing de captação do colégio (etapa 1). O formulário “Agende uma visita” cria o contato no funil do CRM./video/: o vídeo de apresentação da plataforma (68 s, com trilha), em 16:9 ou 9:16 conforme a tela. O botão “Ver vídeo prévia” da página inicial leva até ele./plataforma/: o protótipo de alta fidelidade da Plataforma Arena: portais do aluno, do professor, da família, da gestão e da captação (CRM), alternáveis na mesma conta, com dados fictícios. O site carrega só o módulo de dados da plataforma, para gravar o pedido de visita. Detalhes, personas, mapa de telas e o caminho para produção em docs/plataforma.md.
Rodar
npm install
npm run dev # http://localhost:4321
npm run build # gera dist/
npm run check # tipos e diagnósticos do Astro
npm test # regras da plataforma e verificação de texto (vitest)
npm run textos # só a verificação de texto, com avisos
Regras de texto e de contribuição: CLAUDE.md.
Vídeo
video/cenas.html anima as sete etapas da plataforma quadro a quadro: cada quadro é uma função do tempo, sem transição de CSS. npm run video abre a página no Chromium, grava 30 quadros por segundo e passa as imagens ao ffmpeg, que junta a trilha e gera public/video/plataforma-arena-16x9.mp4, plataforma-arena-9x16.mp4 e as capas em JPG. Precisa de ffmpeg no PATH e de python3 com numpy.
A trilha (scripts/trilha.py) é sintetizada no próprio script, sem amostras de terceiros: pad, piano de feltro em arpejo e baixo longo, em ré maior, sem bateria nem efeitos de transição. O compasso 17 abre a cena do fluxo e o 19 cai na assinatura.
- Para ver no navegador sem gravar: abra
video/cenas.html?tocar (ou ?f=916&tocar para o vertical).
- Para conferir quadros soltos:
npm run video -- quadros 12.5 30, que salva PNGs em video/quadros/.
- Cada legenda tem até 12 palavras e fica pelo menos 4,5 s na tela. Os textos passam por
npm run textos.
- As telas do vídeo mostram a plataforma pronta, com as mesmas pessoas fictícias do protótipo.
Publicar na Vercel
- Na Vercel, Add New → Project e importe o repositório
ganwalk/arena.
- A Vercel detecta o Astro pelo
vercel.json. Não é preciso configurar variáveis de ambiente.
- Cada push gera uma URL de preview; o branch de produção é o padrão do repositório.
Direção de design
Seguindo o no-red-flags:
- Cor: grafite da marca (
#2E3B42) como base escura, petróleo (#209BA0, e #0B7377 para texto e botões, por contraste) como única cor de ação, neutros frios (#EEF3F3 e #D9E3E4) como superfície de apoio. Sem bege, por decisão de projeto.
- Tipo: Schibsted Grotesk, a fonte que o site atual já usa. Títulos em peso 800, sem itálico; o itálico da campanha da marca aparece só no destino da hero ("para Yale.").
- Estrutura: o módulo quadrado do painel geométrico da marca (quarto de círculo, triângulo, listras, anel). Grid de 12 colunas e filetes finos, sem cartões decorativos.
Motion: a hero troca de destino sozinha, como um vídeo (com pausa), e o mapa se monta a partir de Goiânia na primeira vez que aparece. O resto só se move em resposta ao usuário: módulos giram ao toque, o arco é desenhado ao escolher um ponto. prefers-reduced-motion desliga tudo.
Hero
O site (/site/) abre com a hero dentro de uma moldura branca arredondada, e o menu é a faixa de cima dessa moldura. Nos primeiros 220 px de rolagem a moldura se desfaz (clip-path, sem reflow) e o menu vira uma barra flutuante arredondada. O progresso fica em --rolagem, atualizado por Base.astro.
Um mosaico 4 × 4 no ritmo do painel da marca: módulos de cor e módulos que recortam fotos reais da base do mapa. O título percorre destinos reais ("Do Setor Bueno para Yale.", Harvard, Londres, Zurique, Texas, Paris, Toronto) e as fotos trocam junto, girando o recorte. Os módulos giram ao passar o cursor, e clicar numa foto ou em "Ver no mapa" abre o registro no mapa.
- A troca automática tem botão de pausa, para quando a hero sai da tela ou a aba fica oculta e não roda com
prefers-reduced-motion.
- Os destinos ficam em
destinos (src/data/site.ts).
- Vídeo: o módulo grande está pronto para o vídeo institucional. Coloque o arquivo em
public/video/ (MP4 H.264, sem áudio, 10 a 20 s em loop, até uns 4 MB) e preencha HERO_VIDEO em src/data/site.ts. Não foi possível baixar os vídeos do canal TV Arena deste ambiente.
Fazenda, laboratório, palco e quadra
Explorador em abas (AgroLab, Laboratórios, Eletivas, Palco e quadra, Escola de Pais), com setas e Home/End no teclado. Cada aba é um módulo da marca e mostra fotos reais, o texto e os itens concretos tirados das notícias, das páginas de etapas e da base do mapa (resultados da FISEC).
Etapas
Um seletor de idade (2 a 18 anos) acende a etapa correspondente e troca a foto. As faixas são as habituais do sistema brasileiro, com o aviso de que a série depende do mês de nascimento.
Arena pelo mundo
Cada célula de terra (4° × 4°) é um módulo do painel. A costa é arredondada com os quartos de círculo da marca, escolhidos pelas células vizinhas (src/scripts/mapa.ts). Os anéis são os 156 registros da base que o site atual publica, agrupados por célula. Ao escolher um ponto, uma linha sai de Goiânia até ele e o painel mostra texto, fotos e nomes dos alunos.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
