(F) Add footer

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

-<h1>فوتر</h1>
+<footer id="footer" class="footer light-background">
\ No newline at end of file
+    <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>
\ No newline at end of file