NOIRÉ — Modern Cafe Website
تفاصيل العمل
Project Overview
The project was developed as a real-world business website concept for a cafe. It focuses on:
Clear customer-focused navigation
Professional cafe branding
Menu and pricing presentation
Responsive design for desktop, tablet, and mobile screens
Table reservation interaction
Visual storytelling through photography and animation
Reusable React components and separated page files
Features
Homepage
Hero banner with cafe introduction
Primary calls to action for the menu and cafe story
Opening status and location information
Cafe philosophy section
Featured menu items
Visit information
Customer testimonials
Menu
The menu includes clearly separated categories:
Coffee
Fast Food
Desserts
Beverages
Special Dishes
Each category includes:
Category image
Item image
Item name
Short description
Price
About
Cafe story
Hospitality philosophy
Quality and sourcing values
Environment and community experience
Gallery
Cafe interior imagery
Food and drink imagery
Animated gallery card reveals
Responsive gallery layout
Contact
Cafe address
Phone number
Email address
Call link
Email link
Google Maps link
Reservation Form
Name field
Phone field
Reservation date
Reservation time
Guest count
Special requests field
Required-field validation
Phone format validation
Past-date prevention
Guest count limits
Confirmation message after submission
The reservation form is currently a frontend demonstration. It does not send data to a backend or database.
Navigation and Footer
React Router navigation
Active navigation states
Reusable header and footer components
Phone and email links
Instagram and Facebook links
Responsive layout
Animations
Cinematic first-load intro animation
GSAP scroll-triggered reveals
Menu and gallery reveal animations
Hover transitions for buttons and cards
Floating hero imagery
Reduced-motion support for accessibility
Technologies
React
Vite
React Router
GSAP
Lucide React
CSS
Google-hosted Unsplash imagery
Fontsource fonts:
Cormorant Garamond
Manrope