Lean Bulls Gym

Lean Bulls Gym is a modern, responsive website for Lean Bulls Gym, built with React and TypeScript, featuring advanced animations powered by GSAP (GreenSock Animation Platform). The website provides an immersive experience for visitors and includes sections for pricing, gallery, contact information, and an animated preloader.

Table of Contents

• Demo
• Features
• Technologies Used
• Installation
• Usage
• License

Demo

You can view a live demo of the project here: Live Demo

Features

• Preloader Animation:

  • A custom animated preloader sequence featuring three distinct gym logos (top, center, bottom).
  • Each logo appears in sequence with smooth scaling and fading effects using GSAP.

• Responsive Design:

  • Fully responsive layout that adapts to different devices and screen sizes.
  • Ensures a consistent and user-friendly experience across desktops, tablets, and mobile devices.

• Smooth Scrolling:

  • Integrated Lenis library for seamless, smooth scrolling between sections.
  • Enhances user experience by providing a fluid navigation experience.

• GSAP Animations:

  • Advanced animations using GSAP for dynamic transitions and interactive components.
  • Includes animated gallery elements, pricing cards, and more.

• Interactive Pricing Section:

  • Displays multiple subscription plans with detailed descriptions and features.
  • Interactive cards with hover effects to highlight different pricing options.

• Lightbox Gallery:

  • A gallery section where users can click on images to view larger versions in a lightbox.
  • Includes smooth transitions and click-to-close functionality with GSAP animations.

• Footer with Social Media Links:

  • Footer section featuring links to social media profiles (Facebook, Instagram).
  • Contains contact information, business hours, and additional branding elements.

• Clean, Modern Aesthetics:

  • Designed with a minimal yet powerful aesthetic, using custom fonts and a tailored color scheme.
  • Focuses on a sleek and professional appearance that aligns with the gym's brand.

Technologies Used

• React: Frontend framework for building UI components.
• TypeScript: Ensures static type checking and a more reliable codebase.
• GSAP: GreenSock Animation Platform for smooth and performant animations.
• TailwindCSS: Utility-first CSS framework for rapid UI development.
• FontAwesome: For social media icons and additional UI elements.
• Lenis: Smooth scrolling library for seamless navigation between sections.

Installation

To get started with this project, clone the repository and install the dependencies:

git clone https://github.com/66HEX/lean-bulls-gym.git
cd lean-bulls-gym
npm install

Usage

npm run dev

License

This project is licensed under the MIT License. See the LICENSE file for details.

Designed by Marek Jóźwiak.