This project is a Yoga Studio website built using TypeScript and Next.js. It incorporates various libraries and technologies such as Framer Motion, Swiper, React-Scroll, and React-Countup. The frontend design is powered by Tailwind CSS.
- TypeScript
- Next.js
- Framer Motion
- Swiper
- React-Scroll
- React-Countup
- Tailwind CSS
In this project, I learned how to integrate animations using Framer Motion and create interactive scrolling effects with React-Scroll. Swiper was utilized for creating dynamic sliders, and React-Countup was employed to animate numerical data. The frontend styling was implemented using Tailwind CSS for a clean and responsive design.
- Animations: Framer Motion was used to add smooth animations to various elements on the website, enhancing the user experience.
- Slider: The project utilizes Swiper for creating dynamic sliders to showcase different sections and content.
- Interactive Scrolling: React-Scroll was implemented to enable smooth scrolling between sections of the website.
- Numerical Animation: React-Countup was utilized to animate numerical data, providing engaging visual feedback.
The project consists of multiple components organized into different sections:
- Header: Contains the navigation menu and logo.
- Hero: Displays a slideshow with engaging messages and calls-to-action.
- About: Provides information about the studio, including featured services and achievements.
- Classes: Showcases different types of yoga classes offered by the studio.
- Team: Provides information about trainers.
- Prices: Provides information about different membership plans.
- Testimonial: Showcases testimonial.
- Blog: Displays recent blog posts related to yoga and wellness.
- Footer: Includes contact information, recent blog posts, a gallery, and a newsletter subscription form.
To run the project locally, follow these steps:
- Clone the repository to your local machine.
- Install dependencies using
npm install. - Start the development server with
npm run dev.
Feel free to contribute by submitting bug reports, feature requests, or pull requests.