https://github.com/pranjal-jamuar/refokus-clone

This is a clone for the landing page of "refokus", an awwwards winning website, I have taken the website and added a few takes of my own onto it with respect to the animations and smooth scrolling features.
https://github.com/pranjal-jamuar/refokus-clone

framer-motion locomotive-scroll-v5 locomotivejs reactjs reactjs-project tailwindcss

Last synced: about 1 month ago
JSON representation

This is a clone for the landing page of "refokus", an awwwards winning website, I have taken the website and added a few takes of my own onto it with respect to the animations and smooth scrolling features.

• Host: GitHub
• URL: https://github.com/pranjal-jamuar/refokus-clone
• Owner: Pranjal-Jamuar
• Created: 2024-12-29T00:09:00.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-12-29T00:58:44.000Z (about 1 month ago)
• Last Synced: 2024-12-29T01:21:52.030Z (about 1 month ago)
• Topics: framer-motion, locomotive-scroll-v5, locomotivejs, reactjs, reactjs-project, tailwindcss
• Language: JavaScript
• Homepage: https://refokus-clone-pranjal.vercel.app/
• Size: 27.4 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Refokus Clone Website ✨

This project is a React-based clone of the Refokus website, designed to replicate its layout, design, and functionalities while introducing enhanced features for a smoother and more interactive user experience.

## Features

- **React Component Structure:** Modular design replicating the original website.

- **Smooth Scrolling:** Powered by Locomotive Scroll for a seamless scrolling experience.

- **Dynamic Animations:** On-scroll image transitions, hover-activated video playback, and animated marquee sections using Framer Motion.

- **Enhanced Styling:** Styled with Tailwind CSS for a polished, responsive layout.

## Tech Stack

- **React JS**: Component-based architecture.

- **Locomotive Scroll**: Smooth scrolling.

- **Framer Motion**: Dynamic animations.

- **Tailwind CSS**: Modern styling framework.

- **Vercel**: Deployment platform.

## Improvements

- **Lag-Free Scrolling:** Fixed the laggy scrolling issue present in the original site.

- **Better Performance:** Optimized for faster load times and smoother transitions.

- **Interactive Elements:** Added hover animations for cards and enhanced user engagement.

## Screenshot

![Screenshot](public/ss.png)

## Contributing

Contributions are welcome! Feel free to open issues or submit pull requests to improve the project.