debrajhyper/marqeta

This project is a clone of Marqeta as part of the gsap animation. The project involves implementing various animations and ensuring the overall structure and performance of the website is up to standards.

Marqeta Website Clone

🌐 Website: marqeta-ui.vercel.app

This project is a clone of Marqeta as part of the gsap animation. The project involves 
implementing various animations and ensuring the overall structure and performance of the 
website is up to standards.

🤌🏻 Introduction

This assignment aims to replicate Marqeta Sample using React and GSAP for animations. The primary focus is on component reusability, state management, CSS style guide adherence, and webpage performance.

🎉 Features

• [✔️] Mandatory Card Animation: Card animation implemented starting from the first section.
• [✔️] Additional Animations: Implemented text and element animation on scroll using GSAP and potentially other libraries.
• [✔️] Static UI: Reuse static HTML/CSS code from the provided website.
• [✔️] React Component Structure: Emphasized reusability and readability.
• [✔️] State Management: Proper state management using React hooks.
• [✔️] CSS Style Guide: Following a consistent CSS style guide.
• [✔️] Webpage Performance: Ensuring the website is optimized for performance.

🕹️ Technologies Used

• React
• Vite
• Javascript
• GSAP
• ScrollTrigger
• Webpack
• Babel
• HTML5/CSS3
• Dot Lottie
• Owl Carousel

⚡ Performance

The website optimizes performance by lazy loading components and assets, minimizing render-blocking resources, and optimizing images.

🪄 Credits

Marqeta - The source of inspiration for this project.

🏃🏻‍♂️ Run Locally

Clone the project

    https://github.com/debrajhyper/marqeta.git

Go to the project directory

    cd marqeta

Install dependencies

    $npm install

Start the dev server

    npx vite --port=4000