DMR Sushi is a high-end, luxury restaurant landing page designed to provide a seamless and immersive user experience. This project showcases modern frontend techniques including ScrollSpy navigation, Sticky Glassmorphism UI, and Advanced State Management for a shopping cart.
- 🏆 Luxury UI/UX: A dark-themed, gold-accented interface using Cinzel and Great Vibes typography.
- 📍 Smart Navigation (ScrollSpy): Navbar automatically highlights the active section as the user scrolls.
- 🛍️ Integrated Cart System: Add to cart, adjust quantities, and real-time total calculations with micro-interactions.
- 🚀 Performance Optimized: Manual memoization and optimized asset loading for a 100/100 Lighthouse score.
- 🪄 Micro-interactions: Smooth CSS transitions, loading states for checkouts, and reveal-on-scroll animations.
- 📱 Fully Responsive: Crafting a consistent experience across Desktop, Tablet, and Mobile.
- Framework: React.js (Hooks & Context API)
- Styling: Tailwind CSS (Custom Theme Configuration)
- Icons: Lucide React
- Notifications: SweetAlert2 (Premium Dark Theme)
- Deployment: Vercel / Netlify
| Desktop View | Cart Interaction |
|---|---|
- Clone the repository:
git clone [https://github.com/your-username/react-luxury-sushi-web.git](https://github.com/your-username/react-luxury-sushi-web.git)
Install dependencies:
Bash
npm install Start the development server:
Bash
npm run dev 🧠 What I Learned During the development of this project, I focused on:
Handling Ref Access during Render errors in React.
Implementing a generic Smooth Scroll function that handles navbar offsets.
Creating a Sticky Header that responds to scroll events with glassmorphism effects.
🤝 Contributing Contributions, issues, and feature requests are welcome! Feel free to check the issues page.