La Raffinerie
Dois estabelecimentos, uma marca: o site tinha de servir ambos sem diluir nenhum.
- Ano
- 2026
- Conceção
- 4 semanas
- Stack
- React · Vite · Tailwind · Framer Motion · Vercel
- Design
- Desenvolvimento
- SEO local multiestabelecimento
- Redação
Versão de demonstração publicada pela Kayzen Web num endereço Vercel; o domínio definitivo pertence ao cliente.
- estabelecimentos, um único domínio
- 2
- desempenho Lighthouse
- 95/100
- acessibilidade Lighthouse
- 100/100
O que era preciso resolver.
O contexto
A La Raffinerie é um bar de cervejas artesanais, tapas e cocktails, com dois endereços em Lyon: Saxe (Lyon 3) e Vaise (Lyon 9).
A restrição
Dois estabelecimentos colocam um problema clássico de SEO local: ou se criam dois sites e se divide a autoridade do domínio, ou se faz um só e fica-se invisível nas pesquisas de bairro. A isto soma-se uma carta de cervejas em rotação permanente e um público que nem sempre sabe o que escolher.
A resposta
Um domínio único, uma página dedicada por estabelecimento, cada uma com a sua ficha completa e a sua marcação própria. A carta de cervejas torna-se um guia de degustação: cada cerveja indica o estilo, o amargor, o teor alcoólico e uma sugestão de tapa para acompanhar. Não se lista, aconselha-se.
As pontuações registadas na entrega.
Pontuações Lighthouse do site em produção. Publicamo-las tal como estão: quando uma delas é baixa, a causa e o plano de correção estão descritos mais abaixo, em vez de serem omitidos.
Cada opção, e a sua razão.
Um guia em vez de uma lista
Filtros por estilo e por amargor, sugestão de tapa para cada cerveja. O cliente que hesita entre quarenta referências é um cliente que pede o mesmo de sempre — ou que não pede nada.
Cada endereço tem a sua personalidade
Fotografias, ambiente e horários próprios de Saxe e de Vaise, sobre uma base gráfica comum. Duas páginas gémeas teriam sido vistas como enchimento, tanto pelo visitante como pelo Google.
Movimento ao serviço da matéria
As animações de entrada sublinham a textura — espuma, cobre, ardósia. Desaparecem por completo se o utilizador tiver pedido movimento reduzido.
Paleta do projeto
Ardósia
#22262B
Fundo principal
Cobre
#C0763C
Ação, destaques
Espuma
#EFE6D4
Texto, superfícies claras
Lúpulo
#6C7A3F
Etiquetas de estilo
Sistema tipográfico
Títulos
Bebas Neue
Texto corrido
Inter 400
Maiúsculas condensadas para os títulos — registo de cervejaria artesanal — equilibradas por uma sem serifa muito legível nas fichas de degustação.
O que está por baixo do capô.
- React
- Vite
- Tailwind
- Framer Motion
- Vercel
A carta em dados, não em HTML
Cervejas e tapas vivem num ficheiro de dados tipado. Acrescentar uma referência não obriga a mexer na marcação nem a arriscar partir o layout.
Animações comedidas
O Framer Motion só é carregado pelas páginas que têm realmente animação. As páginas informativas (acesso, horários) não descarregam uma única linha dele.
Como o site se torna encontrável.
Duas fichas LocalBusiness distintas
Cada estabelecimento tem o seu próprio nó com morada, coordenadas geográficas e horários. Um único bloco para dois endereços impede o Google de associar corretamente as duas fichas.
Pesquisas de bairro
«Bar à bières Saxe» (bar de cervejas), «bar Vaise Lyon 9» em vez de «bar Lyon». A página de bairro ganha em expressões que a página da marca não consegue visar.
Conteúdo de degustação indexável
As fichas das cervejas respondem a pesquisas reais («bière IPA amère Lyon» — IPA amarga, «accord tapas bière ambrée» — tapas para cerveja âmbar) e trazem um tráfego de descoberta que o endereço sozinho não capta.
Utilizável por todos.
Desde junho de 2025, o Ato Europeu da Acessibilidade exige a acessibilidade digital a uma grande parte dos serviços online. Tratamo-la na conceção, não como correção posterior.
100/100 com filtros interativos
Os filtros são botões nativos com estado premido anunciado, e o número de resultados é comunicado numa região live após cada alteração.
O que foi entregue.
- Início
- Saxe (Lyon 3) — ficha completa
- Vaise (Lyon 9) — ficha completa
- Guia das cervejas
- Tapas e cocktails
- Contacto
As etapas do projeto.
Estratégia multiendereço
Decisão um domínio / duas páginas, marcação por estabelecimento.
Conteúdo de degustação
Estilos, amargor, harmonizações: a carta torna-se um guia.
Design
Base comum, personalidade por endereço.
Desenvolvimento
Dados tipados, animações carregadas a pedido.
O que nos perguntam com frequência.
Outros projetos
Conformidade RGPD & SaaSKonsent by Kayzen
Um editor de banners que audita banners é juiz em causa própria: a independência era o produto.
Cibersegurança ofensiva & SaaSSentinel by Kayzen
Vender um produto de segurança a engenheiros: cada afirmação tinha de ser demonstrável.
Dados & Serviço meteorológicoMétéo Climat France
358 páginas indexáveis, um mapa animado em 72 horizontes — e nem uma linha de framework.
O mesmo nível de exigência, para o seu site.
Auditoria gratuita do seu site atual, orçamento em 24 h e um raciocínio por escrito — como o que acabou de ler. Pagamento em três prestações sem juros; apoios locais verificados antes da assinatura.