(F) Add about section to home page

Clinics.Frontend/angular.json

@@ -40,7 +40,9 @@
             ],
             "styles": [
               "src/styles.scss",
-              "node_modules/bootstrap-icons/font/bootstrap-icons.css"
+              "node_modules/bootstrap-icons/font/bootstrap-icons.css",
+              "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+
             ],
             "scripts": [
               "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"

Clinics.Frontend/package-lock.json

@@ -16,6 +16,7 @@
         "@angular/platform-browser": "^18.1.0",
         "@angular/platform-browser-dynamic": "^18.1.0",
         "@angular/router": "^18.1.0",
+        "@fortawesome/fontawesome-free": "^6.6.0",
         "@ng-bootstrap/ng-bootstrap": "^17.0.0",
         "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.2",
@@ -2934,6 +2935,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.6.0.tgz",
+      "integrity": "sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow==",
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@inquirer/checkbox": {
       "version": "2.4.7",
       "resolved": "https://registry.npmjs.org/@inquirer/checkbox/-/checkbox-2.4.7.tgz",

Clinics.Frontend/package.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^18.1.0",
     "@angular/platform-browser-dynamic": "^18.1.0",
     "@angular/router": "^18.1.0",
+    "@fortawesome/fontawesome-free": "^6.6.0",
     "@ng-bootstrap/ng-bootstrap": "^17.0.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.2",

Clinics.Frontend/src/app/components/home/home.component.css

-/* #region main-home */
+/* #region home */
 
 .main-home {
   width: 100%;
@@ -229,4 +229,49 @@
   margin-left: 8px;
 }
 
+/* #endregion */
+
+/* #region about */
+.about .content h3 {
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+.about .content ul {
+  list-style: none;
+  padding: 0;
+}
+
+.about .content ul li {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 40px;
+}
+
+.about .content ul i {
+  flex-shrink: 0;
+  font-size: 48px;
+  color: var(--accent-color);
+  margin-right: 20px;
+}
+
+.about .content ul h5 {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.about .content ul p {
+  font-size: 15px;
+}
+
+.about .content p:last-child {
+  margin-bottom: 0;
+}
+
+.about .pulsating-play-btn {
+  position: absolute;
+  left: calc(50% - 47px);
+  top: calc(50% - 47px);
+}
+
 /* #endregion */
\ No newline at end of file

Clinics.Frontend/src/app/components/home/home.component.html

@@ -151,6 +151,51 @@
     <!-- #endregion -->
 
     <!-- #region about -->
-     
+    <section id="about" class="about section" dir="rtl">
+
+        <div class="container">
+
+            <div class="row gy-4 gx-5">
+
+                <div class="col-lg-6 position-relative align-self-start" data-aos="fade-up" data-aos-delay="200">
+                    <img src="assets/images/about.jpg" class="img-fluid" alt="">
+                </div>
+
+                <div class="col-lg-6 content" data-aos="fade-up" data-aos-delay="100">
+                    <h3 class="text-center">عن المستوصف</h3>
+                    <p class="text-center" style="font-weight: 600;">
+                        يوفر مستوصف مركز الدراسات والبحوث العلمية الخدمات الطبية لموظفي المركز
+                    </p>
+                    <ul>
+                        <li>
+                            <i class="fa-solid fa-pills"></i>
+                            <div style="margin-right: 0.8em;">
+                                <h5>الخدمات الدوائية</h5>
+                                <p>يوفر المستوصف الأدوية من خلال صيدلية المستوصف</p>
+                            </div>
+                        </li>
+                        <li>
+                            <i class="fa-solid fa-stethoscope"></i>
+                            <div style="margin-right: 0.8em;">
+                                <h5>خدمات المعاينة</h5>
+                                <p>يوفر المستوصف خدمات المعاينة الطبية من قبل أطباء المستوصف الاختصاصيين</p>
+                            </div>
+                        </li>
+                        <li>
+                            <i class="fa-solid fa-medkit"></i>
+                            <div style="margin-right: 0.8em;">
+                                <h5>خدمات الوصفات المكررة</h5>
+                                <p>يهتم المستوصف بتنظيم الوصفات الدوائية المكررة وبيانات الأمراض المزمنة للموظفين وتوفير ما يلزم من الرعاية لهم</p>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+
+            </div>
+
+        </div>
+
+    </section>
     <!-- #endregion -->
+
 </div>
\ No newline at end of file

Clinics.Frontend/src/app/components/template/header/header.component.html

@@ -11,7 +11,7 @@
 
                 <nav class="navmenu custom-buttons">
                     <ul>
-                        <li><a><button class="btn"
+                        <li><a href="#about"><button class="btn"
                                     [class]="{'btn-outline-primary': isSelected('About'), 'btn-outline-secondary': !isSelected('About')}"
                                     (click)="selectButton('About')">عن المستوصف</button></a></li>
                         <li><a href="#doctors"><button class="btn"