From c8bf4069fcd4530d97b59f89297a512b70587848 Mon Sep 17 00:00:00 2001
From: "CHIEFSOFT\\ameye" <ameye@chiefsfot.com>
Date: Fri, 6 Dec 2024 22:00:48 -0500
Subject: [PATCH] Products lists

---
 src/component/home/HomeSections.jsx | 103 +++++++---------------------
 src/css/style.scss                  |   1 +
 2 files changed, 26 insertions(+), 78 deletions(-)

diff --git a/src/component/home/HomeSections.jsx b/src/component/home/HomeSections.jsx
index beb4c08..6e31aaf 100644
--- a/src/component/home/HomeSections.jsx
+++ b/src/component/home/HomeSections.jsx
@@ -136,8 +136,8 @@ export default function HomeSections(){
                     </div>
                     <div className="card-body pb-0">
                         <div className="row m-b-20">
-                            <div className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 extraProductCard">
-                                <div className="d-flex align-items-center">
+                            <div className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
+                                <div className="d-flex align-items-center extraProductCard">
                                     <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
                                         <i className="fa fa-cart-plus text-primary"></i>
                                     </div>
@@ -147,8 +147,9 @@ export default function HomeSections(){
                                     </div>
                                 </div>
                             </div>
-                            <div className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 extraProductCard">
-                                <div className="d-flex align-items-center">
+
+                            <div className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
+                                <div className="d-flex align-items-center extraProductCard">
                                     <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
                                         <i className="fa fa-cart-plus text-primary"></i>
                                     </div>
@@ -159,8 +160,8 @@ export default function HomeSections(){
                                 </div>
                             </div>
 
-                            <div className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 extraProductCard">
-                                <div className="d-flex align-items-center">
+                            <div className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
+                                <div className="d-flex align-items-center extraProductCard">
                                     <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
                                         <i className="fa fa-cart-plus text-primary"></i>
                                     </div>
@@ -170,8 +171,8 @@ export default function HomeSections(){
                                     </div>
                                 </div>
                             </div>
-                            <div className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 extraProductCard">
-                                <div className="d-flex align-items-center">
+                            <div className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
+                                <div className="d-flex align-items-center extraProductCard">
                                     <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
                                         <i className="fa fa-cart-plus text-primary"></i>
                                     </div>
@@ -182,8 +183,8 @@ export default function HomeSections(){
                                 </div>
                             </div>
 
-                            <div className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 extraProductCard">
-                                <div className="d-flex align-items-center">
+                            <div className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
+                                <div className="d-flex align-items-center extraProductCard">
                                     <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
                                         <i className="fa fa-cart-plus text-primary"></i>
                                     </div>
@@ -193,8 +194,8 @@ export default function HomeSections(){
                                     </div>
                                 </div>
                             </div>
-                            <div className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 extraProductCard">
-                                <div className="d-flex align-items-center">
+                            <div className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
+                                <div className="d-flex align-items-center extraProductCard">
                                     <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
                                         <i className="fa fa-cart-plus text-primary"></i>
                                     </div>
@@ -205,72 +206,18 @@ export default function HomeSections(){
                                 </div>
                             </div>
 
-                            <div style={{backgroundColor: 'red'}} className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0">
-                                <div className="d-flex align-items-center">
-                                    <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
-                                        <i className="fa fa-cart-plus text-primary"></i>
-                                    </div>
-                                    <div className="report-details">
-                                        <p>Annual Sales</p>
-                                        <h3>15,236</h3>
-                                    </div>
-                                </div>
-                            </div>
-                            <div style={{backgroundColor: 'yellow'}} className="col-xxs-6 col-md-4 col-xxl-6 mb-2 mb-xxl-0">
-                                <div className="d-flex align-items-center">
-                                    <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
-                                        <i className="fa fa-dollar text-primary"></i>
-                                    </div>
-                                    <div className="report-details">
-                                        <p>Annual Revenue</p>
-                                        <h3>$40,516</h3>
-                                    </div>
-                                </div>
-                            </div>
-                            <div style={{backgroundColor: 'green'}} className="col-xxs-6 col-md-4 col-xxl-6 mb-2 mb-xxl-0">
-                                <div className="d-flex align-items-center">
-                                    <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
-                                        <i className="fa fa-dollar text-primary"></i>
-                                    </div>
-                                    <div className="report-details">
-                                        <p>Annual Revenue</p>
-                                        <h3>$40,516</h3>
-                                    </div>
-                                </div>
-                            </div>
-                            <div style={{backgroundColor: 'red'}} className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0">
-                                <div className="d-flex align-items-center">
-                                    <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
-                                        <i className="fa fa-cart-plus text-primary"></i>
-                                    </div>
-                                    <div className="report-details">
-                                        <p>Annual Sales</p>
-                                        <h3>15,236</h3>
-                                    </div>
-                                </div>
-                            </div>
-                            <div style={{backgroundColor: 'yellow'}} className="col-xxs-6 col-md-4 col-xxl-6 mb-2 mb-xxl-0">
-                                <div className="d-flex align-items-center">
-                                    <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
-                                        <i className="fa fa-dollar text-primary"></i>
-                                    </div>
-                                    <div className="report-details">
-                                        <p>Annual Revenue</p>
-                                        <h3>$40,516</h3>
-                                    </div>
-                                </div>
-                            </div>
-                            <div style={{backgroundColor: 'green'}} className="col-xxs-6 col-md-4 col-xxl-6 mb-2 mb-xxl-0">
-                                <div className="d-flex align-items-center">
-                                    <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
-                                        <i className="fa fa-dollar text-primary"></i>
-                                    </div>
-                                    <div className="report-details">
-                                        <p>Annual Revenue</p>
-                                        <h3>$40,516</h3>
-                                    </div>
-                                </div>
-                            </div>
+
+                            {/*<div style={{backgroundColor: 'green'}} className="col-xxs-6 col-md-4 col-xxl-6 mb-2 mb-xxl-0">*/}
+                            {/*    <div className="d-flex align-items-center">*/}
+                            {/*        <div className="icon-container img-icon m-r-20 bg-light-gray rounded">*/}
+                            {/*            <i className="fa fa-dollar text-primary"></i>*/}
+                            {/*        </div>*/}
+                            {/*        <div className="report-details">*/}
+                            {/*            <p>Annual Revenue</p>*/}
+                            {/*            <h3>$40,516</h3>*/}
+                            {/*        </div>*/}
+                            {/*    </div>*/}
+                            {/*</div>*/}
                         </div>
                         <div className="apexchart-wrapper">
                             <div id="ecommerce5" className="chart-fit"></div>
diff --git a/src/css/style.scss b/src/css/style.scss
index ec37722..0cfa99b 100644
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -86,6 +86,7 @@
 .extraProductCard{
   background-color: aliceblue;
   border-radius: 5px;
+  margin: 2px;
 }