Web Design & Development

Feito ó Bife Website

Portuguese steakhouse website featuring interactive digital menu with 70+ dishes across 9 categories (starters, steaks, grilled items, seafood, vegetarian, sides, desserts, wines, beverages), masonry-style image gallery with lightbox, customer reviews, and interactive location map with opening hours.

Built with React 19 and TypeScript using custom warm brown and lime-green color palette, smooth Framer Motion scroll animations, elegant typography combining Playfair Display and Nunito, and mobile-first responsive design with shadcn/ui components.

Completed Date: March 2026
Visit Live Site
Project Details

Overview

Industry

Food & Beverage

Scope

Complete restaurant landing page with digital menu system, image gallery, customer testimonials section, and interactive location finder with integrated map and business hours

Timeline

4 weeks from initial setup to production launch

The Problem

Challenge

The client, a Portuguese steakhouse in Mafra, needed a modern digital presence to showcase their extensive menu of traditional Portuguese cuisine, highlight their authentic restaurant atmosphere, and make it easy for customers to find location details and contact information. They lacked any online presence and needed a solution that could present their comprehensive menu (including 70+ dishes, extensive wine selection, and daily specials) in an organized, appetizing way while capturing the warm, rustic character of their establishment.

Our Approach

Solution

Developed a single-page React application with smooth scroll navigation between five key sections (Hero, Menu, Gallery, Reviews, Location). Created an interactive menu system that supports multiple categories, subcategories (for wines), pricing variations, and special badges for house specialties. Implemented a masonry gallery layout to showcase the restaurant's ambiance and signature dishes with zoom-on-hover effects and lightbox preview. Integrated React Leaflet for an interactive map with custom branded marker, multiple map layers (standard/satellite), and a detailed information card displaying hours and contact details. Applied Framer Motion for polished entrance animations and scroll-triggered reveals throughout the site.

What's Included

Key Features

Responsive Mobile-First Design
Interactive Digital Menu
Smooth Scroll Navigation
Masonry Gallery Layout
Customer Reviews
Interactive Map Integration
Scroll-Triggered Animations
Custom Brand Color Palette
Performance

Results

100%
Mobile Responsive
Mobile-first design approach ensures perfect display on all devices
95%
Image Optimization
Gallery uses WebP format, reducing image sizes by 50-70%
2.5s
Build Performance
Fast build times enable rapid iteration and deployment
60fps
Animation Quality
Framer Motion provides butter-smooth scroll animations and transitions
Technology

Tech Stack

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
Get Started

Ready to Start Your Project?

Let's discuss how we can create a stunning website tailored to your business needs.

Feito ó Bife Website | Portfolio | low-key solutions