Refokus Website Clone - React & Tailwind CSS

The Refokus Website Clone is a modern single-page application built with React JS and styled using Tailwind CSS. This project focuses on recreating the sleek and sophisticated design of the Refokus website with smooth scrolling effects powered by Locomotive Scroll and engaging animations using Framer Motion.

✨ Key Features

• 🎨 Modern Design: Faithfully replicate the clean and professional look of the Refokus website.
• 📱 Responsive Layout: Optimized for all devices, from desktops to mobile phones, ensuring a seamless user experience.
• 🌀 Smooth Scrolling: Implemented with Locomotive Scroll for a smooth, engaging experience.
• ⚛️ Built with React: Fast, efficient, and scalable architecture with React JS.
• 🎉 Animations: Enhance user interactions with Framer Motion for smooth animations.

🛠️ Technologies Used

• ⚛️ React JS: JavaScript library for building dynamic user interfaces.
• 🎨 Tailwind CSS: A utility-first CSS framework for quick and efficient UI styling.
• 🌀 Locomotive Scroll: JavaScript library for creating smooth, modern scrolling effects.
• 🎥 Framer Motion: A library for animations that makes UI interactions more engaging.
• 📄 HTML5 & CSS3: Core web technologies for structuring and styling the app.
• 🖥️ JavaScript (ES6+): Modern JavaScript features for added interactivity.

🎯 Purpose

This project is perfect for developers looking to:

• 🖌️ Understand responsive web design principles.
• 🚀 Learn how to integrate smooth scrolling effects with React apps.
• ✨ Explore animations with Framer Motion to enhance user experience.
• 💻 Practice building single-page applications (SPA) using React JS and Tailwind CSS.

🚀 Getting Started

To run this project locally, follow these steps:

📋 Prerequisites

Make sure you have Node.js and pnpm (preferred package manager) installed.

🔧 Installation

1. Clone the repository:

   git clone https://github.com/fahadshahbaz/Refokus.git

2. Navigate to the project directory:

   cd Refokus

3. Install dependencies with pnpm:

   pnpm install

▶️ Running the Project

To start the development server:

pnpm dev

🌍 Live Demo

Explore the live version of Refokus Clone:
🔗 Refokus Website Live

🎉 Happy Coding

Thank you for checking out the Refokus Website Clone project! Happy coding! 🚀