Web Design e Desenvolvimento

Website Feito ó Bife

Website de churrascaria portuguesa com menu digital interativo com mais de 70 pratos em 9 categorias (entradas, bifes, grelhados, peixe, vegetariano, acompanhamentos, sobremesas, vinhos e bebidas), galeria de imagens em mosaico com lightbox, avaliações de clientes e mapa de localização interativo com horário de funcionamento.

Construído com React 19 e TypeScript, com uma paleta personalizada de castanho quente e verde-lima, animações de scroll fluidas em Framer Motion, tipografia elegante que combina Playfair Display e Nunito, e design responsivo mobile-first com componentes shadcn/ui.

Data de Conclusão: março de 2026
Visitar Site
Detalhes do Projeto

Visão Geral

Setor

Restauração e Bebidas

Âmbito

Landing page completa de restaurante com sistema de menu digital, galeria de imagens, secção de testemunhos de clientes e localizador interativo com mapa integrado e horário de funcionamento

Prazo

4 semanas da configuração inicial ao lançamento em produção

O Problema

Desafio

O cliente, uma churrascaria portuguesa em Mafra, precisava de uma presença digital moderna para mostrar o seu extenso menu de cozinha tradicional portuguesa, destacar o ambiente autêntico do restaurante e facilitar aos clientes o acesso à localização e aos contactos. Não tinham qualquer presença online e precisavam de uma solução capaz de apresentar o seu menu completo (mais de 70 pratos, uma vasta seleção de vinhos e sugestões diárias) de forma organizada e apetitosa, captando ao mesmo tempo o carácter caloroso e rústico do espaço.

A Nossa Abordagem

Solução

Desenvolvemos uma aplicação React de página única com navegação por scroll fluido entre cinco secções essenciais (Hero, Menu, Galeria, Avaliações e Localização). Criámos um sistema de menu interativo que suporta várias categorias, subcategorias (para os vinhos), variações de preço e distintivos especiais para as especialidades da casa. Implementámos uma galeria em mosaico para mostrar o ambiente e os pratos de assinatura do restaurante, com efeitos de zoom ao passar o cursor e pré-visualização em lightbox. Integrámos o React Leaflet para um mapa interativo com marcador personalizado da marca, várias camadas de mapa (standard/satélite) e um cartão informativo detalhado com horários e contactos. Aplicámos Framer Motion para animações de entrada cuidadas e revelações acionadas pelo scroll em todo o site.

O Que Está Incluído

Funcionalidades Principais

Design Responsivo Mobile-First
Menu Digital Interativo
Navegação com Scroll Fluido
Galeria em Mosaico
Avaliações de Clientes
Integração de Mapa Interativo
Animações Acionadas pelo Scroll
Paleta de Cores da Marca Personalizada
Desempenho

Resultados

100%
Responsivo em Mobile
A abordagem de design mobile-first garante uma apresentação perfeita em todos os dispositivos
95%
Otimização de Imagens
A galeria utiliza o formato WebP, reduzindo o tamanho das imagens em 50-70%
2.5s
Desempenho de Build
Tempos de build rápidos que permitem iteração e implementação ágeis
60fps
Qualidade das Animações
O Framer Motion garante animações de scroll e transições extremamente fluidas
Tecnologia

Stack Tecnológica

React 19
TypeScript 5.9
Vite 7
Tailwind CSS 3.4
shadcn/ui
Framer Motion 12
React Leaflet 5
React Hook Form 7
Yup 1.7
Firebase Hosting
Começar

Pronto para Iniciar o Seu Projeto?

Vamos falar sobre como podemos criar um website incrível à medida do seu negócio.

Website Feito ó Bife | Portfólio | low-key solutions