From 73ca831e1ac7641650e9ff8016ee673dade109d6 Mon Sep 17 00:00:00 2001
From: "CHIEFSOFT\\ameye" <ameye@chiefsfot.com>
Date: Fri, 6 Dec 2024 21:45:43 -0500
Subject: [PATCH] added elsments

---
 src/component/home/HomeSections.jsx | 117 +++++++++++++++++++++++++++-
 src/css/style.scss                  |   4 +
 2 files changed, 119 insertions(+), 2 deletions(-)

diff --git a/src/component/home/HomeSections.jsx b/src/component/home/HomeSections.jsx
index 584aaea..beb4c08 100644
--- a/src/component/home/HomeSections.jsx
+++ b/src/component/home/HomeSections.jsx
@@ -136,7 +136,76 @@ 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-4 mb-2 mb-xxl-0">
+                            <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="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>Activate now</p>
+                                        <h4>Professional Website</h4>
+                                    </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="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>Activate now</p>
+                                        <h4>Professional Blog</h4>
+                                    </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="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>Activate now</p>
+                                        <h4>Business Website</h4>
+                                    </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="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>Activate now</p>
+                                        <h4>Business Blog Site</h4>
+                                    </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="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>Activate now</p>
+                                        <h4>OpenEmr </h4>
+                                    </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="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>Activate now</p>
+                                        <h4>Dummy</h4>
+                                    </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>
@@ -147,7 +216,51 @@ export default function HomeSections(){
                                     </div>
                                 </div>
                             </div>
-                            <div className="col-xxs-6 col-md-4 col-xxl-4 mb-2 mb-xxl-0">
+                            <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>
diff --git a/src/css/style.scss b/src/css/style.scss
index 250150a..ec37722 100644
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -83,6 +83,10 @@
 @import "pages/employees";
 @import "pages/coming-soon";
 
+.extraProductCard{
+  background-color: aliceblue;
+  border-radius: 5px;
+}