Fx fixes

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",
@@ -61,6 +62,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;
@@ -21,11 +60,13 @@
     padding: 2rem;
   }
 
+
   .head {
     display: flex;
     justify-content: space-between;
     align-items: center;
 
+
     h1 {
       font-size: 3.6rem;
     }
@@ -51,7 +92,8 @@
     label {
       width: 15rem;
     }
-    .span{
+
+    .span {
       width: 20rem;
     }
   }
@@ -161,6 +203,7 @@
     width: 40vw;
   }
 
+
   .not-found-text {
     font-family: $text-family;
     font-weight: 700;
@@ -173,8 +216,20 @@
     color: $text2-color;
     text-decoration: none;
     transition: all 0.3s ease-in-out;
+    font-family: $text-family;
+    font-weight: 700;
+    font-size: 1.2rem;
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+    text-align: center;
+    line-height: 1.5;
+    letter-spacing: 0.05em;
+    color: $text2-color;
+    text-decoration: none;
+    transition: all 0.3s ease-in-out;
   }
 
+
   .btn-link {
     border: none;
     background-color: $primary-color;
@@ -186,6 +241,16 @@
     font-size: 1.2rem;
     border-radius: 2rem;
     cursor: pointer;
+    border: none;
+    background-color: $primary-color;
+    padding: 1rem 4rem;
+    text-decoration: none;
+    color: $white-color;
+    font-family: $text-family;
+    font-weight: 700;
+    font-size: 1.2rem;
+    border-radius: 2rem;
+    cursor: pointer;
   }
 
   .btn-link:hover {
@@ -194,13 +259,19 @@
     border: 1px solid $border-color;
     box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
     transition: all 0.3s ease-in-out;
+    background-color: $white-color;
+    color: $primary-color;
+    border: 1px solid $border-color;
+    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
+    transition: all 0.3s ease-in-out;
   }
 }
 
 @media screen and (max-width: 768px) {
   .landing-container {
     padding: 3rem 4rem 4rem 4rem;
 
+
     .head {
       h1 {
         font-size: 2.6rem;

src/assets/styles/Sample.scss

@@ -1,31 +1,30 @@
 .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%;
-    z-index: 100;
+    width: 20%;
+    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%;
@@ -72,14 +71,13 @@
       display: flex;
       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 +101,7 @@
       flex-direction: column;
       align-items: flex-start;
       left: 3rem;
+      gap: 1rem;
     }
 
     button {
@@ -118,6 +117,8 @@
       align-items: flex-start;
       position: absolute;
       left: 3rem;
+      gap: 1rem;
+
     }
 
     button {
@@ -136,6 +137,8 @@
       align-items: flex-end;
       position: absolute;
       right: 3rem;
+      gap: 1rem;
+
     }
 
     button {
@@ -144,16 +147,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 {