added Total Boxes for overview page

Author: UndeadMe

src/components/TotalBox.jsx

@@ -0,0 +1,22 @@
+import styles from './TotalBox.module.css'
+
+export default function TotalBox({ title, secTitle, totalAmount, incomeStatement, sign }) {
+    return (
+        <div className={styles["total-income-statement-box"]}>
+            <div className={styles["total-income-statement-box__headers"]}>
+                <div>
+                    <h1>{ title }</h1>
+                    <h5>{ secTitle }</h5>
+                </div>
+                { sign }
+            </div>
+            <div className={styles["total-income-statement-box__amounts"]}>
+                <div>
+                    <h2>{ totalAmount }</h2>
+                    <h6>{ incomeStatement }</h6>
+                </div>
+                {/* // Todo icome statement photo */}
+            </div>
+        </div>
+    )
+}

src/components/TotalBox.module.css

@@ -0,0 +1,48 @@
+.total-income-statement-box {
+    background: #FFFFFF;
+    padding: 30px;
+    border-radius: 20px;
+    width: 100%;
+    box-shadow: 0 5px 20px rgb(141, 141, 141, 0.2);
+}
+.total-income-statement-box__headers, .total-income-statement-box__amounts {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.total-income-statement-box__amounts {
+    margin-top: 40px;
+}
+.total-income-statement-box__headers h1 {
+    font-size: 1.5rem;
+    font-weight: 500;
+}
+.total-income-statement-box__headers h1 ~ h5 {
+    color: #aaaaaa;
+    margin-top: 15px;
+}
+.total-income-statement-box__amounts h2 {
+    font-size: 1.9rem;
+    font-weight: 600;
+}
+.total-income-statement-box__amounts h6 {
+    margin-top: 15px;
+    color: #4f98f8;
+    font-weight: 500;
+}
+:global(.total-income-statement-box__sign-blue), :global(.total-income-statement-box__sign-green), :global(.total-income-statement-box__sign-red) {
+    padding: 20px;
+    border-radius: 15px;
+}
+:global(.total-income-statement-box__sign-blue) {
+    background-color: #e6efff;
+    color: #0059ff;
+}
+:global(.total-income-statement-box__sign-red) {
+    background-color: #ffe2e2;
+    color: #ff7a7a;
+}
+:global(.total-income-statement-box__sign-green) {
+    background-color: #e5fde5;
+    color: #3cc95a;
+}

src/pages/Overview.jsx

@@ -1,7 +1,37 @@
+import { WalletMoney, MoneySend, UsdCoin } from 'iconsax-react'
+
+import TotalBox from '../components/TotalBox'
+
+import styles from './Overview.module.css'
+
+
+
 export default function Overview() {
     return (
-        <h1>
-            Overview
-        </h1>
+        <>
+            <div className={styles["total-boxes"]}>
+                <TotalBox  //Todo u can use json-server for making this app like a real world react application 
+                    title="Total Balance"
+                    secTitle="2 July-24 September 2023" //Todo provide a real date
+                    totalAmount="$982.000,90"
+                    incomeStatement="+ 16% Last Year"
+                    sign={<WalletMoney className="total-income-statement-box__sign-blue" variant="Bold"/>}
+                />
+                <TotalBox  //Todo u can use json-server for making this app like a real world react application 
+                    title="Total Balance"
+                    secTitle="2 July-24 September 2023" //Todo provide a real date
+                    totalAmount="$982.000,90"
+                    incomeStatement="+ 16% Last Year"
+                    sign={<UsdCoin className="total-income-statement-box__sign-green" variant="Bold"/>}
+                />
+                <TotalBox  //Todo u can use json-server for making this app like a real world react application 
+                    title="Total Balance"
+                    secTitle="2 July-24 September 2023" //Todo provide a real date
+                    totalAmount="$982.000,90"
+                    incomeStatement="+ 16% Last Year"
+                    sign={<MoneySend className="total-income-statement-box__sign-red" variant="Bold"/>}
+                />
+            </div>
+        </>
     )
 }

src/pages/Overview.module.css

@@ -0,0 +1,6 @@
+.total-boxes {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 100px;
+    column-gap: 80px;
+}