Page not found

app/package.json

@@ -56,6 +56,7 @@
     "slick-carousel": "^1.8.1",
     "socket.io-client": "^4.7.5",
     "styled-components": "^6.1.11",
+    "typed.js": "^2.1.0",
     "typescript": "^5.5.2",
     "web-vitals": "^2.1.4",
     "yup": "^1.4.0"

app/src/App.css

@@ -1,12 +1,250 @@
-/*Payment*/
-.process {
+:root {
+    --background-primary: #C07973;
+}
+
+.cart-container {
+    position: relative;
+    display: inline-block;
+    z-index: 1000;
+}
+
+.hover-fill-space {
+    position: absolute;
+    right: 0;
+    top: 40px;
+    width: 100%;
+    height: 50px;
+    pointer-events: auto;
+    z-index: 1000;
+}
+
+.cart-preview {
+    position: absolute;
+    right: 0;
+    top: 50px;
+    background-color: white;
+    border: 1px solid #ddd;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 10px;
+    z-index: 500;
+    width: 400px;
+    /*pointer-events: auto;*/
+}
+
+.cart-items-mini {
+    max-height: 400px;
+    overflow-y: scroll;
+    -ms-overflow-style: none;
+}
+
+.cart-items-mini::-webkit-scrollbar {
+    display: none;
+}
+
+
+.cart-container:hover .cart-preview,
+.cart-container:hover .hover-fill-space {
+    display: block;
+}
+
+.cart-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-bottom: 10px;
+    border-bottom: .1em solid var(--background-primary);
+}
+
+.cart-item img {
+    left: 0;
+    margin-right: 10px;
+    margin-bottom: 10px;
+}
+
+.cart-item-details {
+    display: flex;
+    flex-direction: column;
+}
+
+.cart-item-details h6 {
+    margin: 0;
+    font-size: 14px;
+}
+
+.cart-item-details p {
+    margin: 0;
+    color: #777;
+    font-size: 12px;
+}
+
+.cart-item-details-sub {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+
+.cart-buttons {
+    margin-top: 10px;
+    background: var(--background-primary);
+    border-top: .1em solid var(--background-primary);
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    color: white;
+
+}
+
+.cart-buttons:hover {
+    color: black;
+    text-decoration: none;
+}
+
+.table-cart::-webkit-scrollbar {
+    display: none;
+}
+
+.fixed-header thead {
+    position: sticky;
+    top: -1px;
+    z-index: 1000;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+.voucher-container {
+    width: 100%;
+    overflow-x: auto;
+    white-space: nowrap;
+    margin-bottom: 1rem;
+    cursor: pointer;
+    padding: 0.2rem;
+}
+
+.voucher-container::-webkit-scrollbar {
+    height: .9rem;
+    background-color: #f5f5f5;
+}
+
+.voucher-container::-webkit-scrollbar-thumb {
+    background-color: #D19C97;
+    border-radius: 10px;
+    border: 2px solid #f5f5f5;
+}
+
+.voucher {
+    position: relative;
+    display: inline-block;
+    background-color: #D19C97;
+    border-radius: 10px;
+    padding: 20px;
+    max-width: 25rem;
+    margin-right: 10px;
+    color: white;
+    border: none;
+}
+
+.voucher-header {
     display: flex;
     flex-direction: row;
+    align-items: center;
+}
+
+.voucher-title {
+    font-size: 24px;
+    font-weight: bold;
+    /*color: #333;*/
+    margin-right: .5em;
+}
+
+.voucher-subtitle {
+    font-size: 14px;
+    /*color: #666;*/
+}
+
+.voucher-content {
+    margin-top: 20px;
+}
+
+.voucher-description {
+    font-size: 16px;
+    /*color: #333;*/
+}
+
+.voucher-footer {
+    display: flex;
     justify-content: space-between;
     align-items: center;
-    margin: 0 2rem;
+    margin-top: 20px;
+}
+
+.voucher-expiry {
+    font-size: 14px;
+    /*color: #666;*/
+}
+
+.voucher-condition {
+    font-size: 14px;
+    /*color: #007bff;*/
 }
 
-.process-1{
-    width: 3rem;
-}
+.voucher-icon input {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: #ccc;
+    position: absolute;
+    top: 20px;
+    right: 15px;
+}
+
+input[type='radio']:after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    display: inline-block;
+    border: 5px white solid;
+}
+
+input[type='radio']:checked:after {
+    background: #D19C97;
+}
+
+.voucher {
+    --padding: 50px;
+    position: relative;
+    padding-left: var(--padding);
+    margin-right: calc(var(--padding) / 2);
+}
+
+.voucher:before,
+.voucher:after {
+    content: "";
+    display: block;
+    position: absolute;
+    --size: 50px;
+}
+
+.voucher:before {
+    background: white;
+    width: var(--size);
+    height: var(--size);
+    border-radius: 50%;
+    top: 50%;
+    left: calc(var(--size) / 2 - var(--padding));
+    transform: translateY(-50%);
+}
+
+.voucher:after {
+    height: 100%;
+    background: #D19C97;
+    width: 1px;
+    top: 0;
+    left: calc(var(--size) / 2 + 2%);
+    border: 1px dashed white;
+}
+
+

app/src/App.tsx

@@ -10,10 +10,13 @@ import { CircularProgress } from "@mui/material";
 import FormLayout from './layout/FormLayout';
 import { ToastContainer } from "react-toastify";
 import 'react-toastify/dist/ReactToastify.css';
+import Favourite from "./pages/Favourite";
+import Shop from "./pages/Shop";
+import CartDetail from "./pages/CartDetail";
+import PageNotFound from "./pages/PageNotFound";
 
 const Home = lazy(() => import('./pages/Home'));
 const ContactUs = lazy(() => import('./pages/ContactUs'));
-const CartDetail = lazy(() => import('./pages/cart/CartDetail'));
 const Login = lazy(() => import('./pages/Login'));
 const Register = lazy(() => import('./pages/Register'));
 const ForgotPassword = lazy(() => import('./pages/ForgotPassword'));
@@ -33,6 +36,9 @@ function App() {
                             <Route path="contact-us" element={<ContactUs />} />
                             <Route path="products/:productId" element={<ProductDetail/>} />
                             <Route path="about-us" element={<AboutUs />} />
+                            <Route path="shop" element={<Shop/>}/>
+                            <Route path="favourite" element={<Favourite />} />
+                            <Route path="404" element={<PageNotFound />} />
                         </Route>
                         <Route path="account" element={<FormLayout />}>
                             <Route path="login" element={<Login />} />

app/src/assets/css/style.css

@@ -9587,4 +9587,4 @@ a.text-dark:hover, a.text-dark:focus {
   100% {
     transform: translateY(-15px);
   }
-}
+}

app/src/assets/css/style.module.scss

@@ -6530,13 +6530,16 @@ a.close.disabled {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 12%;
+  //width: 8%;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
   color: #fff;
   text-align: center;
   opacity: 0.5;
   transition: opacity 0.15s ease;
-  font-size: 2.4rem;
+  font-size: 1.5rem;
   transform: translateY(-50%);
+  cursor: pointer;
 }
 
 @media (prefers-reduced-motion: reduce) {

app/src/assets/css/styleAbout.scss

@@ -10,7 +10,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        background-color: var(--cyan);
+        background-color: #D19C97
     }
 
     .feedbackArea {

app/src/assets/css/styleShop.scss

@@ -0,0 +1,12 @@
+.quick-see-product{
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  fontSize: 1.2rem;
+  cursor: pointer;
+
+  &:hover{
+    background-color: black !important;
+    color: white;
+  }
+}

app/src/assets/scss/bootstrap/mixins/_box-shadow.scss

@@ -6,7 +6,7 @@
       // We can pass `@include box-shadow(none);`
       $result: $shadow;
     } @else {
-      // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
+      // GenderFilter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
       @for $i from 1 through length($shadow) {
         @if nth($shadow, $i) != "none" {
           $result: append($result, nth($shadow, $i), "comma");