PTENES
Hospedagem • Experiência digitalVídeo de aberturaDesign responsivo3 idiomas
Praia JeN

A experiência começaantes da chegada.

Um site que traduz o encanto de se hospedar à beira-mar.

O site de uma hospedagem de casas e chalés à beira-mar, em três idiomas, com um painel de 19 telas para o dono.Casas e chalés à beira-mar, em 3 idiomas, com painel do dono.

Site + painelHospedagemNo ar

  • Next.js 16.3
  • React 19.2
  • TypeScript 5.9
  • Tailwind CSS 3.4
  • next-intl 4.13
  • Framer Motion 12
  • Lenis 1.3
Hospedagem • Experiência digitalVídeo de aberturaDesign responsivo3 idiomas
Praia JeN

A experiência começaantes da chegada.

Um site que traduz o encanto de se hospedar à beira-mar.

  • Next.js 16.3
  • React 19.2
  • TypeScript 5.9
  • Tailwind CSS 3.4
  • next-intl 4.13
  • Framer Motion 12
  • Lenis 1.3

O site de uma hospedagem de casas e chalés à beira-mar, em três idiomas, com um painel de 19 telas para o dono.Casas e chalés à beira-mar, em 3 idiomas, com painel do dono.

Site + painelHospedagemNo ar

  • Next.js 16.3
  • React 19.2
  • TypeScript 5.9
  • Tailwind CSS 3.4
  • next-intl 4.13
  • Framer Motion 12
  • Lenis 1.3

PortfólioPraia JeN

Antes da chegada

O hóspede sente a praia antes de chegar nela.

Quem procura hospedagem decide em poucos segundos, e foto parada não mostra o lugar. Por isso o site se mexe como a praia: abre com um vídeo, as fotos andam devagar com a rolagem e os títulos chegam palavra por palavra. Quase tudo é CSS feito à mão; a biblioteca de animação entra em só três lugares.

  • Vídeo de abertura

    A primeira coisa que se vê é o lugar em movimento, com um vídeo próprio para o celular e uma foto no lugar, para quem pede menos movimento.

    No códigosrc/components/sections/hero.tsx

  • Fotos em camadas

    A foto anda mais devagar que a página e dá a sensação de profundidade (o efeito parallax).

    No códigosrc/components/fx/parallax-media.tsx

  • Palavra por palavra

    Os títulos aparecem uma palavra de cada vez, no ritmo da leitura.

    No códigosrc/components/fx/split-reveal.tsx

  • Capítulos que se abrem

    Cada parte da página entra como um capítulo novo, com um vigia só para a página inteira, leve para o celular.

    No códigosrc/components/fx/chapter-reveal.tsx

  • Botão magnético

    O botão é puxado na direção do mouse e dá vontade de clicar. É o mesmo efeito destes cartões: toque ou passe o mouse.

    No códigosrc/components/fx/magnetic.tsx

  • Rolagem macia

    A página desliza sem trancos, com o Lenis, e desliga sozinha para quem pede menos movimento.

    No códigosrc/components/providers/smooth-scroll.tsx

38
animações próprias, escritas em CSS
52
arquivos que respeitam quem pede menos movimento
Três telas do site, em inglês, português e espanhol, sobre pedras iluminadas na mata ao entardecer

Uma experiência. Três idiomas.

Acomodações, disponibilidade e informações para planejar a estadia.

EnglishPortuguêsEspañolDo primeiro contato ao pedido de reserva.Português • Inglês • Espanhol

Quem vem de fora lê o site na língua dele: cada página tem o seu endereço em português, inglês e espanhol. E quem cuida do site não precisa saber traduzir, no painel, um botão passa o texto novo do português para as outras duas línguas. Toque ou passe o mouse numa placa para ver a frase nos três idiomas.

  • O chapéu da página de disponibilidade
  • O título da mesma página
  • O botão do pedido
  • 1.977 textosEm cada idioma, do site e do painel.
  • Um endereço por idiomaOs endereços /pt, /en e /es: o Google encontra cada versão.
  • Tradução no painelUm botão traduz o texto novo do português para inglês e espanhol (pelo serviço MyMemory).
  • O painel também fala três línguasQuem cuida do site escolhe o idioma do painel.

A agenda

O calendário do Airbnb aparece no site sozinho.

Casa de praia costuma ser anunciada no Airbnb, e manter duas agendas à mão é pedir para alugar a mesma data duas vezes. Aqui o site lê o calendário de cada acomodação lá no Airbnb e mostra ao hóspede o que está livre. Desça para ver a maré encher os dias ocupados.

JaneiroMês de exemplo
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  1. O Airbnb mandaO que está reservado lá fica ocupado aqui, cada acomodação tem o seu calendário.
  2. O site vai buscarO servidor lê esse calendário (no formato iCal, o mesmo dos apps de agenda) e guarda a resposta por 30 minutos, para não pesar.
  3. O hóspede vê os dias livresNa página de disponibilidade, nas três línguas.
  4. Ele pede a reservaPor um formulário. Não há pagamento no site: a reserva é combinada depois.
  5. O pedido chega no painelCai nas mensagens com a etiqueta de reserva, e a tela Reservas mostra só esses pedidos.
Notebook sobre bancada de granito mostrando a tela de acomodações do painel, com caderno, caneta e plantas

Painel administrativo próprio

Beleza para o hóspede. Controle para o negócio.

Conteúdo, acomodações e disponibilidade em um só painel.

Acomodações e tarifasPáginas e galeriaPedidos de reservaE-mail marketing19 telas de gestão

Site de hospedagem que depende de programador para trocar um preço fica velho rápido. Aqui o dono muda tudo sozinho, em 19 telas, cada uma é um chaveiro neste quadro de recepção. Toque ou passe o mouse para pegar uma chave.

Hospedagem

  • 01PainelA visão geral do site, logo na entrada.
  • 02AcomodaçõesCasas e chalés: fotos, textos, comodidades.
  • 03TarifasOs valores de cada acomodação e período.
  • 04DisponibilidadeO calendário de cada uma, ligado ao Airbnb.
  • 05ReservasSó os pedidos de reserva, separados.

Conteúdo

  • 06PáginasOs textos de cada página do site.
  • 07SeçõesA ordem e o liga-desliga das partes da home.
  • 08Editor de seçãoO texto de uma parte, nos três idiomas.
  • 09NavegaçãoOs itens do menu.
  • 10RodapéO que aparece no pé de toda página.
  • 11DepoimentosO que os hóspedes disseram, com lixeira.
  • 12MomentosA galeria de fotos, com lixeira.
  • 13Praia Busca VidaA página da praia e da região.

Comunicação

  • 14MensagensContatos e pedidos, com a resposta ali mesmo.
  • 15Newsletter e e-mailAssinantes, campanhas, modelos e automações.

Sistema

  • 16BackupAs cópias, com a prévia do que muda antes de voltar uma.
  • 17AuditoriaQuem mudou o quê, com o antes e o depois.
  • 18ConfiguraçõesMarca, contatos e mídias do site.
  • 19SenhaA troca da senha do painel.

O painel tem tema claro e escuro e os três idiomas, como o site. A entrada é por senha, com 5 códigos de resgate para quando ela se perde.

A caixa de correio

Uma central de e-mail dentro do próprio site.

Para chamar o hóspede de volta, quase todo mundo paga um serviço de e-mail marketing à parte. Aqui ele mora no painel: a lista de assinantes, as campanhas e os modelos. O envio conversa direto com o servidor de e-mail (SMTP), por um cliente escrito do zero, sem pacote pronto. Toque ou passe o mouse num envelope para abri-lo.

  • Campanhas

    Escreve, escolhe para quem e manda.

  • Modelos

    Montados em blocos, sem código.

  • Automações

    Gatilhos prontos para configurar.

  • Por idioma

    Cada assinante na língua dele.

  • Em lotes

    Sem travar o servidor de e-mail.

  • Histórico

    Cada envio fica registrado.

  • Sair com um clique

    Quem não quer mais, sai sozinho.

  • Contra robôs

    A inscrição não aceita spam.

O caminho de uma campanha

  1. Rascunho
  2. Agendada
  3. Na fila
  4. Enviando
  5. Enviada

Nada se perde

O que o dono escreve fica guardado.

Quem edita o site todo dia, um dia apaga o que não devia. Por isso existem duas redes: cada alteração no painel gera uma cópia, e o servidor ainda tira uma cópia do conteúdo e das fotos a cada hora, só quando algo mudou. Antes de voltar uma cópia, o painel mostra o que vai mudar.

  1. 24
    Cópias de hora em horaNo servidor: as últimas 24 horas, uma por hora.
  2. 14
    Cópias diáriasNo servidor: uma por dia, nas últimas duas semanas.
  3. 8
    Cópias semanaisNo servidor: uma por semana, nos últimos dois meses.

  • Cópia a cada alteração

    No painel, cada mudança gera uma cópia: todas das últimas 48 horas e uma por dia até 30 dias.

  • A lixeira

    Depoimento ou foto apagados vão para a lixeira e podem voltar.

  • O que mudou, e quando

    A auditoria registra cada alteração do painel e mostra o antes e o depois.

  • Atualizar sem apagar

    Quando o site ganha uma versão nova, o texto e as fotos do dono ficam: três camadas de proteção cuidam disso.

As tecnologias

Do que é feito, peça por peça

Um site de hospedagem com painel próprio, sem banco de dados: o conteúdo mora em arquivos, gravados com cuidado para nunca corromper. Escolha uma peça para ver o que ela faz aqui e em que arquivo está.

17tecnologias, em 5 camadas

Tela

Idiomas

Dados

Integrações

Servidor

As telas

Um álbum de férias.

O site, o painel e o celular, nos temas escuro e claro. Desça para as fotos se revelarem; clique numa para ver grande.

O site

O painel

No celular

Visitar o site

Próximo projeto14 / 51

Sites e experiências webRecóleoO site de uma empresa que recicla óleo de cozinha: o vídeo que anda com a rolagem, 3 idiomas e um painel de 16 telasNext.js 16.3React 19.3TypeScript 5.9GSAP 3.15← AnteriorTicTur
Início