Added scroll animations in the website.

package.json

@@ -3,10 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.4",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
+    "react-awesome-reveal": "^4.2.11",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
     "react-router-dom": "^6.16.0",

src/Components/CartItems/CartItems.jsx

@@ -3,6 +3,7 @@ import "./CartItems.css";
 import { ShopContext } from "../../Context/ShopContext";
 import remove_icon from "../Assets/cart_cross_icon.png";
 import placeholder_image from "../Assets/empty-cart.png";
+import { Fade } from "react-awesome-reveal";
 
 const CartItems = () => {
   const { cartItems, removeFromCart, getTotalCartAmount, theme } =
@@ -19,14 +20,17 @@ const CartItems = () => {
   return (
     <div className="cartitems">
       <div className={`cartitems-format-main ci_${theme}`}>
+        <Fade direction="down">
         <p>Products</p>
         <p>Title</p>
         <p>Price</p>
         <p>Size</p>
         <p>Quantity</p>
         <p>Total</p>
         <p>Remove</p>
+        </Fade>
       </div>
+      <Fade>
       {isEmptyCart && (
         <div className="empty-cart">
           <img
@@ -105,6 +109,7 @@ const CartItems = () => {
           </div>
         </div>
       </div>
+      </Fade>
     </div>
   );
 };

src/Components/Footer/Footer.jsx

@@ -6,11 +6,13 @@ import pintester_icon from "../Assets/pintester_icon.png";
 import whatsapp_icon from "../Assets/whatsapp_icon.png";
 import { Link } from "react-router-dom";
 import { ShopContext } from "../../Context/ShopContext";
+import { Fade } from "react-awesome-reveal";
 
 const Footer = () => {
   const { theme } = useContext(ShopContext);
   return (
     <div className="footer">
+      <Fade delay={3}>
       <div className="footer-logo">
         <img src={footer_logo} alt="" />
         <p className={`footer_${theme}`}>ShopNex</p>
@@ -45,8 +47,11 @@ const Footer = () => {
       </div>
       <div className={`footer-copyright_${theme}`}>
         <hr className={`hr_${theme}`} />
+        <Fade direction="up">
         <p>Copyright @ {new Date().getFullYear()} - All Rights Reserved</p>
+        </Fade>
       </div>
+      </Fade>
     </div>
   );
 };

src/Components/Hero/Hero.jsx

@@ -5,30 +5,39 @@ import arrow_icon from "../Assets/arrow.png";
 import hero_image from "../Assets/hero_image.png";
 import { ShopContext } from "../../Context/ShopContext";
 import { Link } from "react-router-dom";
+import { Fade, Slide } from "react-awesome-reveal";
 
 const Hero = () => {
   const { theme } = useContext(ShopContext);
   return (
     <div className={"hero_" + theme}>
       <div className="hero-left">
+        <Fade direction="down">
         <h2 className={"h2h_" + theme}>NEW ARRIVALS ONLY</h2>
+        </Fade>
         <div>
+          <Fade>
           <div className="hero-hand-icon">
             <p className={"ph_" + theme}>New</p>
             <img src={hand_icon} alt="" />
           </div>
           <p className={"ph_" + theme}>Collections</p>
           <p className={"ph_" + theme}>For Everyone</p>
+          </Fade>
         </div>
         <Link className="link" to={"/collections"}>
+          <Slide direction="up">
           <div className="hero-latest-btn">
             <div className={"div_" + theme}>Latest Collection</div>
             <img src={arrow_icon} alt="" />
           </div>
+          </Slide>
         </Link>
       </div>
       <div className="hero-right">
+        <Fade>
         <img src={hero_image} alt="" />
+        </Fade>
       </div>
     </div>
   );

src/Components/Item/Item.jsx

@@ -2,10 +2,12 @@ import React, { useContext } from 'react'
 import './Item.css'
 import { Link } from 'react-router-dom'
 import { ShopContext } from '../../Context/ShopContext'
+import { Fade } from "react-awesome-reveal";
 
 const Item = (props) => {
     const {theme}=useContext(ShopContext);
     return (
+        <Fade>
         <div className='item'>
             <Link to={`/product/${props.id}`}> <img onClick={window.scrollTo(0,0)} src={props.image} alt="" /></Link>
             <p className={`pit_${theme}`}>{props.name}</p><p className={`pit_${theme}`}>{props.id}</p>
@@ -14,6 +16,7 @@ const Item = (props) => {
                 <div className={`item-price-old_${theme}`}>${props.old_price}</div>
             </div>
         </div>
+        </Fade>
     )
 }