(F) Set layout comp

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

+<h1>فوتر</h1>
\ No newline at end of file

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

+<h1>هيدر</h1>
\ No newline at end of file

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

+/*--------------------------------------------------------------
+  # General Styling & Shared Classes
+  --------------------------------------------------------------*/
+* {
+    color: var(--default-color);
+    background-color: var(--background-color);
+    font-family: var(--default-font);
+}
+
+a {
+    color: var(--accent-color);
+    text-decoration: none;
+    transition: 0.3s;
+}
+
+a:hover {
+    color: color-mix(in srgb, var(--accent-color), transparent 25%);
+    text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--heading-color);
+    font-family: var(--heading-font);
+}
\ No newline at end of file

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

+<div class="app-header">
+    <app-header></app-header>
+</div>
+
+<div class="app-footer">
+    <app-footer></app-footer>
+</div>
\ 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