feat: typography upgrade and homepage improvements

src/Analysim.Web/ClientApp/src/app/footer/footer.component.html

@@ -1,81 +1,31 @@
 <!-- Footer Start -->
-<footer class="bg-shell pt-3">
-  <!-- Footer Links Start-->
-  <div class="container-fluid text-right text-md-left footer-inner">
-    <!-- Grid row Start-->
-    <div class="row justify-content-center footer-link-row">
-      <div class="col-md-10">
-        <div class="row justify-content-center">
-          <!-- Grid column Start-->
-          <div class="col-md-4 mb-md-0 mb-3">
-            <div class="footer-about" id="about">
-              About
-            </div>
-            <!-- Links Start-->
-            <ul class="list-unstyled">
-              <li>
-                <a class="footer-link nav-interactive text-white" [routerLink]='["/contactus"]'>Contact Us</a>
-              </li>
-              <li>
-                <a class="footer-link nav-interactive text-white" [routerLink]='["/aboutus"]'>Learn More</a>
-              </li>
-            </ul> <!-- Links End-->
-          </div>
-          <div class="col-md-4 mb-md-0 mb-3 footer-connect">
-            <div class="footer-header">
-              Connect
-            </div>
-            <!-- Links Start-->
-            <ul class="list-unstyled footer-icons">
-              <li>
-                <a
-                  class="footer-icon nav-interactive text-white"
-                  [routerLink]="['/aboutus']"
-                >
-                  <img src="../../assets/img/icon-facebook.png" alt="Facebook" />
-                </a>
-              </li>
-              <li>
-                <a
-                  class="footer-icon nav-interactive text-white"
-                  [routerLink]="['/aboutus']"
-                >
-                  <img
-                    src="../../assets/img/icon-linkedin.png"
-                    alt="LinkedIn"
-                  />
-                </a>
-              </li>
-              <li>
-                <a
-                  class="footer-icon nav-interactive text-white"
-                  [routerLink]="['/aboutus']"
-                >
-                  <img src="../../assets/img/icon-twitter.png" alt="Twitter" />
-                </a>
-              </li>
-            </ul> <!-- Links End-->
-          </div>
-          <div class="col-md-4 mb-md-0 footer-empty">
-          </div>
-        <!-- Grid column -->
-        </div>
-      </div>
-
-    </div> <!-- Grid row End-->
-    <div class="row justify-content-center footer-logo-row">
-      <div class="col-md-10 mb-md-0 mb-3">
-        <div class="footer-logo">
-          Powered by &copy; 2023 AnalySim
-        </div>
-        <!-- Links Start-->
+<footer class="bg-shell app-footer">
+  <div class="container-fluid footer-inner">
+    <div class="footer-bar">
+      <!-- Left: links -->
+      <nav class="footer-left" aria-label="Footer links">
+        <a class="footer-link nav-interactive" [routerLink]="['/contactus']">Contact</a>
+        <a class="footer-link nav-interactive" [routerLink]="['/aboutus']">About</a>
+      </nav>
+
+      <!-- Center: copyright -->
+      <div class="footer-center">
+        Powered by &copy; {{ currentYear }} AnalySim
       </div>
+
+      <!-- Right: connect -->
+      <nav class="footer-right" aria-label="Footer social links">
+        <a class="footer-icon" [routerLink]="['/aboutus']">
+          <img src="../../assets/img/icon-facebook.png" alt="Facebook" />
+        </a>
+        <a class="footer-icon" [routerLink]="['/aboutus']">
+          <img src="../../assets/img/icon-linkedin.png" alt="LinkedIn" />
+        </a>
+        <a class="footer-icon" [routerLink]="['/aboutus']">
+          <img src="../../assets/img/icon-twitter.png" alt="Twitter" />
+        </a>
+      </nav>
     </div>
   </div>
-  <!-- Footer Links End-->
-
-  <!-- Copyright Start -->
-  <div class="footer-copyright p-2"></div>
-  <!-- Copyright End-->
 </footer>
-<!-- Footer End -->
+<!-- Footer End -->

src/Analysim.Web/ClientApp/src/app/footer/footer.component.scss

@@ -1,93 +1,55 @@
 @import "src/assets/styles/abstracts/mixins";
 
-/* Footer component styling */
-.footer-inner {
-  color: var(--text-on-dark);
-
-  /* Inherit footer text color */
-  * {
-    color: inherit;
-  }
+.footer-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+
+  /* reduce “tall footer” feeling */
+  padding: var(--space-3);
+  min-height: 48px;
 }
 
-/* Footer link/content rows */
-.footer-link-row {
-  padding: var(--space-3) 0;
-
-  /* Section titles and about text */
-  .footer-about,
-  .footer-header {
-    margin-bottom: var(--space-3);
-    font-size: var(--fs-16);
-    font-weight: 700;
-    width: fit-content;
-  }
-
-  ul {
-    margin-bottom: 0;
-  }
-
-  li {
-    margin-bottom: var(--space-2);
-  }
-
-  .footer-link {
-    line-height: 1.2;
-  }
-
-  .footer-about {
-    text-align: left;
-  }
-
-  /* Social/icon list */
-  .footer-icons {
-    display: flex;
-    gap: var(--space-2);
-    padding-left: 0;
-  }
-
-  .footer-icon {
-    padding: 0;
-  }
+.footer-left,
+.footer-right {
+  display: flex;
+  align-items: center;
+  font-size: medium;
+}
 
-  /* Keep partner/social logos square */
-  .footer-connect img {
-    @include media-square(32px);
-  }
+.footer-right{
+  gap: var(--space-2)
 }
 
-/* Bottom logo/copyright row */
-.footer-logo-row {
-  .col-md-10 {
-    display: flex;
-    border-top: var(--border-w-1) var(--border-style) var(--hr-on-dark);
-    padding-top: var(--space-3);
+.footer-left {
+  flex-wrap: wrap;
+  gap: var(--space-3)
+}
 
-    .footer-logo {
-      text-align: center;
-      width: 100%;
-      line-height: 1.2;
-      font-size: var(--fs-14);
-      opacity: 0.9;
-    }
-  }
+.footer-center {
+  text-align: center;
+  line-height: 1.2;
+  font-size: var(--fs-14);
+  opacity: 0.9;
+  white-space: nowrap;
+  flex: 1;
+  font-size: medium;
 }
 
-/* Dark shell theme adjustments */
-.bg-shell {
-  --footer-text-soft: rgba(255, 255, 255, 0.85);
+.footer-right img {
+  @include media-square(32px);
+}
 
-  .footer-link,
-  .footer-icon,
-  .footer-about,
-  .footer-header,
-  .footer-logo {
-    color: var(--footer-text-soft);
+/* Mobile */
+@media (max-width: 575.98px) {
+  .footer-bar {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-2);
   }
 
-  .footer-link:hover,
-  .footer-icon:hover,
-  .nav-interactive:hover {
-    color: var(--text-on-dark);
+  .footer-center {
+    white-space: normal;
   }
-}
+}

src/Analysim.Web/ClientApp/src/app/footer/footer.component.ts

@@ -7,6 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FooterComponent implements OnInit {
 
+  currentYear = new Date().getFullYear();
+
   constructor() { }
 
   ngOnInit(): void {

src/Analysim.Web/ClientApp/src/app/home/home.component.html

@@ -1,5 +1,5 @@
 <!-- Header -->
-<header class="header pt-3 mb-2">
+<header class="header pt-3 mb-2 hero-fade hero-fade--right">
   <!-- Container Start -->
   <div class="container-fluid">
     <!-- Row Start -->
@@ -57,7 +57,7 @@ <h3>Browse our projects</h3>
   </div> <!-- Row Services End -->
 
   <!-- Row Organization Start -->
-  <div class="row py-5 my-3 justify-content-center surface-blue">
+  <div class="row py-4 justify-content-center surface-blue surface-fade surface-fade--right">
     <div class="col-md-6">
       <!-- Organizaiton Description -->
       <div class="row justify-content-center">
@@ -109,7 +109,7 @@ <h3>Google Colab</h3>
   </div>
 
   <!-- Row Organization Start -->
-  <div class="row py-5 my-3 justify-content-center surface-blue">
+  <div class="row py-4 justify-content-center surface-blue surface-fade surface-fade--left">
     <div class="col-md-6">
       <!-- Organizaiton Description -->
       <div class="row justify-content-center">
@@ -227,7 +227,7 @@ <h2 class="card-title">Easily share parameter search datasets</h2>
   </div> <!-- Row Dataset Description End -->
 
  <!-- Row Organization Start -->
- <div class="row py-3 my-3 justify-content-center surface-blue">
+ <div class="row py-4 justify-content-center surface-blue surface-fade surface-fade--right">
   <div class="col-md-6">
     <!-- Organizaiton Description -->
     <div class="row justify-content-center">
@@ -246,61 +246,43 @@ <h2 class="text-center">Sponsors</h2>        <!-- <p class="text-center">Organiz
 
 
   <!-- Row Dataset Description1 Start -->
-  <div class="row justify-content-center py-4 my-4 home-sponser">
+  <div class="row justify-content-center py-4 my-4 home-sponsor">
     <div class="col-md-10">
-      <div class="row justify-content-center">
-        <div class="col-xl-5 col-lg-12 sponser-column">
-          <div class="row">
-            <h3 class="hero-sponser">
-              <img src="../../assets/img/icon-gsoc.png"> 
-              <a href="https://summerofcode.withgoogle.com/" target="_blank">Google Summer of Code</a>
-            </h3>
-            </div>
-        </div>
-        <div class="col-xl-2 col-lg-0 sponser-column">
-        </div>
-        <div class="col-xl-5 col-lg-12 sponser-column">
-          <div class="row">
-          <h3 class="hero-sponser">
-            <img src="../../assets/img/icon-incf.png"> 
-            <a href="https://www.incf.org/" target="_blank">International Neuroinformatics Coordinating Facility</a>
-          </h3>
+      <div class="sponsor-grid">
+        <a class="sponsor-card" href="https://summerofcode.withgoogle.com/" target="_blank" rel="noopener">
+          <div class="sponsor-content">
+            <img class="sponsor-card__logo" src="../../assets/img/GSoC-icon.png" alt="Google Summer of Code logo" />
+            <div class="sponsor-card__name">Google Summer of Code</div>
           </div>
-        </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-xl-5 col-lg-12 sponser-column">
-          <div class="row">
-            <h3 class="hero-sponser">
-              <img src="../../assets/img/access.png"> 
-              <a href="https://access-ci.org/" target="_blank">Access</a>
-            </h3>
-            </div>
-        </div>
-        <div class="col-xl-2 col-lg-0 sponser-column">
-        </div>
-        <div class="col-xl-5 col-lg-12 sponser-column">
-          <div class="row">
-          <h3 class="hero-sponser">
-            <img src="../../assets/img/jetstream2-logo.svg"> 
-            <a href="https://jetstream-cloud.org/" target="_blank">Jetstream2</a>
-          </h3>
+        </a>
+
+        <a class="sponsor-card" href="https://www.incf.org/" target="_blank" rel="noopener">
+          <div class="sponsor-content">
+            <img class="sponsor-card__logo" src="../../assets/img/incf-icon.png" alt="INCF logo" />
+            <div class="sponsor-card__name">International Neuroinformatics Coordinating Facility</div>
           </div>
-        </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-xl-5 col-lg-12 sponser-column">
-          <div class="row">
-          <h3 class="hero-sponser">
-            <img src="../../assets/img/nsf-logo.png"> 
-            <a href="https://www.nsf.gov/" target="_blank">National Science Foundation</a>
-          </h3>
+        </a>
+
+        <a class="sponsor-card" href="https://access-ci.org/" target="_blank" rel="noopener">
+          <div class="sponsor-content">
+            <img class="sponsor-card__logo" src="../../assets/img/access.png" alt="Access logo" />
+            <div class="sponsor-card__name">Access</div>
           </div>
-        </div>
-        <div class="col-xl-2 col-lg-0 sponser-column">
-        </div>
-        <div class="col-xl-5 col-lg-12 sponser-column">
-        </div>
+        </a>
+
+        <a class="sponsor-card" href="https://jetstream-cloud.org/" target="_blank" rel="noopener">
+          <div class="sponsor-content">
+            <img class="sponsor-card__logo" src="../../assets/img/jetstream2-logo.svg" alt="Jetstream2 logo" />
+            <div class="sponsor-card__name">Jetstream2</div>
+          </div>
+        </a>
+
+        <a class="sponsor-card" href="https://www.nsf.gov/" target="_blank" rel="noopener">
+          <div class="sponsor-content">
+            <img class="sponsor-card__logo" src="../../assets/img/nsf-logo.png" alt="National Science Foundation logo" />
+            <div class="sponsor-card__name">National Science Foundation</div>
+          </div>
+        </a>
       </div>
     </div>
   </div> <!-- Row Dataset Description End -->