Marina Avelar
Um estudo de presença digital para a área da saúde, com uma nutricionista fictícia e a ficção declarada na própria página.
- Categoria
- Landing page
- Nicho
- Nutrição
- Ano
- 2026
- Papel
- Arquitetura de conteúdo, interface e desenvolvimento front-end.
Contexto
Projeto conceitual para portfólio. Marina Avelar, os textos, os dados e as imagens são fictícios.
Objetivo
Mostrar como um site de nutrição pode apresentar atendimento, processo e modalidades de consulta de forma a gerar confiança, sem usar dados de uma profissional real.
Tecnologias
- HTML
- CSS
- JavaScript
- Vercel
O desafio
Quem procura uma nutricionista quer entender se o atendimento cabe na própria rotina e como é a primeira consulta. Um estudo sem cliente precisa mostrar isso sem ser confundido com um consultório de verdade.
A página apresenta três frentes de atendimento, a profissional, o acompanhamento em quatro etapas, as consultas presencial e online e as dúvidas antes da primeira consulta. Os botões de agendamento levam ao aviso de que o projeto é conceitual.
Direção visual
Creme, oliva e bronze criam um ambiente calmo. Títulos em serifa, retratos com cantos em arco e círculos finos em bronze dão um tom editorial, e a seção do processo passa para o grafite para marcar a sequência de etapas.
- Oliva#6F7955, botões e chamada final
- Creme#F5F0E6, seções alternadas
- Bronze#C58B68, números, detalhes e foco
- TítulosMaitree
- TextoOpen Sans
Implementação
Uma página em HTML, com CSS e JavaScript no próprio arquivo, sem dependências nem etapa de build, e uma página de privacidade separada. Publicada na Vercel.
- Menu mobile com aria-expanded, fechamento por Esc e trava de scroll
- Revelação ao rolar com IntersectionObserver, desligada com movimento reduzido
- FAQ com details e summary nativos
- Link para pular ao conteúdo e foco visível em bronze
Ficção declarada
Um site de saúde com uma profissional inventada só funciona como estudo se ninguém o confundir com um consultório real.
- Aviso de ficção no hero, na faixa de informações, na chamada final e no rodapé
- Retratos gerados por IA, identificados assim no texto alternativo
- Sem telefone, endereço, registro profissional ou canal de agendamento
- Página de privacidade informa que não há cadastro, formulário nem área de pacientes
O que este case não afirma
- Projeto conceitual. Não há cliente, atendimento nem métricas.
- Página única, sem CMS nem backend. O conteúdo é atualizado no código.