A modern gym landing page designed with React, TypeScript, NextUI, and Framer Motion. The site features sleek UI components, dynamic animations, and smooth transitions, delivering an engaging user experience while showcasing gym app services and promotions.
ReactJSTypescriptTailwind CSSNext UIFramer motion
- Fully responsive layout, optimized for desktops, tablets, and mobile devices.
- Framer Motion animations for section transitions.
- Text animations using the whileInView in framer motion.
- The resuable components
- Eye-catching hero banner with a motivational tagline.
I was watching a design trends and some websites shown in video were great in UI so I decided to build one of them as it help me learn the new concepts such as how to make the good sleek animations using the framer motions and how and why the reusablity is important in react. First I built the banner which was a text heavy and implemented resusable animation section later on I built the text animation component which was basically a scroll trigger text animation later on to make more look greate in UI I built a bento grid component with the help of tailwind classes such as col-span and row-span and after that a testimonial and footer component (CTA). To maintain the reusablity I created a constant file which contains the text for paragraphs and testimonials as i can also use in some other sections.
Each part of this project helped me understand more about building responsive animated react apps , managing complex animations , resuablity , responsive designs and improving user experience , learning new things, and improving my skills for future work.
To run the project in your local environment, follow these steps:
- Clone the repository to your local machine.
- Navigate to the project directory and run npm install or yarn to install the required dependencies.
- Start the project with npm run dev or yarn dev.
- Open http://localhost:5173 (or the address displayed in your console) in your web browser to view the application.