Merge pull request #10 from Almouhannad/F_Apply-template

F apply template

Clinics.Frontend/.gitignore

+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
\ No newline at end of file

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/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { HomeComponent } from './components/home/home.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: '', component: HomeComponent }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

Clinics.Frontend/src/app/app.module.ts

@@ -7,6 +7,10 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './components/root/app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ToastrModule } from 'ngx-toastr';
+import { LayoutComponent } from './components/template/layout/layout.component';
+import { HeaderComponent } from './components/template/header/header.component';
+import { FooterComponent } from './components/template/footer/footer.component';
+import { HomeComponent } from './components/home/home.component';
 
 @NgModule({
   imports: [
@@ -26,7 +30,11 @@ import { ToastrModule } from 'ngx-toastr';
   // the subset of declarations that should be visible and usable in
   // the component templates of other modules
   declarations: [
-    AppComponent
+    AppComponent,
+    LayoutComponent,
+    HeaderComponent,
+    FooterComponent,
+    HomeComponent
   ],
   
   // identifies the root component that Angular should

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

+/* #region home */
+
+.main-home {
+  width: 100%;
+  min-height: calc(100vh - 112px);
+  padding: 80px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+
+}
+
+.main-home img {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 1;
+}
+
+.main-home .container {
+  z-index: 3;
+}
+
+.main-home .welcome h2 {
+  margin: 0;
+  font-size: 48px;
+  font-weight: 700;
+}
+
+.main-home .welcome p {
+  font-size: 24px;
+  margin: 0;
+}
+
+.main-home .content {
+  margin-top: 40px;
+}
+
+.main-home .content .why-box {
+  color: var(--contrast-color);
+  background: var(--accent-color);
+  padding: 30px;
+  border-radius: 4px;
+}
+
+.main-home .content .why-box h3 {
+  color: var(--contrast-color);
+  font-weight: 700;
+  font-size: 34px;
+  margin-bottom: 30px;
+}
+
+.main-home .content .why-box p {
+  margin-bottom: 30px;
+}
+
+.main-home .content .why-box .more-btn {
+  color: var(--contrast-color);
+  background: color-mix(in srgb, var(--contrast-color), transparent 80%);
+  display: inline-block;
+  padding: 6px 30px 8px 30px;
+  border-radius: 50px;
+  transition: all ease-in-out 0.4s;
+}
+
+.main-home .content .why-box .more-btn i {
+  font-size: 14px;
+}
+
+.main-home .content .why-box .more-btn:hover {
+  background: var(--surface-color);
+  color: var(--accent-color);
+}
+
+.main-home .content .icon-box {
+  text-align: center;
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--surface-color), transparent 20%);
+  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
+  padding: 40px 30px;
+  width: 100%;
+}
+
+.main-home .content .icon-box i {
+  font-size: 40px;
+  color: var(--accent-color);
+}
+
+.main-home .content .icon-box h4 {
+  font-size: 20px;
+  font-weight: 700;
+  margin: 10px 0 20px 0;
+}
+
+.main-home .content .icon-box p {
+  font-size: 15px;
+  color: color-mix(in srgb, var(--default-color), transparent 30%);
+}
+
+
+/* #endregion */
+
+/* #region doctors */
+.doctors .team-member {
+  background-color: var(--surface-color);
+  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
+  position: relative;
+  border-radius: 5px;
+  transition: 0.5s;
+  padding: 30px;
+  height: 100%;
+}
+
+@media (max-width: 468px) {
+  .doctors .team-member {
+    flex-direction: column;
+    justify-content: center !important;
+    align-items: center !important;
+  }
+}
+
+.doctors .team-member .pic {
+  overflow: hidden;
+  width: 150px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.doctors .team-member .pic img {
+  transition: ease-in-out 0.3s;
+}
+
+.doctors .team-member:hover {
+  transform: translateY(-10px);
+}
+
+.doctors .team-member .member-info {
+  padding-left: 30px;
+}
+
+@media (max-width: 468px) {
+  .doctors .team-member .member-info {
+    padding: 30px 0 0 0;
+    text-align: center;
+  }
+}
+
+.doctors .team-member h4 {
+  font-weight: 700;
+  margin-bottom: 5px;
+  font-size: 20px;
+}
+
+.doctors .team-member span {
+  display: block;
+  font-size: 15px;
+  padding-bottom: 10px;
+  position: relative;
+  font-weight: 500;
+}
+
+.doctors .team-member span::after {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 50px;
+  height: 1px;
+  background: color-mix(in srgb, var(--default-color), transparent 85%);
+  bottom: 0;
+  left: 0;
+}
+
+@media (max-width: 468px) {
+  .doctors .team-member span::after {
+    left: calc(50% - 25px);
+  }
+}
+
+.doctors .team-member p {
+  margin: 10px 0 0 0;
+  font-size: 14px;
+}
+
+.doctors .team-member .social {
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  width: 100%;
+}
+
+@media (max-width: 468px) {
+  .doctors .team-member .social {
+    justify-content: center;
+  }
+}
+
+.doctors .team-member .social a {
+  background: color-mix(in srgb, var(--default-color), transparent 94%);
+  transition: ease-in-out 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50px;
+  width: 36px;
+  height: 36px;
+}
+
+.doctors .team-member .social a i {
+  color: color-mix(in srgb, var(--default-color), transparent 20%);
+  font-size: 16px;
+  margin: 0 2px;
+}
+
+.doctors .team-member .social a:hover {
+  background: var(--accent-color);
+}
+
+.doctors .team-member .social a:hover i {
+  color: var(--contrast-color);
+}
+
+.doctors .team-member .social a+a {
+  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

+<div class="custom-child">
+
+    <!-- #region main-home -->
+    <section class="main-home section light-background">
+
+        <img src="assets/images/cover.png" alt="Cover">
+
+        <div class="container position-relative">
+
+            <div class="welcome position-relative">
+                <h2 style="margin-left: 0.5em">المركز الطبي</h2>
+                <br>
+                <p style="font-weight: 500; color:var(--heading-color);">لدى مركز الدراسات والبحوث العلمية</p>
+            </div>
+
+            <div class="content row gy-4">
+
+                <div class="col-lg-4 d-flex align-items-stretch">
+                    <div class="why-box">
+                        <h3 class="text-center">تسجيل الدخول</h3>
+                        <p class="text-center text-light">
+                            للاستفادة من خدمات هذا التطبيق، يحب عليك تسجيل الدخول أولاً
+                        </p>
+                        <div class="text-center">
+                            <a href="#about" class="more-btn"><span>تسجيل الدخول </span> <i
+                                    class="bi bi-chevron-right"></i></a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-lg-8 d-flex align-items-stretch">
+                    <div class="d-flex flex-column justify-content-center">
+
+                        <div class="row gy-4">
+
+                            <div class="col-xl-4 d-flex align-items-stretch">
+                                <div class="icon-box">
+                                    <i class="bi bi-clipboard-data"></i>
+                                    <h4>التاريخ المرضي</h4>
+                                    <p class="text-center" style="font-weight: 500; color:var(--heading-color);">يوفر
+                                        التطبيق امكانية استعراض التاريخ المرضي لموظفي المركز وأفراد عائلتهم
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div class="col-xl-4 d-flex align-items-stretch">
+                                <div class="icon-box">
+                                    <i class="bi bi-graph-up"></i>
+                                    <h4>احصائيات</h4>
+                                    <p class="text-center" style="font-weight: 500; color:var(--heading-color);">من
+                                        مزايا هذا التطبيق امكانية عرض احصائيات طبيّة لموظفي المركز
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div class="col-xl-4 d-flex align-items-stretch">
+                                <div class="icon-box">
+                                    <i class="bi bi-clock-history"></i>
+                                    <h4>دور الانتظار</h4>
+                                    <p style="font-weight: 500; color:var(--heading-color);">يتيح هذا التطبيق إمكانية
+                                        تنظيم أدوار انتظار المرضى </p>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+    </section>
+    <!-- #endregion -->
+
+    <!-- #region doctors -->
+    <section id="doctors" class="doctors section">
+
+        <div class="container section-title">
+            <h2>الفريق الطبي</h2>
+        </div>
+
+        <div class="container mt">
+
+            <div class="row gy-4">
+
+                <div class="col-lg-6">
+                    <div class="team-member d-flex align-items-start">
+                        <div class="pic"><img src="assets/images/doctors/doctors-1.jpg" class="img-fluid" alt=""></div>
+                        <div class="member-info">
+                            <h4>د. أحمد حافظ</h4>
+                            <span>اخصائي جراحة وجه وفكين</span>
+                            <div class="social">
+                                <a href=""><i class="bi bi-telephone"></i></a>
+                                <a href=""><i class="bi bi-envelope"></i></a>
+                                <a href=""><i class="bi bi-whatsapp"></i></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-lg-6">
+                    <div class="team-member d-flex align-items-start">
+                        <div class="pic"><img src="assets/images/doctors/doctors-2.jpg" class="img-fluid" alt=""></div>
+                        <div class="member-info">
+                            <h4>د. زهراء كنجو</h4>
+                            <span>اخصائية تغذية</span>
+                            <div class="social">
+                                <a href=""><i class="bi bi-telephone"></i></a>
+                                <a href=""><i class="bi bi-envelope"></i></a>
+                                <a href=""><i class="bi bi-whatsapp"></i></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-lg-6">
+                    <div class="team-member d-flex align-items-start">
+                        <div class="pic"><img src="assets/images/doctors/doctors-3.jpg" class="img-fluid" alt=""></div>
+                        <div class="member-info">
+                            <h4>د. رغدان ربيع</h4>
+                            <span>اخصائي أمراض قلبية</span>
+                            <div class="social">
+                                <a href=""><i class="bi bi-telephone"></i></a>
+                                <a href=""><i class="bi bi-envelope"></i></a>
+                                <a href=""><i class="bi bi-whatsapp"></i></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-lg-6">
+                    <div class="team-member d-flex align-items-start">
+                        <div class="pic"><img src="assets/images/doctors/doctors-4.jpg" class="img-fluid" alt=""></div>
+                        <div class="member-info">
+                            <h4>د. شام محمد</h4>
+                            <span>اخصائية علاج فيزيائي</span>
+                            <div class="social">
+                                <a href=""><i class="bi bi-telephone"></i></a>
+                                <a href=""><i class="bi bi-envelope"></i></a>
+                                <a href=""><i class="bi bi-whatsapp"></i></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+
+    </section>
+    <!-- #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/home/home.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrl: './home.component.css'
+})
+export class HomeComponent {
+
+}

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

-<nav class="navbar navbar-expand-sm navbar-light bg-light">
-  <div class="container-fluid">
+<app-layout></app-layout>
\ No newline at end of file
-    <a class="navbar-brand" href="#">
-      <h1>Angular Bootstrap</h1>
-    </a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-        <li class="nav-item">
-          <a class="nav-link active" aria-current="page" href="#">Home</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">Link</a>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
-            aria-expanded="false">
-            Dropdown
-          </a>
-          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <li><a class="dropdown-item" href="#">Action</a></li>
-            <li><a class="dropdown-item" href="#">Another action</a></li>
-            <li>
-              <hr class="dropdown-divider">
-            </li>
-            <li><a class="dropdown-item" href="#">Something else here</a></li>
-          </ul>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
-        </li>
-      </ul>
-      <form class="d-flex">
-        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success" type="submit">Search</button>
-      </form>
-    </div>
-  </div>
-</nav>
-<div class="container-fluid py-3">
-  <div class="row my-3">
-    <div class="col">
-      <label for="exampleFormControlInput1" class="form-label">Email address</label>
-      <input type="email" class="form-control form-control-sm" id="exampleFormControlInput1"
-        placeholder="name@example.com">
-    </div>
-  </div>
-  <div class="row my-3">
-    <div class="col">
-      <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
-      <textarea class="form-control form-control-sm" id="exampleFormControlTextarea1" rows="3"></textarea>
-    </div>
-  </div>
-  <div class="row my-3">
-    <div class="col">
-      <div class="form-check form-switch">
-        <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
-        <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
-      </div>
-    </div>
-  </div>
-  <div class="row my-3">
-    <div class="col">
-      <button class="btn btn-sm btn-outline-primary" (click)="open(demoModal)">Launch demo modal</button>
-      <button class="btn btn-sm btn-outline-primary" (click)="showToast()">Try toasts</button>
-    </div>
-  </div>
-</div>
-
-<ng-template #demoModal let-modal>
-  <div class="modal-header">
-    <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
-    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
-      (click)="modal.dismiss('Cross click')"></button>
-  </div>
-  <div class="modal-body">
-    <form>
-      <div class="form-group">
-        <label for="dateOfBirth">Date of birth</label>
-        <div class="input-group">
-          <input id="dateOfBirth" name="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" ngbDatepicker
-            #dp="ngbDatepicker">
-          <button type="button" class="btn btn-outline-secondary bi bi-calendar" (click)="dp.toggle()"></button>
-        </div>
-      </div>
-    </form>
-  </div>
-  <div class="modal-footer">
-    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
-  </div>
-</ng-template>
-
-
-<img src="/assets/image.png" alt="img">
\ No newline at end of file

Clinics.Frontend/src/app/components/template/footer/footer.component.css

+/* #region Custom */
+.custom-credits p{
+    color: var(--heading-color);
+    font-weight: 700;
+}
+/* #endregion */
+
+/* #region Footer */
+.footer {
+    color: var(--default-color);
+    background-color: var(--background-color);
+    border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
+    font-size: 14px;
+    position: relative;
+}
+
+.footer .footer-top {
+    padding-top: 50px;
+}
+
+.footer .footer-about .logo {
+    line-height: 1;
+    margin-bottom: 25px;
+}
+
+.footer .footer-about .logo img {
+    max-height: 40px;
+    margin-right: 6px;
+}
+
+.footer .footer-about .logo span {
+    color: var(--heading-color);
+    font-family: var(--heading-font);
+    font-size: 26px;
+    font-weight: 700;
+    letter-spacing: 1px;
+}
+
+.footer .footer-about p {
+    font-size: 14px;
+    font-family: var(--heading-font);
+}
+
+.footer .social-links a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
+    font-size: 16px;
+    color: color-mix(in srgb, var(--default-color), transparent 20%);
+    margin-right: 10px;
+    transition: 0.3s;
+}
+
+.footer .social-links a:hover {
+    color: var(--accent-color);
+    border-color: var(--accent-color);
+}
+
+.footer h4 {
+    font-size: 16px;
+    font-weight: bold;
+    position: relative;
+    padding-bottom: 12px;
+}
+
+.footer .footer-links {
+    margin-bottom: 30px;
+}
+
+.footer .footer-links ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.footer .footer-links ul i {
+    padding-right: 2px;
+    font-size: 12px;
+    line-height: 0;
+}
+
+.footer .footer-links ul li {
+    padding: 10px 0;
+    display: flex;
+    align-items: center;
+}
+
+.footer .footer-links ul li:first-child {
+    padding-top: 0;
+}
+
+.footer .footer-links ul a {
+    color: color-mix(in srgb, var(--default-color), transparent 30%);
+    display: inline-block;
+    line-height: 1;
+}
+
+.footer .footer-links ul a:hover {
+    color: var(--accent-color);
+}
+
+.footer .footer-contact p {
+    margin-bottom: 5px;
+}
+
+.footer .copyright {
+    padding-top: 25px;
+    padding-bottom: 25px;
+    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
+}
+
+.footer .copyright p {
+    margin-bottom: 0;
+}
+
+.footer .credits {
+    margin-top: 8px;
+    font-size: 13px;
+}
+
+/* #endregion */
\ No newline at end of file

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

+<div class="custom-child">
+    <footer id="footer" class="footer light-background">
+        <div class="container footer-top">
+            <div class="row gy-4 justify-content-center">
+                <div class="col-lg-4 col-md-6 footer-about mx-auto">
+                    <div class="logo d-flex align-items-center">
+                        <span class="sitename">المركز الطبي - برنامج الأطباء</span>
+                    </div>
+                    <div class="footer-contact pt-3 text-center custom-credits">
+                        <p>إشراف: المهندس محمود الياس</p>
+                        <p>تطوير: المهنّد ياسر حافظ</p>
+                        <br>
+                    </div>
+                    <div class="social-links d-flex justify-content-center mb-4">
+                        <a href="https://github.com/Almouhannad" target="_blank"><i class="bi bi-github"></i></a>
+                        <a href="mailto:almohannad.hafez@hiast.edu.sy"><i class="bi bi-envelope"></i></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+</div>
+

Clinics.Frontend/src/app/components/template/footer/footer.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrl: './footer.component.css'
+})
+export class FooterComponent {
+
+}

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

+/* #region Custom */
+.custom-app-name {
+    font-size: 30px;
+    font-weight: 700;
+    color: var(--heading-color);
+}
+
+.custom-buttons .btn-outline-primary{
+    font-weight: 650;
+}
+
+.custom-buttons .btn-outline-secondary {
+    color: var(--heading-color);
+    font-weight: 650;
+    border: none;
+}
+
+.custom-buttons .btn-outline-secondary:hover {
+    box-shadow: inset 0 0 0 2px gray ;
+    background-color: inherit;
+}
+
+/* #endregion */
+
+/* #region Header*/
+.header {
+    color: var(--default-color);
+    transition: all 0.5s;
+    z-index: 997;
+    background-color: var(--background-color);
+}
+
+/* .header .topbar {
+    background-color: var(--accent-color);
+    height: 40px;
+    padding: 0;
+    font-size: 14px;
+    transition: all 0.5s;
+}
+
+.header .topbar .contact-info i {
+    font-style: normal;
+    color: var(--contrast-color);
+}
+
+.header .topbar .contact-info i a,
+.header .topbar .contact-info i span {
+    padding-left: 5px;
+    color: var(--contrast-color);
+}
+
+@media (max-width: 575px) {
+
+    .header .topbar .contact-info i a,
+    .header .topbar .contact-info i span {
+        font-size: 13px;
+    }
+}
+
+.header .topbar .contact-info i a {
+    line-height: 0;
+    transition: 0.3s;
+}
+
+.header .topbar .contact-info i a:hover {
+    color: var(--contrast-color);
+    text-decoration: underline;
+}
+
+.header .topbar .social-links a {
+    color: color-mix(in srgb, var(--contrast-color), transparent 40%);
+    line-height: 0;
+    transition: 0.3s;
+    margin-left: 20px;
+}
+
+.header .topbar .social-links a:hover {
+    color: var(--contrast-color);
+} */
+
+.header .branding {
+    min-height: 60px;
+    padding: 10px 0;
+}
+
+.header .logo {
+    line-height: 1;
+}
+
+.header .logo h1 {
+    font-size: 30px;
+    margin: 0;
+    font-weight: 700;
+    color: var(--heading-color);
+}
+
+/* .header .cta-btn,
+.header .cta-btn:focus {
+    color: var(--contrast-color);
+    background: var(--accent-color);
+    font-size: 14px;
+    padding: 8px 25px;
+    margin: 0 0 0 30px;
+    border-radius: 50px;
+    transition: 0.3s;
+}
+
+.header .cta-btn:hover,
+.header .cta-btn:focus:hover {
+    color: var(--contrast-color);
+    background: color-mix(in srgb, var(--accent-color), transparent 15%);
+} */
+
+@media (max-width: 1200px) {
+    .header .logo {
+        order: 1;
+    }
+
+    /* .header .cta-btn {
+        order: 2;
+        margin: 0 15px 0 0;
+        padding: 6px 15px;
+    } */
+
+    .header .navmenu {
+        order: 3;
+    }
+}
+
+.scrolled .header {
+    box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
+}
+
+.scrolled .header .topbar {
+    height: 0;
+    visibility: hidden;
+    overflow: hidden;
+}
+
+/* #endregion */
+
+/* #region Nav menu */
+/* Desktop Navigation */
+@media (min-width: 1200px) {
+    .navmenu {
+        padding: 0;
+    }
+
+    .navmenu ul {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        list-style: none;
+        align-items: center;
+    }
+
+    .navmenu li {
+        position: relative;
+    }
+
+    .navmenu>ul>li {
+        white-space: nowrap;
+        padding: 15px 14px;
+    }
+
+    .navmenu>ul>li:last-child {
+        padding-right: 0;
+    }
+
+    .navmenu a,
+    .navmenu a:focus {
+        color: var(--nav-color);
+        font-size: 15px;
+        padding: 0 2px;
+        font-family: var(--nav-font);
+        font-weight: 400;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        white-space: nowrap;
+        transition: 0.3s;
+        position: relative;
+    }
+
+    .navmenu a i,
+    .navmenu a:focus i {
+        font-size: 12px;
+        line-height: 0;
+        margin-left: 5px;
+        transition: 0.3s;
+    }
+
+    .navmenu>ul>li>a:before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        bottom: -6px;
+        left: 0;
+        background-color: var(--nav-hover-color);
+        visibility: hidden;
+        width: 0px;
+        transition: all 0.3s ease-in-out 0s;
+    }
+
+    .navmenu a:hover:before,
+    .navmenu li:hover>a:before,
+    .navmenu .active:before {
+        visibility: visible;
+        width: 100%;
+    }
+
+    .navmenu li:hover>a,
+    .navmenu .active,
+    .navmenu .active:focus {
+        color: var(--nav-hover-color);
+    }
+
+    .navmenu .dropdown ul {
+        margin: 0;
+        padding: 10px 0;
+        background: var(--nav-dropdown-background-color);
+        display: block;
+        position: absolute;
+        visibility: hidden;
+        left: 14px;
+        top: 130%;
+        opacity: 0;
+        transition: 0.3s;
+        border-radius: 4px;
+        z-index: 99;
+        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
+    }
+
+    .navmenu .dropdown ul li {
+        min-width: 200px;
+    }
+
+    .navmenu .dropdown ul a {
+        padding: 10px 20px;
+        font-size: 15px;
+        text-transform: none;
+        color: var(--nav-dropdown-color);
+    }
+
+    .navmenu .dropdown ul a i {
+        font-size: 12px;
+    }
+
+    .navmenu .dropdown ul a:hover,
+    .navmenu .dropdown ul .active:hover,
+    .navmenu .dropdown ul li:hover>a {
+        color: var(--nav-dropdown-hover-color);
+    }
+
+    .navmenu .dropdown:hover>ul {
+        opacity: 1;
+        top: 100%;
+        visibility: visible;
+    }
+
+    .navmenu .dropdown .dropdown ul {
+        top: 0;
+        left: -90%;
+        visibility: hidden;
+    }
+
+    .navmenu .dropdown .dropdown:hover>ul {
+        opacity: 1;
+        top: 0;
+        left: -100%;
+        visibility: visible;
+    }
+}
+
+/* Mobile Navigation */
+@media (max-width: 1199px) {
+    .mobile-nav-toggle {
+        color: var(--nav-color);
+        font-size: 28px;
+        line-height: 0;
+        margin-right: 10px;
+        cursor: pointer;
+        transition: color 0.3s;
+    }
+
+    .navmenu {
+        padding: 0;
+        z-index: 9997;
+    }
+
+    .navmenu ul {
+        display: none;
+        list-style: none;
+        position: absolute;
+        inset: 60px 20px 20px 20px;
+        padding: 10px 0;
+        margin: 0;
+        border-radius: 6px;
+        background-color: var(--nav-mobile-background-color);
+        border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
+        box-shadow: none;
+        overflow-y: auto;
+        transition: 0.3s;
+        z-index: 9998;
+    }
+
+    .navmenu a,
+    .navmenu a:focus {
+        color: var(--nav-dropdown-color);
+        padding: 10px 20px;
+        font-family: var(--nav-font);
+        font-size: 17px;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        white-space: nowrap;
+        transition: 0.3s;
+    }
+
+    .navmenu a i,
+    .navmenu a:focus i {
+        font-size: 12px;
+        line-height: 0;
+        margin-left: 5px;
+        width: 30px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        transition: 0.3s;
+        background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
+    }
+
+    .navmenu a i:hover,
+    .navmenu a:focus i:hover {
+        background-color: var(--accent-color);
+        color: var(--contrast-color);
+    }
+
+    .navmenu a:hover,
+    .navmenu .active,
+    .navmenu .active:focus {
+        color: var(--nav-dropdown-hover-color);
+    }
+
+    .navmenu .active i,
+    .navmenu .active:focus i {
+        background-color: var(--accent-color);
+        color: var(--contrast-color);
+        transform: rotate(180deg);
+    }
+
+    .navmenu .dropdown ul {
+        position: static;
+        display: none;
+        z-index: 99;
+        padding: 10px 0;
+        margin: 10px 20px;
+        background-color: var(--nav-dropdown-background-color);
+        transition: all 0.5s ease-in-out;
+    }
+
+    .navmenu .dropdown ul ul {
+        background-color: rgba(33, 37, 41, 0.1);
+    }
+
+    .navmenu .dropdown>.dropdown-active {
+        display: block;
+        background-color: rgba(33, 37, 41, 0.03);
+    }
+
+    .mobile-nav-active {
+        overflow: hidden;
+    }
+
+    .mobile-nav-active .mobile-nav-toggle {
+        color: #fff;
+        position: absolute;
+        font-size: 32px;
+        top: 15px;
+        right: 15px;
+        margin-right: 0;
+        z-index: 9999;
+    }
+
+    .mobile-nav-active .navmenu {
+        position: fixed;
+        overflow: hidden;
+        inset: 0;
+        background: rgba(33, 37, 41, 0.8);
+        transition: 0.3s;
+    }
+
+    .mobile-nav-active .navmenu>ul {
+        display: block;
+    }
+}
+
+/* #endregion */
\ No newline at end of file

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

+<div class="custom-child">
+    <div class="header">
+        <div class="branding d-flex align-items-center">
+
+            <div class="container position-relative d-flex align-items-center justify-content-between">
+                <div class="logo d-flex align-items-center me-auto">
+                    <img src="assets/images/logo.png" alt="Logo" width="100em" height="100em">
+                </div>
+
+                <h1 class="h3 m-auto custom-app-name">المركز الطبي - برنامج الأطباء</h1>
+
+                <nav class="navmenu custom-buttons">
+                    <ul>
+                        <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"
+                                    [class]="{'btn-outline-primary': isSelected('Doctors'), 'btn-outline-secondary': !isSelected('Doctors')}"
+                                    (click)="selectButton('Doctors')">الفريق الطبي</button></a></li>
+                        <li><a href="#"><button class="btn"
+                                    [class]="{'btn-outline-primary': isSelected('Home'), 'btn-outline-secondary': !isSelected('Home')}"
+                                    (click)="selectButton('Home')">الصفحة الرئيسية</button></a></li>
+                    </ul>
+                </nav>
+            </div>
+
+        </div>
+
+    </div>
+</div>
\ No newline at end of file

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

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrl: './header.component.css'
+})
+export class HeaderComponent {
+
+  //#region Selected button
+  private selectedButton: string = 'Home';
+
+  isSelected(buttonName: string): boolean {
+    return this.selectedButton === buttonName;
+  }
+
+  selectButton(buttonName: string): void {
+    this.selectedButton = buttonName;
+  }
+  //#endregion
+
+}

Clinics.Frontend/src/app/components/template/layout/layout.component.css

+/* #region General */
+::ng-deep .custom-child{
+    color: var(--default-color);
+    background-color: var(--background-color);
+    font-family: var(--default-font);
+}
+
+::ng-deep .custom-child a {
+    color: var(--accent-color);
+    text-decoration: none;
+    transition: 0.3s;
+}
+
+::ng-deep .custom-child a:hover {
+    color: color-mix(in srgb, var(--accent-color), transparent 25%);
+    text-decoration: none;
+}
+
+::ng-deep .custom-child h1,
+::ng-deep .custom-child h2,
+::ng-deep .custom-child h3,
+::ng-deep .custom-child h4,
+::ng-deep .custom-child h5,
+::ng-deep .custom-child h6,
+::ng-deep .custom-child p {
+    color: var(--heading-color);
+    font-family: var(--heading-font);
+}
+
+/* #endregion */
+
+/* #region Sections */
+::ng-deep section,
+::ng-deep .section {
+    color: var(--default-color);
+    background-color: var(--background-color);
+    padding: 60px 0;
+    scroll-margin-top: 72px;
+    overflow: clip;
+}
+::ng-deep .section-title {
+    text-align: center;
+    padding-bottom: 30px;
+    position: relative;
+}
+
+::ng-deep .section-title h2 {
+    font-size: 32px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+    position: relative;
+}
+
+::ng-deep .section-title h2:before {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 160px;
+    height: 1px;
+    background: color-mix(in srgb, var(--default-color), transparent 60%);
+    left: 0;
+    right: 0;
+    bottom: 1px;
+    margin: auto;
+}
+
+::ng-deep .section-title h2::after {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 160px;
+    height: 3px;
+    background: var(--accent-color);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+}
+
+::ng-deep .section-title p {
+    margin-bottom: 0;
+}
+
+/* #endregion */
\ No newline at end of file

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

+<app-header class="sticky-top"></app-header>
+
+<router-outlet></router-outlet>
+
+<app-footer></app-footer>
\ No newline at end of file

Clinics.Frontend/src/app/components/template/layout/layout.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-layout',
+  templateUrl: './layout.component.html',
+  styleUrl: './layout.component.css'
+})
+export class LayoutComponent {
+
+}

Clinics.Frontend/src/assets/svg/favicon.svg

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 280.028 280.028" xml:space="preserve" fill="#000000">
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+<g id="SVGRepo_iconCarrier"> <g> <path style="fill:#ffffff;" d="M140.014,0c77.323,0,140.014,62.691,140.014,140.014c0,77.314-62.691,140.014-140.014,140.014 S0,217.336,0,140.014S62.682,0,140.014,0z"/> <path style="fill:#E2574C;" d="M78.749,113.787h35.135V78.749c0-4.83,3.912-8.751,8.742-8.751h34.968 c4.822,0,8.733,3.92,8.733,8.751v35.03h34.951c4.839,0,8.751,3.912,8.751,8.751v35.012c0,4.848-3.912,8.768-8.751,8.768h-34.951 v34.933c0,4.839-3.912,8.751-8.733,8.751h-34.968c-4.83,0-8.742-3.912-8.742-8.751V166.31H78.749c-4.839,0-8.76-3.92-8.76-8.768 V122.53C69.989,117.699,73.91,113.787,78.749,113.787z"/> </g> </g>
+</svg>
\ No newline at end of file

Clinics.Frontend/src/index.html

 <!doctype html>
-<html lang="en">
+<html lang="ar">
 
 <head>
+
+
   <meta charset="utf-8">
-  <title>Agnular + Bootstrap(NgbModules)</title>
+  <title>برنامج الأطباء</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="shortcut icon" href="assets/svg/favicon.svg" type="image/x-icon">
+
+  <!-- #region Fonts -->
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap"
+    rel="stylesheet">
+  <!-- #endregion Header -->
+
 </head>
 
 <body>
+
+
   <app-root></app-root>
+
+
 </body>
 
 </html>
\ No newline at end of file

Clinics.Frontend/src/styles.scss

@@ -4,3 +4,5 @@
 // Toasts style
 @import "../node_modules/ngx-toastr/toastr-bs5-alert.scss";
 
+// Template constants
+@import "./templateConstants.css"
\ No newline at end of file

Clinics.Frontend/src/templateConstants.css

+/* Fonts */
+:root {
+    --default-font: "Cairo";
+    --heading-font: "Cairo";
+    --nav-font: "Cairo";
+}
+
+/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
+:root {
+    --background-color: #ffffff;
+    /* Background color for the entire website, including individual sections */
+    --default-color: #444444;
+    /* Default color used for the majority of the text content across the entire website */
+    --heading-color: #2c4964;
+    /* Color for headings, subheadings and title throughout the website */
+    --accent-color: #1977cc;
+    /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
+    --surface-color: #ffffff;
+    /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
+    --contrast-color: #ffffff;
+    /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
+}
+
+/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
+:root {
+    --nav-color: #2c4964;
+    /* The default color of the main navmenu links */
+    --nav-hover-color: #1977cc;
+    /* Applied to main navmenu links when they are hovered over or active */
+    --nav-mobile-background-color: #ffffff;
+    /* Used as the background color for mobile navigation menu */
+    --nav-dropdown-background-color: #ffffff;
+    /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
+    --nav-dropdown-color: #2c4964;
+    /* Used for navigation links of the dropdown items in the navigation menu. */
+    --nav-dropdown-hover-color: #1977cc;
+    /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
+}
+
+/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */
+
+.light-background {
+    --background-color: #f1f7fc;
+    --surface-color: #ffffff;
+}
+
+.dark-background {
+    --background-color: #060606;
+    --default-color: #ffffff;
+    --heading-color: #ffffff;
+    --surface-color: #252525;
+    --contrast-color: #ffffff;
+}
+
+/* Smooth scroll */
+:root {
+    scroll-behavior: smooth;
+}
\ No newline at end of file