FAVO

2025 – até hoje

A FAVO é um escritório de hospitalidade dedicado a negócios de gastronomia, hotelaria, incorporação e novos destinos. O site dá espaço às imagens e ao trabalho do escritório, com uma página para cada projeto, a apresentação da FAVO e um caminho direto para o contato.

Site sob medida

Hospitalidade

Ver Projeto

Abertura do site da FAVO no computador: a foto de um coquetel no centro da tela e o menu no pé da página

Luminária de latão com três globos acesos contra uma parede verde-oliva na penumbra

Abertura do site da FAVO no celular, com a foto de um coquetel e o convite para rolar a tela

O cliente

A FAVO hospitalidade se apresenta como escritório de hospitalidade, em São Paulo, especializado em negócios da gastronomia, hotelaria, incorporação e novos destinos. Segundo o site da FAVO, o escritório atua na concepção de novos negócios, consultoria, branding, cardápios, arquitetura, eventos de relacionamento, educação corporativa e treinamentos, em cinco pilares: negócios de A&B, branding, cidades e destinos, educação e ESG.

O desafio

O ponto de partida foi a prévia em WordPress e Elementor do site da FAVO, com home, sobre nós, contato, lista de projetos e 12 páginas de projeto. O trabalho registrado foi refazer essa prévia em código, com o mesmo desenho no computador, no tablet e no celular e os mesmos endereços de página.

Nas revisões, a FAVO pediu fotos dos projetos inteiras e com mais respiro, zoom mais sutil na lista de projetos, nova foto na abertura da home e a abertura conforme um PDF do escritório.

Seção de apresentação do site da FAVO no computador, com as fotos de um café e de uma luminária

Símbolo da FAVO e a foto de um coquetel sobre o balcão, na abertura do site da FAVO

Seção Escritório de hospitalidade do site da FAVO no celular, com a foto de um edifício à noite

O que fizemos

Migração de WordPress para Astro

A prévia em WordPress e Elementor do site da FAVO foi refeita em Astro, nos mesmos endereços de página e com os mesmos pontos de quebra: celular até 767 px e tablet até 1024 px.
Abertura da home guiada pela rolagem

A abertura da home da FAVO fica presa na tela ao rolar: o menu sobe, o ícone sai e as frases surgem ao lado da foto (abaixo dela no celular), como no PDF da FAVO.
Doze páginas de projeto

Cada um dos 12 projetos no site da FAVO, como L40, Baio e Yōso, tem página própria com título, local, texto, capa e galeria, gerada a partir de um arquivo de dados.
Galerias com fotos inteiras

As galerias dos projetos da FAVO mostram cada foto inteira, sem corte nem zoom, com a mesma altura em cada linha e de margem a margem; no celular, uma foto por linha.
Lista de projetos com “ver projeto”

A lista de projetos da FAVO muda de ordem a cada visita, como no WordPress. Uma etiqueta “ver projeto” segue o mouse, e cada projeto é pré-carregado ao passar o mouse ou tocar.
Capa no enquadramento do card

No tablet e no celular, a capa de cada projeto da FAVO repete o enquadramento e a proporção 3:2 do card da lista de projetos, como a FAVO pediu.
Sobre nós com consultores interativos

A página Sobre nós da FAVO reúne fundador, pilares de atuação, consultores e prêmios. Na lista de consultores, o nome troca a foto no computador e abre como sanfona no celular.
Revelação ao rolar e cabeçalho fixo

No site da FAVO, as fotos se revelam de baixo para cima e os textos sobem ao entrar na tela, e o cabeçalho fica fixo no topo de todas as páginas.

Abertura da home do site da FAVO no computador, depois da rolagem: as frases ao lado da foto do coquetel

Salão do restaurante Baio visto por um vão oval, em recorte de foto da galeria do projeto no site da FAVO

Página do projeto L40 no site da FAVO, no celular: barra Projetos e Galeria, capa, título, local e texto

Como foi feito

O site da FAVO é 100% estático, feito em Astro, com animações em GSAP e ScrollTrigger, e publicado na Vercel. Cada projeto do site da FAVO é um arquivo de dados com texto e fotos, do qual o build gera a página.

As imagens do site da FAVO são otimizadas no build, em WebP e em vários tamanhos, e a fonte do site vem do próprio servidor, pré-carregada. Arquivos com hash e fontes ficam em cache por um ano. O desenho foi conferido contra a prévia em 1440, 900 e 390 px de largura.

Acessibilidade e desempenho

O site da FAVO desliga as animações para quem pede menos movimento no sistema e mostra todo o conteúdo se o script não rodar em três segundos. O menu do celular da FAVO é um diálogo que fecha com Esc e mantém o foco do teclado dentro dele. As páginas têm link para pular ao conteúdo, e a foto de abertura carrega com prioridade.

Estrutura para a busca

Cada página do site da FAVO é um arquivo HTML pronto, gerado no build, com título, descrição e metadados Open Graph próprios; nas páginas de projeto, a descrição sai do texto do projeto. Cada página tem um título principal (h1), o idioma declarado é pt-BR, as fotos da home têm texto alternativo e os endereços são os mesmos da prévia em WordPress.

Processo

O site da FAVO foi feito em três etapas registradas. Primeiro, as páginas da prévia foram refeitas em código. Depois vieram a abertura animada, as revelações ao rolar, o cabeçalho fixo e o menu do celular. Por fim, as revisões da FAVO: fotos inteiras nas galerias, zoom mais sutil na lista, nova foto na abertura, capa no enquadramento do card e a foto da Praça Pamplona no recorte da FAVO.