(F) Add home page

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

@@ -10,6 +10,7 @@ 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: [
@@ -32,7 +33,8 @@ import { FooterComponent } from './components/template/footer/footer.component';
     AppComponent,
     LayoutComponent,
     HeaderComponent,
-    FooterComponent
+    FooterComponent,
+    HomeComponent
   ],
   
   // identifies the root component that Angular should

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

+
+
+/* #region main-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 */
\ No newline at end of file

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

+<div class="custom-child">
+    <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 style="font-size: 19px;">استعراض التاريخ المرضي</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>
+
+</div>
+

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/template/footer/footer.component.html

-<footer id="footer" class="footer light-background">
+<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>
+                        <span class="sitename">المركز الطبي - برنامج الأطباء</span>
                     </div>
                     <div class="footer-contact pt-3 text-center custom-credits">
                         <p>إشراف: المهندس محمود الياس</p>
@@ -17,4 +18,6 @@
                 </div>
             </div>
         </div>
-</footer>
+    </footer>
\ No newline at end of file
+</div>
+

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

-<div class="header sticky-top">
-
-
+<div class="custom-child">
+    <div class="header sticky-top">
         <div class="branding d-flex align-items-center">
 
             <div class="container position-relative d-flex align-items-center justify-content-between">
@@ -9,7 +8,7 @@
                 </div>
 
 
-            <h1 class="h3 m-auto custom-app-name">المركز الصّحي - برنامج الأطباء</h1>
+                <h1 class="h3 m-auto custom-app-name">المركز الطبي - برنامج الأطباء</h1>
 
 
                 <nav class="navmenu custom-buttons">
@@ -24,4 +23,6 @@
 
         </div>
 
+    </div>
+
 </div>
\ No newline at end of file

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

-/*--------------------------------------------------------------
-  # General Styling & Shared Classes
-  --------------------------------------------------------------*/
-::ng-deep * {
+/* #region General */
+::ng-deep .custom-child{
     color: var(--default-color);
     background-color: var(--background-color);
     font-family: var(--default-font);
 }
 
-::ng-deep a {
+::ng-deep .custom-child a {
     color: var(--accent-color);
     text-decoration: none;
     transition: 0.3s;
 }
 
-::ng-deep a:hover {
+::ng-deep .custom-child a:hover {
     color: color-mix(in srgb, var(--accent-color), transparent 25%);
     text-decoration: none;
 }
 
-::ng-deep h1,
-::ng-deep h2,
-::ng-deep h3,
-::ng-deep h4,
-::ng-deep h5,
-::ng-deep h6 {
+::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: 60px;
+    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: 60px;
+    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></app-header>
 
+<router-outlet></router-outlet>
+
 <app-footer></app-footer>
\ No newline at end of file