Merge branch 'develop' of github.com:atlp-rwanda/e-commerce-ninjas-fe…

… into ft-live-chat-187584880

package.json

@@ -18,6 +18,7 @@
     "@mui/material": "^5.16.4",
     "@reduxjs/toolkit": "^2.2.5",
     "antd": "^5.19.2",
+    "aos": "^2.3.4",
     "axios": "^1.7.2",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
@@ -60,6 +61,7 @@
     "@testing-library/dom": "^10.2.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
+    "@types/aos": "^3.0.7",
     "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
     "@types/jest": "^29.5.12",
     "@types/mini-css-extract-plugin": "^2.5.1",

src/App.scss

@@ -1,5 +1,6 @@
 @import './assets/styles/Colors.scss';
 @import './assets/styles/style.scss';
+@import './assets/styles/toastify.scss';
 @import './assets/styles/Sample.scss';
 @import './assets/styles/signup.scss';
 @import './assets/styles/Login.scss';

src/assets/styles/Colors.scss

@@ -26,9 +26,24 @@ $text-family: 'Averia Serif Libre';
 $white-color: #FFFFFF;
 $border-color: #D9D9D9;
 $red-color:red;
+$grayColor:gray;
 $primary-color-half: rgb(248,244,244);
 $red-color:red;
 $menu-hover: #FE975B;
 $green-color: rgb(3, 216, 3);
 $green-middle-color: rgba(3, 216, 3, 0.3);
 $red-middle-color: rgba(216, 8, 3, 0.3);
+
+
+$toastify-color-light: #fff;
+$toastify-color-dark: #121212;
+$toastify-color-info: #3498db;
+$toastify-color-success: orange;
+$toastify-color-warning: #f1c40f;
+$toastify-color-error: #e74c3c;
+
+
+$toastify-icon-color-info: var($toastify-color-info);
+$toastify-icon-color-success: var($toastify-color-success);
+$toastify-icon-color-warning: var($toastify-color-warning);
+$toastify-icon-color-error: var($toastify-color-error);

src/assets/styles/LandingPage.scss

@@ -1,13 +1,52 @@
 .landing-container {
   padding: 3rem 2rem 4rem 5rem;
   background-color: $container-color;
+
   .loader {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
   }
 
+  .load-more {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 2rem;
+    padding: 1rem 2rem;
+    cursor: pointer;
+
+    button {
+      background-color: $primary-color;
+      color: $white-color;
+      border: none;
+      padding: 0.8rem 1rem;
+      border-radius: 0.5rem;
+      cursor: pointer;
+    }
+
+    button:hover {
+      background-color: $primary-color-dark;
+      padding: 0.8rem 2rem;
+      transition: all 0.5s ease-in-out;
+      animation: bounce 1s infinite;
+
+    }
+
+    @keyframes bounce {
+
+      0%,
+      100% {
+        transform: translateY(0);
+      }
+
+      50% {
+        transform: translateY(-10px);
+      }
+    }
+  }
+
   .error-message {
     display: flex;
     justify-content: center;
@@ -51,7 +90,8 @@
     label {
       width: 15rem;
     }
-    .span{
+
+    .span {
       width: 20rem;
     }
   }

src/assets/styles/Sample.scss

@@ -1,31 +1,31 @@
 .sampleImages1 {
   display: flex;
-  width: 100%;
+  width: 100vw;
   color: $white;
   background-color: $white;
-  z-index: -1;
   gap: 1rem;
-  height: 30rem;
+  height: 40rem;
 
   .sample1, .sample3 {
     flex: 1;
     display: flex;
     flex-direction: column;
-    width: 30%;
+    width: 20%;
     z-index: 100;
+    height: 40rem;
     gap: 1rem;
   }
 
   .sample2 {
-    flex: 1;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    width: 30%;
-    z-index: 100;
+    width: 40%;
     display: flex;
     position: relative;
 
+    img{
+      width: 100%;
+      height: 100%;
+      object-fit: fill;
+    }
     .arrow {
       position: absolute;
       top: 50%;
@@ -73,13 +73,13 @@
       align-items: center;
       position: relative;
       z-index: 100;
+      height: 40rem;
       img{
         width: 100%;
-        height: 14.5rem;
-        object-fit: cover;
+        height: 100%;
       }
     p {
-      font-size: 1.4rem;
+      font-size: 1.8rem;
     }
 
     button {
@@ -103,6 +103,7 @@
       flex-direction: column;
       align-items: flex-start;
       left: 3rem;
+      gap: 1rem;
     }
 
     button {
@@ -118,6 +119,8 @@
       align-items: flex-start;
       position: absolute;
       left: 3rem;
+      gap: 1rem;
+
     }
 
     button {
@@ -136,6 +139,8 @@
       align-items: flex-end;
       position: absolute;
       right: 3rem;
+      gap: 1rem;
+
     }
 
     button {
@@ -144,16 +149,17 @@
   }
 
   .accessories {
-    // background-image: url('../../public/assets/right-bottom.png');
 
     .text-container {
       display: flex;
       flex-direction: column;
       align-items: flex-end;
       position: absolute;
       right: 3rem;
+      gap: 1rem;
+
       p {
-        padding-right: 1.5rem;
+        padding-right: .1rem;
       }
 
       button {

src/assets/styles/ViewCart.scss

@@ -42,6 +42,7 @@ FaCheckSquare {
         border: 1px solid $border-color;
         border-radius: 10px;
         margin-bottom: 10px;
+        margin-left: 1rem;
 
         .title {
           display: flex;

src/assets/styles/toastify.scss

@@ -0,0 +1,44 @@
+.Toastify__toast-container {
+    z-index: 100;
+    width: 380px;
+    font-size: 1.5rem;
+    font-weight: 500;
+    .Toastify__toast--success {
+      font-size: medium;
+      text-align: center;
+      color: $white;
+      background: $toastify-color-success;
+    }
+    .Toastify__toast--info {
+      color: $white-color;
+      text-align: center;
+      background: $toastify-color-info;
+    }
+    .Toastify__toast--warning {
+      text-align: center;
+      color: yellow;
+      background: gray;
+    }
+    .Toastify__toast--error {
+      color: rgb(178, 3, 3);
+      text-align: center;
+      background:$toastify-color-error;
+    }
+    .Toastify__progress-bar--info {
+        background: blue;
+      }
+      .Toastify__progress-bar--success {
+        background: $primary-color-light;
+      }
+      .Toastify__progress-bar--warning {
+        background: var(--toastify-color-progress-warning);
+      }
+      .Toastify__progress-bar--error {
+        background: $red-color;
+      }
+      .Toastify__toast-icon{
+        svg{
+            fill: white;
+        }
+      }
+  }

src/components/layout/Sample.tsx

@@ -12,8 +12,12 @@ import leftBottom from "../../../public/assets/images/left-bottom.png";
 import rightBottom from "../../../public/assets/images/right-bottom.png";
 const images = [
   '/assets/middle.png',
-  '/assets/shoe2.jpeg',
-  '/assets/shoe3.jpeg'
+  '/assets/images/1293.jpg',
+  '/assets/images/add-cart-buy-now-online-commerce-graphic-concept.jpg',
+  '/assets/images/cropped-image-woman-inputting-card-information-key-phone-laptop-while-shopping-online.jpg',
+  '/assets/images/cyber-monday-shopping-sales.jpg',
+  '/assets/images/happy-man-with-handbags-dancing-after-shopping-spree.jpg',
+  '/assets/images/laptop-shopping-bags-online-shopping-concept.jpg',
 ];
 
 const Sample: React.FC = () => {
@@ -69,7 +73,8 @@ const Sample: React.FC = () => {
             </div>
           </div>
         </div>
-        <div className="sample2" style={{ backgroundImage: `url(${images[currentIndex]})` }}>
+        <div className="sample2">
+          <img src={images[currentIndex]} alt="" />
           <div className="arrow left" onClick={handleLeftClick}>
             <FaChevronCircleLeft className="icon-arrow" />
           </div>