(F) Add doctors section to home page

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

-
-
 /* #region main-home */
+
 .main-home {
   width: 100%;
   min-height: calc(100vh - 112px);
@@ -104,4 +103,130 @@
 }
 
 
+/* #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 */
\ 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">
@@ -34,7 +36,7 @@
                             <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>
+                                    <h4>التاريخ المرضي</h4>
                                     <p class="text-center" style="font-weight: 500; color:var(--heading-color);">يوفر
                                         التطبيق امكانية استعراض التاريخ المرضي لموظفي المركز وأفراد عائلتهم
                                     </p>
@@ -44,7 +46,7 @@
                             <div class="col-xl-4 d-flex align-items-stretch">
                                 <div class="icon-box">
                                     <i class="bi bi-graph-up"></i>
-                                    <h4>استخلاص الاحصائيات</h4>
+                                    <h4>احصائيات</h4>
                                     <p class="text-center" style="font-weight: 500; color:var(--heading-color);">من
                                         مزايا هذا التطبيق امكانية عرض احصائيات طبيّة لموظفي المركز
                                     </p>
@@ -54,7 +56,7 @@
                             <div class="col-xl-4 d-flex align-items-stretch">
                                 <div class="icon-box">
                                     <i class="bi bi-clock-history"></i>
-                                    <h4>تنظيم دور الانتظار</h4>
+                                    <h4>دور الانتظار</h4>
                                     <p style="font-weight: 500; color:var(--heading-color);">يتيح هذا التطبيق إمكانية
                                         تنظيم أدوار انتظار المرضى </p>
                                 </div>
@@ -68,6 +70,83 @@
         </div>
 
     </section>
+    <!-- #endregion -->
 
-</div>
+    <!-- #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 -->
+</div>
\ No newline at end of file

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

@@ -131,11 +131,11 @@
     box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
 }
 
-/* .scrolled .header .topbar {
+.scrolled .header .topbar {
     height: 0;
     visibility: hidden;
     overflow: hidden;
-} */
+}
 
 /* #endregion */
 

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

 <div class="custom-child">
-    <div class="header sticky-top">
+    <div class="header">
         <div class="branding d-flex align-items-center">
 
             <div class="container position-relative d-flex align-items-center justify-content-between">
@@ -7,16 +7,19 @@
                     <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><button class="btn btn-outline-secondary">اتصل بنا</button></li>
-                        <li><button class="btn btn-outline-secondary">المواعيد اليوميّة</button></li>
-                        <li><button class="btn btn-outline-secondary">الأطباء</button></li>
-                        <li><button class="btn btn-outline-primary">القائمة الرئيسية</button></li>
+                        <li><a><button class="btn"
+                                    [class]="{'btn-outline-primary': isSelected('Contact Us'), 'btn-outline-secondary': !isSelected('Contact Us')}"
+                                    (click)="selectButton('Contact Us')">عن المستوصف</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('Main Menu'), 'btn-outline-secondary': !isSelected('Main Menu')}"
+                                    (click)="selectButton('Main Menu')">الصفحة الرئيسية</button></a></li>
                     </ul>
                 </nav>
             </div>
@@ -24,5 +27,4 @@
         </div>
 
     </div>
-
 </div>
\ No newline at end of file

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

@@ -7,4 +7,16 @@ import { Component } from '@angular/core';
 })
 export class HeaderComponent {
 
+  //#region Selected button
+  private selectedButton: string = 'Main Menu';
+
+  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

@@ -40,7 +40,7 @@
 }
 ::ng-deep .section-title {
     text-align: center;
-    padding-bottom: 60px;
+    padding-bottom: 30px;
     position: relative;
 }
 
@@ -69,7 +69,7 @@
     content: "";
     position: absolute;
     display: block;
-    width: 60px;
+    width: 160px;
     height: 3px;
     background: var(--accent-color);
     left: 0;

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

-<app-header></app-header>
+<app-header class="sticky-top"></app-header>
 
 <router-outlet></router-outlet>