🌿 Cozy Leaf — Vegan Restaurant Website

(open in new tab)

A modern, animated, and fully responsive restaurant site built with React, Tailwind CSS, and GSAP. It features a custom animated navigation, menu with tabs, ordering with cart persistence, events calendar with promos, and elegant page transitions.

Built by Xebec13.

Features

• 🎭 Entry “curtain” animation for the landing navigation (GSAP + clip-path)
• 🧭 Home tiles navigation with subtle hovers and wind-leaf detail
• 🍽️ Menu with tabs (starters, mains, desserts, drinks) + soft readability background
• 🛒 Order flow with cart (add/remove, quantity control, localStorage persistence)
• 🎞️ Gallery with staggered reveal and responsive grid
• 📝 Reservation form with basic client-side validation
• 🌸 Global Sakura petals ambiance (performance-friendly)
• 📱 Fully responsive across breakpoints

---

Tech Stack

• React + React Router
• Tailwind CSS
• GSAP
• React Icons
• Vite (dev server & build)

---

🎨 Color Palette

Name	HSLA
Seashell	hsla(16, 33%, 91%, 1)
Thulian Pink	hsla(333, 78%, 67%, 1)
Carolina Blue	hsla(203, 50%, 62%, 1)
Viridian	hsla(167, 35%, 38%, 1)
Shocking Pink	hsla(318, 60%, 70%, 1)
Mauve	hsla(311, 31%, 73%, 1)

🏠 Navigation

📖 Menu

🛒 Order

📸 Gallery

📅 Events

ℹ️ About & Contact

🚀 Future Improvements

• 🔗 Integrate with a real API (dynamic menu & events data)
• 📩 Reservation system connected to backend
• 🛠️ Refactor components for higher reusability
• 🌍 Multi-language support
• 📊 Accessibility refinements (ARIA roles, better contrast)

🚀 Installation

1. Clone the repository:
   `## 🚀 Installation

2. Clone the repository:
   git clone https://github.com/Xebec13/Cozy-Leaf.git

3. Install dependencies and run: npm install npm run dev