Merge branch 'main' of https://github.com/shohan-pherones/euphoria-ec…

…ommerce into abdullah
shohan-pherones · May 30, 2023 · d22ce99 · d22ce99
2 parents 4547ee2 + e21ba39
commit d22ce99
Show file tree

Hide file tree

Showing 15 changed files with 272 additions and 104 deletions.
diff --git a/components/Categories.jsx b/components/Categories.jsx
@@ -1,17 +1,34 @@
 import Link from "next/link";
+import AOS from "aos";
+import "aos/dist/aos.css";
+import { useEffect } from "react";
 
 const Category = () => {
+  useEffect(() => {
+    AOS.init();
+  }, []);
+
   return (
-    <div className="category wrapper my-20 flex flex-col gap-10">
+    <div className="category wrapper my-20 flex flex-col gap-10 overflow-x-hidden">
       <h2 className="section-title">Categories</h2>
       <div className="category-wrapper flex flex-col-2 gap-5">
-        <Link href={"products/men"} className="sq-men">
+        <Link
+          href={"products/men"}
+          className="sq-men"
+          data-aos="zoom-in"
+          data-aos-duration="1500"
+        >
           <div className="overlay"></div>
           <h3 className="category-title-men">
             <p>Men</p>
           </h3>
         </Link>
-        <Link href={"products/women"} className="sq-women">
+        <Link
+          href={"products/women"}
+          className="sq-women"
+          data-aos="zoom-in"
+          data-aos-duration="1500"
+        >
           <div className="overlay"></div>
           <h3 className="category-title-women">
             <p>Women</p>

diff --git a/components/Countdown.jsx b/components/Countdown.jsx
@@ -28,7 +28,7 @@ const CountdownTimer = ({ endDate }) => {
   }, [endDate]);
 
   return (
-    <div className="wrapper my-20 flex flex-col gap-10 items-center">
+    <div className="wrapper my-20 flex flex-col gap-10 items-center overflow-x-hidden">
       <h2 className="section-title text-center">April Sale Ends in</h2>
       <div className="text-center text-3xl md:text-6xl font-bold bg-rose-700 p-7 text-rose-100 px-10 w-full md:w-[40rem]">
         {expired ? (

diff --git a/components/Footer.jsx b/components/Footer.jsx
@@ -1,24 +1,39 @@
 import Link from "next/link";
+import { useEffect } from "react";
 import {
   FaFacebookF,
   FaLinkedinIn,
   FaInstagram,
   FaTwitter,
 } from "react-icons/fa";
+import AOS from "aos";
+import "aos/dist/aos.css";
 
 const Footer = () => {
+  useEffect(() => {
+    AOS.init();
+  }, []);
+
   return (
     <footer className="text-gray-300 bg-black py-20">
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 pb-20 wrapper w-full gap-16 md:gap-10 lg:gap-5 xl:gap-10 2xl:px-20 ">
         <div className="footer-col-1 flex flex-col items-start">
           <Link
+            data-aos="fade-up"
+            data-aos-duration="1000"
+            data-aos-delay="0"
             href="/"
             className="text-4xl md:text-2xl font-semibold text-rose-500 hover:text-white duration-300"
           >
             euphoria.
           </Link>
         </div>
-        <div className="footer-col-2 flex flex-col items-start">
+        <div
+          className="footer-col-2 flex flex-col items-start"
+          data-aos="fade-up"
+          data-aos-duration="1500"
+          data-aos-delay="300"
+        >
           <p className="follow-text uppercase tracking-wider text-gray-400">{`Don't forget to follow us`}</p>
           <div className="social-icons">
             <div className="icon-circle">
@@ -35,7 +50,12 @@ const Footer = () => {
             </div>
           </div>
         </div>
-        <div className="footer-col-3 flex flex-col items-start">
+        <div
+          className="footer-col-3 flex flex-col items-start"
+          data-aos="fade-up"
+          data-aos-duration="1500"
+          data-aos-delay="600"
+        >
           <p className="uppercase font-medium text-rose-500 tracking-wider">
             Useful Links
           </p>
@@ -67,7 +87,12 @@ const Footer = () => {
             </div>
           </div>
         </div>
-        <div className="footer-col-4 flex flex-col items-start xl:items-center gap-3">
+        <div
+          className="footer-col-4 flex flex-col items-start xl:items-center gap-3"
+          data-aos="flip-up"
+          data-aos-duration="1500"
+          data-aos-delay="1000"
+        >
           <p className="uppercase tracking-wider text-gray-400">
             Need more informations?
           </p>
@@ -78,7 +103,12 @@ const Footer = () => {
         </div>
       </div>
 
-      <p className="copyright border-t border-gray-500/40 pt-20 text-gray-400 wrapper text-center uppercase">
+      <p
+        className="copyright border-t border-gray-500/40 pt-20 text-gray-400 wrapper text-center uppercase"
+        data-aos="zoom-in-up"
+        data-aos-duration="800"
+        data-aos-delay="1300"
+      >
         &copy; {new Date().getFullYear()} Euphoria. All rights reserved.
       </p>
     </footer>

diff --git a/components/Gallery.jsx b/components/Gallery.jsx
@@ -7,57 +7,83 @@ const data = [
     id: 1,
     src: "https://images.pexels.com/photos/13565969/pexels-photo-13565969.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Women tops",
+    animStyle: "fade-right",
+    animDuration: "800",
+    animDelay: "250",
   },
   {
     id: 2,
     src: "https://images.pexels.com/photos/10041282/pexels-photo-10041282.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Women shirts",
+    animStyle: "fade-right",
+    animDuration: "800",
   },
   {
     id: 3,
     src: "https://images.pexels.com/photos/769731/pexels-photo-769731.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Men shirts",
+    animStyle: "fade-down",
+    animDuration: "800",
   },
   {
     id: 4,
     src: "https://images.pexels.com/photos/2453823/pexels-photo-2453823.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Men pants",
+    animStyle: "fade-down",
+    animDuration: "800",
+    animDelay: "250",
   },
   {
     id: 5,
     src: "https://images.pexels.com/photos/7473356/pexels-photo-7473356.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Women pants",
+    animStyle: "fade-up",
+    animDuration: "800",
+    animDelay: "500",
   },
   {
     id: 6,
     src: "https://images.pexels.com/photos/7848603/pexels-photo-7848603.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Men shirts",
+    animStyle: "fade-up",
+    animDuration: "800",
+    animDelay: "250",
   },
   {
     id: 7,
     src: "https://images.pexels.com/photos/1007018/pexels-photo-1007018.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Women skirts",
+    animStyle: "fade-up",
+    animDuration: "800",
   },
   {
     id: 8,
     src: "https://images.pexels.com/photos/4637874/pexels-photo-4637874.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Men shoes",
+    animStyle: "fade-left",
+    animDuration: "800",
   },
   {
     id: 9,
     src: "https://images.pexels.com/photos/5713302/pexels-photo-5713302.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Women shoes",
+    animStyle: "fade-left",
+    animDuration: "800",
+    animDelay: "250",
   },
   {
     id: 10,
     src: "https://images.pexels.com/photos/16131075/pexels-photo-16131075.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
     title: "Men jackets",
+    animStyle: "fade-left",
+    animDuration: "800",
+    animDelay: "500",
   },
 ];
 
 const Gallery = () => {
   return (
-    <div className="wrapper image-container my-20">
+    <div className="wrapper image-container my-20 overflow-x-hidden">
       <div className="text-center mb-10 flex flex-col gap-5">
         <span className="font-medium tracking-widest">{`LET'S SEE`}</span>
         <span className="section-title">GALLERY OF THE EUPHORIA</span>

diff --git a/components/GridItemForGallery.jsx b/components/GridItemForGallery.jsx
@@ -1,8 +1,20 @@
 import Image from "next/image";
+import { useEffect } from "react";
+import AOS from "aos";
+import "aos/dist/aos.css";
 
 const GridItemForGallery = ({ item }) => {
+  useEffect(() => {
+    AOS.init();
+  }, []);
+
   return (
-    <div className={`item${item.id}`}>
+    <div
+      className={`item${item.id}`}
+      data-aos={item.animStyle}
+      data-aos-duration={item.animDuration}
+      data-aos-delay={item.animDelay}
+    >
       <Image
         priority
         unoptimized

diff --git a/components/Slide.jsx b/components/Slide.jsx
@@ -1,16 +1,34 @@
 import Link from "next/link";
+import AOS from "aos";
+import "aos/dist/aos.css";
+import { useEffect } from "react";
 
 const Slide = ({ image }) => {
+  useEffect(() => {
+    AOS.init();
+  }, []);
+
   return (
     <div className="slide" style={{ backgroundImage: `url(${image.src})` }}>
       <div className="slide-text container mx-8 md:mx-10 xl:mx-20 flex flex-col items-start justify-center h-full gap-5 text-violet-50">
-        <h1 className="text-4xl md:text-6xl lg:text-7xl  font-semibold uppercase space-font z-10">
+        <h1
+          data-aos="fade-down"
+          data-aos-duration="1500"
+          className="text-4xl md:text-6xl lg:text-7xl  font-semibold uppercase space-font z-10"
+        >
           {image.headline}
         </h1>
-        <p className="w-2/3 lg:w-1/2 z-20 text-sm md:text-base lg:text-lg xl:text-xl">
+        <p
+          data-aos="fade-right"
+          data-aos-duration="1500"
+          className="w-2/3 lg:w-1/2 z-20 text-sm md:text-base lg:text-lg xl:text-xl"
+        >
           {image.body}
         </p>
         <Link
+          data-aos="fade-left"
+          data-aos-duration="1500"
+          data-aos-delay="1000"
           href={`products/${image.category}`}
           className="cta-btn border-[1px] uppercase h-12 w-64 md:h-14 md:w-72 mt-5 duration-300 font-medium"
         >

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@prisma/client": "^4.12.0",
     "@reduxjs/toolkit": "^1.9.3",
     "@stripe/stripe-js": "^1.52.1",
+    "aos": "^2.3.4",
     "axios": "^1.4.0",
     "date-fns": "^2.30.0",
     "eslint": "8.37.0",
@@ -25,6 +26,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.8.0",
+    "react-parallax": "^3.5.1",
     "react-redux": "^8.0.5",
     "react-responsive-carousel": "^3.2.23",
     "react-toastify": "^9.1.2",