A captivating and responsive landing page designed for a high-end mocktail bar or refreshing drinks brand. This project showcases elegant UI/UX, built purely on the FrontEnd (no functionality), utilizing Next.js, Tailwind CSS, and MUI (Material-UI), significantly enhanced with GSAP ScrollTrigger and Animations for a dynamic, visually engaging experience.
This project is an elegant, high-performance landing page for a modern beverage concept. The primary goal was to create an immersive visual experience that highlights the craftsmanship and quality of non-alcoholic drinks (mocktails).
It serves as a demonstration of advanced frontend techniques, particularly:
- Complex GSAP ScrollTrigger animations for sections like the ingredients reveal.
- Perfect responsive design tailored for modern devices.
- Seamless integration between Tailwind CSS utilities and MUI components.
The project is FrontEnd only and focuses purely on the presentation layer.
- Immersive GSAP Animations: Utilizes ScrollTrigger for smooth, time-based animations (like the text and image reveals discussed previously) and general UI polish.
- Beverage-Centric Design: Focuses on visually appealing presentation of drinks, ingredients, and customer reviews.
- Responsive Design: Ensures a flawless viewing experience across desktop, tablet, and mobile screens.
- MUI Integration: Leverages Material-UI components (Grid, Card, Typography) for structured, consistent design.
- Utility-First Styling: Built primarily with Tailwind CSS for rapid and customizable layout implementation.
- FrontEnd Only: Focused exclusively on modern user interface and layout.
- Next.js – React framework for server-side rendering and static site generation
- React – Core JavaScript library for building the UI components
- Tailwind CSS – Utility-first CSS framework for efficient and flexible styling
- MUI (Material-UI) – High-quality React components for a modern look
- GSAP (GreenSock) – Advanced JavaScript library for high-performance animations (including ScrollTrigger)
- JavaScript / TypeScript – Core programming languages used
- Clone the repository:
git clone https://github.com/Wolf-Root/vitalways.git- Install dependencies:
npm install- Run the development server:
npm run devOpen http://localhost:3000 in your browser to view the project.
- Fork the repository
- Create a feature branch:
git checkout -b feature/AmazingFeature- Commit your changes:
git commit -m "Add some AmazingFeature"- Push to your branch:
git push origin feature/AmazingFeature- Open a Pull Request
This project is distributed under the MIT License. See LICENSE for more information.
