07 / CASE VEDDU · Nutrição funcional
Landing page para suplementos: Guvita Ciclo 24h
A landing page do Ciclo 24h, da Guvita, marca de suplementos de Recife: duas fórmulas vendidas como um ritual só, que acompanha o dia da manhã até a noite.
Role a página: a landing passa inteira, do topo ao rodapé, no desktop e no celular. Os capítulos fixos aparecem em sequência, quadro a quadro.
Contexto
do projeto
Resposta direta
Como vender dois suplementos no mesmo site sem o cliente travar em qual escolher
Mostre em que momento do dia cada suplemento é usado, em vez de pôr os dois lado a lado para comparar. Com só dois produtos, a vitrine de loja obriga a pessoa a escolher um, e quem fica em dúvida adia a compra. Com uma hora para cada fórmula, levar as duas passa a fazer sentido.
- Contexto
- O mercado de suplementos alimentares movimentou cerca de R$ 7,6 bilhões no Brasil em 2025, segundo a Brasnutri. A Guvita vende duas fórmulas: o DAYVIVE, em pó, e o DEEPRESET, em cápsulas. O site antigo já posicionava as duas juntas, mas somava promoção por produto e kit ao mesmo tempo, e no celular não ficava claro o que se estava comprando.
- Desafio
- Fazer do kit a escolha natural sem fechar o caminho de quem quer um produto só, e não perder quem chega de um anúncio da marca sobre uma das fórmulas e encontra as duas.
- Decisão
- Dividir a venda em duas camadas: o Ciclo 24h, que apresenta a marca e oferece o kit, e uma página para cada produto, com uma mensagem e um público só.
Seis telas das páginas da Guvita e a decisão por trás de cada uma.
Telas capturadas no site publicado da Guvita, no desktop e no celular: cinco da página do Ciclo 24h e uma da página própria do DEEPRESET. Use o índice para ir direto a uma tela ou siga na ordem.
O ritual
Um trilho de horários acompanha a pessoa pelos cinco capítulos do dia.
Depois do topo vêm manhã às 07:00, tarde às 14:00, noite às 22:00, o descanso e o novo dia. Cada capítulo fica preso na tela enquanto a pessoa rola, e o marcador avança de um horário ao outro. No último, todos os pontos ficam acesos e o botão chama para o ciclo completo. No celular, o trilho vira cinco pontos no alto da tela.
Histórias reais
Cada cartão roda um trecho e abre o vídeo completo só no clique.
Os vídeos vieram do arquivo da própria marca, com uso autorizado pela Guvita. A frase ao lado descreve o que se vê no vídeo, e quem não tem o nome confirmado aparece como Cliente Guvita. Os trechos dos cartões são arquivos à parte, de 3,2 segundos e sem som.
Fórmula
A fórmula do DAYVIVE vem em três grupos, com a quantidade por porção.
Em vez da tabela do rótulo, a seção mostra a fórmula em três grupos, cada um com a função ou a família de nutrientes logo abaixo. O cartão ao lado lista os ingredientes e separa o que acontece no organismo do que muda no dia a dia; mais abaixo, a mesma seção passa para o DEEPRESET. No celular, a explicação abre no toque, para a seção não virar um bloco de texto.
Oferta
O kit abre recomendado, e cada produto sozinho fica um passo abaixo.
O cartão do Ciclo Completo traz o botão de compra logo abaixo do preço, com a parcela como número grande, a pedido do cliente. Os planos de cada produto só se abrem depois do clique em Ver planos, para que kit, produtos e quantidades nunca disputem a mesma tela. No celular, o kit vem primeiro e os dois produtos seguem em largura total.
Depois da compra
Depois do preço, a página responde o que acontece após a compra.
Os três passos são pedido confirmado, envio e primeiro uso, com um gesto de manhã e outro à noite. A faixa de baixo reúne ambiente protegido, rastreamento, suporte humano e os 7 dias para decidir, que são o direito de arrependimento do Código de Defesa do Consumidor.
Página de produto
A página do DEEPRESET vende só ele, em planos de 1, 3 e 6 potes.
Aqui o produto já está decidido, então os cartões comparam só a quantidade: o de 3 potes vem em destaque, e os maiores somam potes de brinde. Para quem quiser os dois, um link logo abaixo dos cartões leva ao combo. A página do DAYVIVE repete a estrutura, em verde.
Como a Veddu constrói uma landing page que vende uma linha de suplementos.
Direções da oferta
- Direção 1
- Ciclo completo em foco
- Direção 2
- Seletor de ritmo
- Direção 3
- Decisão de 24 horas, com a linha de 07:00 a 22:00 · escolhida, numa variação
- Hero com portal circular e potes gigantes
- Díptico de fotos de rotina
- Tabela de preço branca com três cartões iguais
Datas do projeto: conceito em 22/07/2026 e versão em React em 05/08. O nome da direção 3 segue no alto da oferta publicada.
Ao lado de cada etapa, um registro real deste projeto, conferido no site publicado em outubro de 2026.
- 01
Conceito e referências aprovados antes do código
O cliente recebeu primeiro o conceito Dia e Noite, uma página de rumo visual. Seções como a fórmula e o capítulo do novo dia partiram de uma referência aprovada e foram comparadas com ela depois de prontas. Uma versão roxo-escura foi descartada por cair no visual genérico de página feita por IA.
Direções da oferta
- Direção 1
- Ciclo completo em foco
- Direção 2
- Seletor de ritmo
- Direção 3
- Decisão de 24 horas, com a linha de 07:00 a 22:00 · escolhida, numa variação
Ficaram de fora- Hero com portal circular e potes gigantes
- Díptico de fotos de rotina
- Tabela de preço branca com três cartões iguais
Datas do projeto: conceito em 22/07/2026 e versão em React em 05/08. O nome da direção 3 segue no alto da oferta publicada.
- 02
Sistema visual que marca a hora do dia
Uma família de fonte só, a Manrope, em títulos, texto e botões, e duas cores com função: verde para o DAYVIVE e as horas do dia, violeta para o DEEPRESET e as da noite. Em toda seção, os potes mantêm a proporção real das embalagens e, fora da mão de quem usa, ficam apoiados numa superfície, sem flutuar.
Sistema visual do Ciclo 24h
- Fundo
- #020907 · quase preto esverdeado, base de todas as seções
- Verde do dia
- #00D88F · DAYVIVE e horários da manhã e da tarde
- Violeta da noite
- #9C55EF · DEEPRESET e horários da noite
- Lima
- #A8FF3E · cor de apoio do verde
- Texto
- #F7FBF9 · títulos e texto principal
- Manrope
- peso 800 nos títulos, tracking negativo
- Potes
- DAYVIVE com cerca de 1,30 vez a altura e 1,65 a 1,70 vez a largura do DEEPRESET
O botão principal usa um degradê do verde ao violeta, o mesmo caminho da linha de luz que atravessa a página.
- 03
Dose e público da melatonina escritos na página do produto
A Anvisa autoriza a melatonina em suplemento até 0,21 mg por dia, sem nenhuma alegação de benefício aprovada. Por isso o DEEPRESET se apresenta na busca pelos ativos, e a página informa a dose por porção e que o suplemento se destina a adultos com 19 anos ou mais.
guvita.com.br › deepreset
DEEPRESET Guvita | Magnésio, Melatonina e Ativos Noturnos
Conheça DEEPRESET, a fórmula noturna Guvita com magnésio em duas formas, melatonina e ativos reunidos em duas cápsulas.
Título e descrição do HTML de guvita.com.br/deepreset, como aparecem num resultado de busca.
- 04
Páginas que buscadores e IAs conseguem ler
Feita em React, a página chegaria quase vazia a robôs que não rodam JavaScript, por isso cada endereço sai pronto em HTML. Cada página de venda tem título, descrição e dados estruturados próprios, e as de produto se declaram como produto, com marca e ofertas. O llms.txt resume os fatos da marca, e os robôs das IAs têm passagem livre.
1{2 "@type": "Product",3 "@id": "https://guvita.com.br/dayvive#product",4 "name": "DAYVIVE",5 "url": "https://guvita.com.br/dayvive",6 "brand": {7 "@type": "Brand",8 "name": "Guvita"9 },10 "description": "Greens, vitaminas, fibras e compostos bioativos reunidos em uma preparação para o ritual da manhã.",11 "image": "https://guvita.com.br/assets/dayvive-cutout-trimmed.webp",Trecho do JSON-LD publicado na página do DAYVIVE, formatado para leitura. Logo abaixo vêm as ofertas e a trilha de volta ao Ciclo 24h.
- 05
Celular como critério de entrega
Cada seção só era entregue depois de passar no celular, a 390 px de largura. Em 7 de agosto, as telas foram comparadas com capturas do iPhone do próprio cliente; em 20 de agosto, a revisão das páginas de produto achou potes que sumiam nos planos do celular, problema corrigido na versão publicada.
Matriz de testes
- 12
- tamanhos de tela testados, de 360 x 780 a 1920 x 1080
- Nenhuma
- rolagem lateral no celular, na home e nas duas páginas de produto
Regras do projeto- Rolagem do próprio navegador, sem trava
- Versão estática para quem pede menos movimento
- Imagens separadas para desktop e celular
Matriz registrada no projeto; rolagem lateral medida no site publicado.
Antes do layout, a Veddu desenha a oferta da sua linha.
Se a sua marca vende mais de uma fórmula, o diagnóstico começa pelo kit: o que entra nele, o que vende sozinho e em que ordem cada opção aparece no celular.