updates

components/add-product/index.js

@@ -0,0 +1,27 @@
+import React from "react";
+import styles from "./styles.module.css";
+
+export default function AddProduct() {
+  return (
+    <form action="" className={styles.add_form}>
+      <div className={styles.inputs_container}>
+        <input
+          type="text"
+          name="productName"
+          placeholder="Product name e.g Duffel bag"
+        />
+        <input
+          type="text"
+          name="productPrice"
+          placeholder="Product price e.g 13000"
+        />
+
+        <input type="text" name="category" placeholder="Category e.g Fashion" />
+      </div>
+
+      <button type="submit" className={styles.submit_add_btn}>
+        Submit
+      </button>
+    </form>
+  );
+}

components/edit-product/styles.module.css → components/add-product/styles.module.css

@@ -1,4 +1,4 @@
-.edit_form {
+.add_form {
   border: 1px solid black;
   margin: 20px 0 0;
   width: 90%;
@@ -25,7 +25,7 @@
   box-sizing: border-box;
 }
 
-.submit_edit_btn {
+.submit_add_btn {
   width: 100px;
   height: 30px;
   display: grid;
@@ -42,7 +42,7 @@
   transition: 300ms ease-in-out;
 }
 
-.submit_edit_btn:hover {
+.submit_add_btn:hover {
   color: #343417;
   background: #efe6d7;
   border: 1px solid #343417;

components/header/header.module.css

@@ -1,8 +1,12 @@
+@font-face {
+  font-family: "Ginger";
+  src: url("../../public/fonts/ginger-modern-stylish-font/Ginger.ttf");
+}
+
 .header {
   position: fixed;
   top: 5px;
   width: 100%;
-  backdrop-filter: blur(5px);
 }
 
 .header .container {
@@ -19,5 +23,6 @@
 .header .container span {
   font-size: 2rem;
   font-weight: 600;
-  color: var(--color-grey);
+  font-family: "Ginger";
+  color: #efe6d7;
 }

components/products/index.js

@@ -1,7 +1,7 @@
 import { AiOutlinePlus } from "react-icons/ai";
 import { useSelector, useDispatch } from "react-redux";
 
-import EditProduct from "../edit-product";
+import AddProduct from "../add-product";
 import styles from "./products.module.css";
 
 export default function Products() {
@@ -18,14 +18,18 @@ export default function Products() {
             <AiOutlinePlus /> Add Product
           </button>
 
-          <div className={styles.edit_product}>
-            <EditProduct />
+          <div className={styles.add_form_container}>
+            <AddProduct />
           </div>
         </div>
 
         <div className={styles.products_list}>
           {products.map((item) => {
-            return <div key={item.id}>{item.productName}</div>;
+            return (
+              <div key={item.id} className={styles.product_item}>
+                <h2> {item.productName}</h2>
+              </div>
+            );
           })}
         </div>
       </div>

components/products/products.module.css

@@ -1,3 +1,8 @@
+@font-face {
+  font-family: "Ginger";
+  src: url("../../public/fonts/ginger-modern-stylish-font/Ginger.ttf");
+}
+
 .products {
   width: 100%;
   min-height: 300px;
@@ -43,7 +48,33 @@
   color: white;
 }
 
-.edit_product {
+.add_form_container {
   margin-top: 1rem;
   border: 1px solid black;
 }
+
+.products_list {
+  border: 1px solid black;
+  display: grid;
+  place-items: center;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 10px;
+  padding: 1rem 0;
+}
+
+.product_item {
+  border: 1px solid black;
+  width: 100%;
+  max-width: 350px;
+  min-height: 200px;
+  background-color: #efe6d7;
+  box-shadow: var(--box-shadow);
+  border-radius: 20px;
+  padding: 1.5rem 0 0;
+  box-sizing: border-box;
+}
+
+.product_item > h2 {
+  text-align: center;
+  font-family: "Ginger";
+}

public/fonts/ginger-modern-stylish-font/Dfonts - Free Fonts Download.url

@@ -0,0 +1,2 @@
+[InternetShortcut]
+URL=https://www.dfonts.org/

styles/Home.module.css

@@ -1,9 +1,19 @@
+@font-face {
+  font-family: "Ginger";
+  src: url("/public/fonts/ginger-modern-stylish-font/Ginger.ttf");
+}
+
 .main {
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
+  background-image: url("../assets/shop-open.jpg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  color: #fff;
 }
 
 .main .container {
@@ -17,22 +27,22 @@
 }
 
 .main .container h1 {
-  color: var(--color-grey);
   font-weight: 700;
   font-size: clamp(2rem, 3vw, 5.5rem);
+  font-family: "Ginger";
 }
 
 .main .container p {
-  color: var(--color-grey);
   font-size: clamp(0.8rem, 2.5vw, 1.2rem);
   font-style: italic;
   font-weight: 500;
+  font-family: "Ginger";
 }
 
 .view_button a {
   padding: 10px 15px;
   background: var(--color-grey);
-  color: var(--color-grey);
+  color: #fff;
   border-radius: 5px;
   font-weight: 600;
   box-shadow: var(--box-shadow);