Welcome to our café's 3D web application—a cutting-edge platform with a user-friendly interface featuring a circular menu, stunning gallery, music control, loading animation, and explore overlay. Developed using React for its modular architecture and styled with Tailwind CSS for a modern, responsive design. The application leverages 3D capabilities to enhance user interaction and visual appeal.
- Clone the repository:
git clone https://github.com/Mausam100/Amaya.git - Navigate to the project directory:
cd Amaya - Install the dependencies:
npm install
- Start the development server:
npm run dev - Open your browser and go to
http://localhost:5173to explore the application.
Located in src/components/Header/CircularMenu.jsx, this component provides a circular menu with seamless animations for opening and closing, enhancing user engagement.
Found in src/components/Header/Gallery.jsx, this component showcases a visually striking gallery of café images, complete with hover effects to elevate the user experience.
Situated in src/components/Header/MusicButton.jsx, this component offers a button for users to effortlessly play or pause background music.
Available in src/components/Overlayers/Loader.jsx, this component features a loading animation, allowing users to choose to enter the site with or without music.
Positioned in src/components/Overlayers/ExploreOverlay.jsx, this component displays an overlay inviting users to explore various sections of the café.
Located in src/components/Overlayers/BookingFrom.jsx, this component provides a simple form for making café reservations.
- React
- Tailwind CSS
- GSAP (GreenSock Animation Platform)
- @react-three/fiber
- @react-three/drei
This project is distributed under the MIT License. For more details, refer to the LICENSE file.
Visit the live application at amaya-sable.vercel.app