Site institucional · Desktop e mobile
Uma históriaganha presençadigital.
Design editorial e experiência responsiva para Souza Paiol.
Site institucional no ar, em 3 idiomas, com painel e atendimento próprios.
- Next.js
- React
- TypeScript
- GSAP
Site institucional · Desktop e mobileUma históriaganha presençadigital.
Design editorial e experiência responsiva para Souza Paiol.
- Next.js
- React
- TypeScript
- GSAP
Site institucional no ar, em 3 idiomas, com painel e atendimento próprios.
- Next.js
- React
- TypeScript
- GSAP
O atendimento do site
Escreve errado, e mesmo assim acha.
O atendimento do site não depende de serviço externo: são regras escritas à mão que comparam o que a pessoa digita com as palavras de cada assunto, e aguentam erro de digitação. Digite com erro e veja a nota de cada assunto.
Tente
O que você digitou, em pedaços de 3 letras
·auaututetenentntctcicididadadadede·
A nota de cada assunto
- Como saber se é original?parecido (trigramas) · "autenticidade"
0,67 - Quais produtos vocês têm?abaixo do corte
0,00 - Como me candidato a uma vaga?abaixo do corte
0,00 - Como falar com vocês?abaixo do corte
0,00 - Quais são os avisos de saúde?parecido (trigramas) · "idade"
0,31 - Onde vocês ficam?abaixo do corte
0,00
As regras são as do site (busca.ts): sem acento e sem pontuação; palavra-pista inteira vale 1; começo de pista com 3 letras ou mais vale 0,85; senão, a semelhança entre os pedaços de 3 letras (comuns ÷ todos), e abaixo de 0,28 é ruído. Com nota ≥ 0,5 ele responde; abaixo, mostra os 3 mais próximos. A pista é por palavra inteira de propósito: "autenticidade" não casa com "idade" do tópico de saúde.
Três idiomas. Duas formas de ver.
Português, inglês e espanhol com temas claro e escuro.
PT · EN · ES | Claro e escuroO idioma sempre aparece no endereço, o tema começa escuro e a área de cachaça só abre para maiores de 18. Troque o idioma e o tema e entre pelo portão.
O site, por dentro
Você tem 18 anos ou mais?
As regras
- 1O idioma vai sempre no endereço: /pt, /en ou /es.
- 2O tema começa escuro e não segue o do sistema; a escolha fica salva.
- 3O portão de idade guarda a resposta por 30 dias; Tab só circula entre os dois botões e Esc não fecha.
- 4Atrás do portão, só ficha: sem preço, sem compra.
Mesmo assim o site abre no tema escuro, o tema do sistema é ignorado. Agora: escuro.
As regras são as do site (routing.ts, theme-provider.tsx, age-gate.tsx): a decisão do portão é feita no servidor, para o conteúdo não piscar antes dele; as duas cortinas abrem em 1 s; a preferência por menos movimento é respeitada. As três séries têm os dados que o site publica, todas com 39%.
Conteúdo e atendimento. Desenvolvimento sob medida.
Painel próprio, chat e gestão de conteúdo integrados ao site.
Next.js · React · TypeScriptPelo painel, a marca tira uma página do ar sem quebrar o que o buscador já conhece. Despublique uma página e veja o que muda no código da página e no sitemap.
Páginas no painel
- Publicada
- Publicada
- Publicada
- Publicada
O cabeçalho da página
<meta name="robots" content="index, follow">
Os idiomas ligados
<link rel="alternate" hreflang="pt" href="/pt/acao-social"> <link rel="alternate" hreflang="en" href="/en/acao-social"> <link rel="alternate" hreflang="es" href="/es/acao-social">
O sitemap
/ptlastmod 2026-09-30 · 1.0/pt/empresalastmod 2026-09-12 · 0.7/pt/acao-sociallastmod 2026-10-02 · 0.7/pt/saudesem lastmod (nunca editada) · 0.7
As telas de verdade
As regras são as do site (sitemap.ts, metadata.ts): a data do sitemap só existe quando é real; a página despublicada recebe noindex mas continua com follow, sai do grupo de idiomas e fica no sitemap com a data da despublicação, é isso que faz o buscador voltar e ver o noindex. Só depois de sair do índice ela deixa o sitemap. O início não pode ser despublicado aqui. As datas são de exemplo.
As tecnologias
Do que é feito, peça por peça
Um site institucional com painel próprio: Next.js com React e TypeScript, três idiomas no endereço, movimento com GSAP e rolagem suave, imagens otimizadas na entrada e um painel com senha que edita textos, imagens, menu e o atendimento. Escolha uma peça para ver o que ela faz aqui e em que arquivo está.
9tecnologias, em 3 camadas
Site
Movimento
Painel
Aplicativos desktopCine Creator Studio