Sol Luna — Digital Menu Experience
Overview
Sol Luna is a premium, mobile-first digital menu designed for Sol Luna / The Coffee Athens in Monastiraki, Athens.
The experience transforms a traditional restaurant menu into an elegant, app-like interface where guests can explore coffee, drinks, food, appetizers, breakfast, desserts, and the complete menu through rich imagery, smooth transitions, and intuitive interactions.
Features
- Bilingual English and Greek experience
- Greek-first default language
- Light, dark, and system-aware themes
- Responsive mobile-first design
- Animated landing page with scroll-based transitions
- Full digital menu browsing experience
- Coffee, drinks, foods, appetizers, breakfast, and dessert categories
- Searchable menu items
- Category filtering
- Grid and list viewing modes
- Interactive food and drink previews
- Ratings and pricing display
- Keyboard navigation between menu items
- Animated mobile menu hub
- Direct table reservations through phone and WhatsApp
- Google Maps and Apple Maps directions
- Restaurant location and opening hours
- Optimized local WebP menu images
- Theme-aware branding and navigation
- Smooth page transitions and micro-interactions
User Experience
The homepage introduces the restaurant through a cinematic hero section, brand storytelling, and clear actions to explore the menu or reserve a table.
The menu experience is designed for fast browsing on mobile devices. Guests can search for items, filter by category, switch between grid and list layouts, and open an item preview without leaving the current page.
The interface also includes bilingual content, responsive navigation, dynamic theming, restaurant information, and direct contact options for reservations.
Menu Routes
| Route | Section |
|---|---|
/ | Restaurant landing page |
/menu | Full menu |
/coffee | Coffee |
/drinks | Drinks and cocktails |
/foods | Main dishes |
/appetizer | Starters and salads |
/breakfast | Breakfast and brunch |
/dessert | Desserts and ice cream |
Technology Stack
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- Framer Motion
- next-themes
- Lucide React
- Embla Carousel
- Custom React language context
- Vercel
Project Structure
app/
├── components/
│ ├── layout/ # Header, footer, and mobile navigation
│ ├── menu/ # Reusable searchable menu catalog
│ ├── providers/ # Theme provider
│ └── ui/ # Logos, reveal effects, and interface details
├── config/
│ ├── fullMenu.ts # Food, appetizer, salad, and dessert data
│ ├── breakfastMenu.ts # Breakfast and brunch data
│ ├── drinksMenu.ts # Drinks data
│ └── dictionary.ts # English and Greek translations
├── hooks/
│ └── LanguageContext.tsx
├── coffee/
├── drinks/
├── foods/
├── appetizer/
├── breakfast/
├── dessert/
└── menu/
public/
└── menu-item-images/ # Local food and drink photography
Local Development
Requirements
- Node.js 20+
- npm, pnpm, or yarn
Installation
npm install
Start the development server
npm run dev
Open the application at:
http://localhost:3000
Production build
npm run build
npm start
Lint
npm run lint
Deployment
The project is ready to deploy on Vercel, Netlify, or any Node.js hosting platform.
No additional environment variables are required for the standard setup.
Design Direction
The visual identity combines editorial typography, warm gold accents, cinematic imagery, soft glass effects, and restrained motion. The goal is to make browsing feel calm, premium, and effortless while preserving the clarity and speed expected from a modern digital menu.
Credits
Built for Sol Luna · The Coffee Athens
Monastiraki, Athens