chore: finalize about and contact pages, fix stylesheet path, add TODO comments for future improvements

src/styles/header-footer.css

@@ -12,63 +12,137 @@ body {
     text-align: center;
 }
 
-/*? ↓  Start Header ↓ */
+/*? ↓  Start Header ↓ */
 .main-header {
-    background-color: #333; /* Dark background for the header */
-    color: #fff; /* White text color */
-    padding: 10px 20px; /* Add some padding for spacing */
+    background: linear-gradient(to right, #1E2A38 0%, #E8F3FF 10%, #E8F3FF 40%, #1E2A38 100%);
+    color: #495057;
+    padding: 20px 40px;
+    border-bottom: 1px solid #dee2e6;
 }
 
 .main-nav {
-    display: flex; /* Use flexbox to align items in a row */
-    justify-content: space-between; /* Space items evenly */
-    align-items: center; /* Vertically center items */
-}
-
-.nav-list {
-    list-style: none; /* Remove default list styling */
-    display: flex; /* Use flexbox to align list items in a row */
-    gap: 20px; /* Add some space between list items */
-}
-
-.nav-item a {
-    background-color: #2e97be;
-    color: #fff; /* White text color for links */
-    text-decoration: none; /* Remove underline from links */
-    font-weight: bold; /* Make text bold */
-    transition: color 0.3s; /* Smooth color transition on hover */
-    padding: 5px 10px;    border-radius: 10px;
-}
-
-.nav-item a:hover {
-    color: #2e97be;
-    background-color: #fff /* Change link color on hover */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
 }
 
 .nav-logo a {
-    font-size: 1.5em; /* Make the logo text larger */
+    font-size: 1.8em;
+    font-weight: 700;
+    color: #2E97BE;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.nav-list {
+    list-style: none;
+    display: flex;
+    gap: 30px;
+}
+
+.nav-item a {
+    background-color: transparent;
+    color: #495057;
+    text-decoration: none;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    padding: 8px 15px;
+    border-radius: 5px;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+}
+
+.nav-item a:hover {
+    color: #ffffff;
+    background-color: #2E97BE;
+    transform: none;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.nav-item a:hover::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(45deg, #2E97BE, #3498db);
+    border-radius: 10px;
+
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
+    z-index: -1;
+}
+
+.nav-item a:hover::before {
+    transform: scaleX(1);
 }
 
 .nav-logo {
-    margin-right: 20vw;
+    margin: 0;
 }
 
 
-/*? ↓  Start Footer ↓ */
+
+/*? ↓  Start Footer ↓ */
+footer {
+    background: linear-gradient(to right, #1E2A38 0%, #E8F3FF 33%, #E8F3FF 66%, #1E2A38 100%);
+    color: #495057;
+    border-top: 1px solid #dee2e6;
+    margin-top: 30px;
+    padding: 30px 40px;
+}
+
+.footer-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+footer ul {
+    list-style: none;
+}
 
 .footer-links {
-    display: flex; /* Use flexbox to align items in a row */
-    align-items: center;
-    justify-content: space-between; /* Center the footer links */
-    gap: 20px; /* Add some space between links */
-    margin-top: 20px; /* Add some space above the footer links */
-    width: 75vw;
-    margin-left: auto;
-    margin-right: auto;
+    display: flex;
+    justify-content: center;
+    gap: 30px;
+    padding: 0;
+    margin: 20px 0;
 }
 
-.external-links {
+.social-links {
     display: flex;
-    justify-content: center; /* Center the external links */
-    gap: 50px; /* Add some space between links */
+    justify-content: center;
+    gap: 30px;
+    margin-top: 20px;
+}
+
+.social-links a,
+.footer-links a {
+    font-size: 1.1em;
+    display: inline-block;
+    color: #495057;
+    text-decoration: none;
+    font-size: 1.1em;
+    transition: color 0.3s ease;
+}
+
+.social-links a:hover,
+.footer-links a:hover {
+    color: #2e97be;
+    transform: scale(1.1) translateY(-2px);
+}
+
+.copyright {
+    margin: 20px 0 0;
+    font-size: 0.9em;
+    color: #6c757d;
 }