Page title, InfoBox is done

client/src/assets/styles/components/Alert.scss

@@ -12,7 +12,7 @@
 
     padding: 15px 15px;
     justify-content: center;
-    align-items: end;
+    align-items: end;   
 
     gap: 10px;
 }

client/src/assets/styles/components/infoBox.scss

@@ -0,0 +1,35 @@
+.info-box {
+    height: 97px;
+    flex-shrink: 0;
+    border-radius: 12px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: end;
+
+    padding-right: 2rem;    
+
+    &.narrow {
+        width: 40%;
+    }
+
+    &.wide {
+        width: 90%;
+    }   
+
+    &.dark {
+
+        background: var(--simnle-grid, linear-gradient(113deg, #1F2A37 6.36%, rgba(31, 42, 55, 0.00) 108.22%));
+    }
+
+    &.purple {
+        background: var(--pur-grid, linear-gradient(115deg, #B773E9 2.95%, #5B1092 95.69%));
+
+    }
+
+    &.colorfull {
+        background: linear-gradient(96deg, #650DA6 -11.62%, #650DA6 -11.61%, #DF1846 119.72%);
+        box-shadow: 4px 5px 103.7px 0px var(--Primary-800, #2B0547);
+    }
+}

client/src/assets/styles/global/global.scss

@@ -19,4 +19,4 @@ body {
 a {
   color: var(--text-color);
   text-decoration: none;
-}
+}

client/src/components/common/Alerts.jsx

@@ -24,7 +24,7 @@ const Alert = ({ title, info, buttontext, Onclick, showRightBox, color }) => {
             className={
               showRightBox ? "right-box " + color : "right-box hide " + color
             }
-          />
+          / >
         </div>
       </div>
       <text className="alert-info">{info}</text>

client/src/components/common/InfoBox.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import "../../assets/styles/components/infoBox.scss";
+const InfoBox = ({ title, value, width = "narrow", color = "dark" }) => {
+  return (
+    <div className={"info-box " + color + " " + width}>
+      <p6>{title}</p6>
+      <p6> {value}</p6>
+    </div>
+  );
+};
+
+export default InfoBox;

client/src/components/common/PageTitle.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const PageTitle = ({title}) => {
+  return (
+    <h1>{title}</h1>
+  ) 
+}
+
+export default PageTitle

client/src/components/landingpage/LandingPage.jsx

@@ -4,6 +4,8 @@ import FancyBlobs from "./FancyBlobs";
 
 import "./LandingPage.scss";
 
+import PageTitle from "../common/PageTitle";
+
 import {
   FolderIcon,
   AcademicCapIcon,
@@ -50,7 +52,8 @@ export default function LandingPage() {
     <div className="landing_page">
       <header className="hero">
         <div className="container">
-          <h1>نظام إدارة الكشافة الحديث</h1>
+          <PageTitle title="نظام إدارة الكشافة الحديث" />
+
           <p>
             نقدم حلول لكل مشاكل اداريات المجموعات من تسجيل الغياب الاشتراكات
             المواضيع التقييم وغيرهم من الامور.