Web Design & Development

Rio de Prata Restaurant Website

Single-page restaurant website featuring interactive menu display, filterable photo gallery with 20+ images across food/space/wine categories, customer reviews section, and integrated Google Maps with contact information.

Built with React 19 and TypeScript featuring sophisticated Framer Motion scroll animations, custom HSL-based color system, dual-font typography (Caliway serif, Elms Sans), and mobile-first responsive design.

Completed Date: May 2026
Visit Live Site
Project Details

Overview

Industry

Food & Beverage

Scope

Complete restaurant landing page with menu, gallery, reviews, and reservation system

Timeline

2 weeks from design to launch

The Problem

Challenge

Rio de Prata, a modern Portuguese and Mediterranean restaurant beside Jardins Braço de Prata in Lisbon, needed a sophisticated web presence to match their refined yet welcoming brand. The challenge was to create a website that showcases their cuisine, atmosphere, and location while providing essential functionality like reservations and menu information, all in a design that feels elegant without being pretentious.

Our Approach

Solution

We developed a single-page React application with smooth scroll navigation and custom Framer Motion animations throughout. The design system uses a carefully crafted color palette of rich browns and warm tones with HSL-based semantic tokens for consistency. We implemented a dual-font typography system (Caliway serif for headings, Elms Sans for body) to balance elegance with readability. The interactive gallery features 20+ professional photos organized into filterable categories, and we integrated a third-party reservation system for seamless booking. Every section was designed mobile-first to ensure flawless performance across all devices.

What's Included

Key Features

Responsive Design
Interactive Gallery
Smooth Animations
Online Reservations
Google Maps
Customer Reviews
Mobile-First
Restaurant Website
Performance

Results

Custom HSL tokens
Design System
Fully theme-consistent with semantic color system
60fps animations
Performance
Smooth Framer Motion scroll effects on all devices
20+ images
Gallery
Filterable photo gallery with food/space/wine categories
4 breakpoints
Mobile-First
Optimized responsive design for all screen sizes
Technology

Tech Stack

React 19
TypeScript
Vite
Tailwind CSS 4.x
Framer Motion
shadcn/ui
React Hook Form
Yup
React Leaflet
Firebase Hosting
Lucide React
Get Started

Ready to Start Your Project?

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

Rio de Prata Restaurant Website | Portfolio | low-key solutions