https://github.com/fahadshahbaz/refokus
Refokus Website Clone is a sleek single-page app built with React JS and Tailwind CSS, featuring smooth scrolling with Locomotive Scroll and engaging animations via Framer Motion.
https://github.com/fahadshahbaz/refokus
animations framer-motion frontend-developer frontendproject reactjs responsive-web-design tailwindcss
Last synced: 8 months ago
JSON representation
Refokus Website Clone is a sleek single-page app built with React JS and Tailwind CSS, featuring smooth scrolling with Locomotive Scroll and engaging animations via Framer Motion.
- Host: GitHub
- URL: https://github.com/fahadshahbaz/refokus
- Owner: fahadshahbaz
- Created: 2024-09-13T12:59:54.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-19T07:33:46.000Z (9 months ago)
- Last Synced: 2025-07-28T08:56:38.083Z (9 months ago)
- Topics: animations, framer-motion, frontend-developer, frontendproject, reactjs, responsive-web-design, tailwindcss
- Language: JavaScript
- Homepage: https://myrefokus.vercel.app
- Size: 28.2 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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**:
```bash
git clone https://github.com/fahadshahbaz/Refokus.git
```
2. **Navigate to the project directory**:
```bash
cd Refokus
```
3. Install dependencies with **pnpm**:
```bash
pnpm install
```
### ▶️ Running the Project
To start the development server:
```bash
pnpm dev
```
## 🌍 Live Demo
Explore the live version of Refokus Clone:
🔗 [Refokus Website Live](https://myrefokus.vercel.app)
## 🎉 Happy Coding
Thank you for checking out the **Refokus Website Clone** project! Happy coding! 🚀