Portal Ana Fiório
Duas jornadas de conteúdo, escolar e corporativa, conectadas pela identidade de uma mesma educadora.
- Para quem
- Ana Paula Fiório, educadora corporativa e escolar
- Ano e andamento
- 2026 · publicado
O ponto de partida
Ana Paula atua com professores e com equipes de empresas. O desafio era apresentar as duas frentes no mesmo endereço, deixando claro onde cada público encontra o conteúdo que precisa, sem fragmentar a identidade da profissional.
O que foi construído
Um portal com duas portas de entrada. A área escolar reúne ideias para a sala de aula, leitura, escrita e português. A corporativa apresenta liderança, comunicação e ferramentas de gestão. O retrato da educadora une os dois caminhos na abertura.
O produto em uso
As principais telas e o que a pessoa pode fazer em cada uma. Selecione uma captura para ampliar.
- Ampliar captura em uma nova aba
A abertura apresenta as duas jornadas no mesmo endereço. 
Ampliar captura em uma nova abaA área corporativa organiza os temas de liderança, comunicação e formação. 
Ampliar captura em uma nova abaA área escolar privilegia ideias aplicáveis em sala de aula.
Explore o portal em funcionamento
Escolha uma jornada e experimente o site real. Alterne a largura para conhecer a interface em desktop e celular.
Comece pela escolha entre as duas áreas. O retrato faz a ligação entre elas.
Uma apresentação que você pode usar.
Ao iniciar, o portal externo será carregado aqui. Você poderá navegar pelos menus e conteúdos.
O site externo só carrega quando você inicia a demonstração.
Prévia por largura de tela, não uma simulação de dispositivo. O conteúdo é o da versão pública atual. Se a incorporação não aparecer, abra o portal em nova aba.
Minha participação
Direção visual, arquitetura de conteúdo e desenvolvimento frontend
O raciocínio por trás da interface
A apresentação começa pela escolha do visitante. A identidade acompanha essa decisão até o conteúdo.
- O público organiza a navegação
- Professores e equipes de empresas chegam com necessidades diferentes. A abertura oferece duas entradas explícitas, antes de apresentar o acervo de conteúdo.
- O retrato mantém a marca unida
- A imagem central conecta as duas áreas. A mudança de roupa acompanha a divisão visual, sem apresentar a educadora como duas marcas independentes.
- A linguagem acompanha cada jornada
- O lado escolar destaca ideias para aplicar na sala de aula. O corporativo organiza temas como comunicação, liderança e ferramentas de gestão. Cores e conteúdo reforçam essa distinção.
O que funcionou
- As duas áreas têm entradas explícitas e navegação própria no portal publicado.
- O retrato e o nome da educadora permanecem como elementos de ligação entre as jornadas.
Limites atuais
- Algumas páginas e conteúdos ainda dependem da evolução comercial do portal.
- Resultados quantitativos serão adicionados quando houver histórico suficiente de acesso e conversão.
Próximo passo
Consolidar os conteúdos de cada jornada e registrar aprendizados de uso com os dois públicos.
Por dentro da construção
Arquitetura, tecnologias e as escolhas de implementação deste projeto.
- Next.js 15
- Tailwind v4
- Design System
- Conteúdo
- Vercel
Como o sistema é montado
Site estático gerado no build, sem banco e sem servidor de aplicação. O conteúdo vive em módulos tipados, então adicionar uma seção é adicionar dados, não reescrever layout.
Interface
Next.js 15 e Tailwind v4- Abertura dividida ao meio
- Dois sistemas visuais irmãos
- Jornadas escolar e corporativa
Cada lado tem paleta e tipografia próprias, herdando os mesmos tokens de base.
Geração no build
Conteúdo
Módulos TypeScript- Conteúdo separado da apresentação
- Tipagem por seção
- Rotas geradas a partir dos dados
Publicar material novo não exige tocar em componente.
Publicação contínua
Entrega
Vercel- Build estático
- Domínio próprio
- Deploy a cada commit
Stack e o porquê de cada peça
Interface
- Next.js 15
- Rotas por arquivo e geração estática
- Tailwind v4
- Sistema de tokens sem folha de estilo paralela
- Playfair Display e Inter
- Contraste entre voz editorial e leitura longa
Identidade
- Contraste entre tons quentes e frios
- Diferenciar as jornadas escolar e corporativa na abertura
- Dois temas irmãos
- Cada público se reconhece sem quebrar a marca