Merge branch 'main' into 785-fix/403-forbidden-form-submission-in-production

Author: VitalyyP

website/modules/asset/ui/src/scss/_footer.scss

@@ -1,12 +1,112 @@
+.sf-footer {
+  background-color: $white;
+  margin-top: auto;
+  
+  .sf-footer__content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding-bottom: 16px;
+    
+    @include breakpoint-medium {
+      padding-bottom: 24px;
+    }
+  }
+  
+  .sf-footer__top {
+    text-align: center;
+    margin-bottom: 32px;
+    display: block;
+    @include breakpoint-medium {
+      display: block;
+      width: fit-content;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+  
+  .sf-footer__tagline {
+    font-size: $font-size-footer-mobile;
+    font-weight: $font-weight-300;
+    color: $gray-300;
+    margin: 0;
+    line-height: 120%;
+    display: block;
+    
+    &:first-child {
+      display: block;
+    }
+    
+    &:not(:first-child) {
+      display: block;
+      @include breakpoint-medium {
+        display: inline-block;
+      }
+    }
+  }
+  
+  .sf-footer__links {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    font-size: $font-size-footer-mobile;
+    font-weight: $font-weight-300;
+    line-height: 120%;
+    
+    @include breakpoint-medium {
+      flex-direction: row;
+      justify-content: space-between;
+      gap: 32px;
+      text-align: left;
+    }
+  }
+  
+  .sf-footer__links-group {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    
+    @include breakpoint-medium {
+      flex-direction: row;
+      align-items: center;
+      gap: 32px;
+    }
+  }
+  
+  .sf-footer__links-item {
+    font-size: $font-size-footer-mobile;
+    font-weight: $font-weight-normal;
+    color: $gray-500;
+    text-decoration: none;
+    transition: color 0.2s ease;
+    
+    &:hover,
+    &:focus {
+      color: $gray-400;
+      text-decoration: underline;
+    }
+  }
+  
+  .sf-footer__links-item--policy {
+    margin-top: 44px;
+    @include breakpoint-medium {
+      margin-top: 0;
+    }
+  }
+  
+  .sf-footer__bottom {
+    text-align: center;
+    padding-top: 32px;
+  }
+  
+  .sf-copy {
+    margin: 0;
+  }
+}
+
 .sf-copy {
   text-align: center;
   font-weight: $font-weight-medium;
-  font-size: $font-size-body-small;
+  font-size: $font-size-body-medium-mobile;
   line-height: 140%;
-  margin-top: 0;
-  margin-bottom: 10px;
   color: $gray-300;
-  @include breakpoint-medium {
-    margin-bottom: 34px;
-  }
 }

website/modules/asset/ui/src/scss/_variables.scss

@@ -60,6 +60,10 @@ $font-size-body-large-mobile: 22px;
 $font-size-body-medium-mobile: 14px;
 $font-size-body-small-mobile: 12px;
 
+// Footer text sizes
+$font-size-footer: 11px;
+$font-size-footer-mobile: 11px;
+
 // Line heights
 $line-height-h1: 140%;
 $line-height-h2: 100%;

website/views/fragments/fragments.html

@@ -28,8 +28,36 @@
   </div>
 </header>
 {% endfragment %} {% fragment footer() %}
-<footer class="sf-container">
-  <p class="sf-copy">&#169; {{ data.currentYear or '2025' }} S&F</p>
+<footer class="sf-footer sf-container">
+  <div class="sf-footer__content">
+    <div class="sf-footer__top">
+      <p class="sf-footer__tagline">A Deliberately Developmental Organization.</p>
+      <p class="sf-footer__tagline">Built by real people, for real impact.</p>
+      <p class="sf-footer__tagline">Let's grow something meaningful together.</p>
+    </div>
+    
+    <div class="sf-footer__links">
+      <div class="sf-footer__links-group">
+        <a href="https://www.linkedin.com/company/speed-and-function/" 
+           class="sf-footer__links-item" 
+           target="_blank" 
+           rel="noopener noreferrer">
+          linkedin
+        </a>
+        <a href="mailto:connect@speedandfunction.com" 
+           class="sf-footer__links-item">
+          connect@speedandfunction.com
+        </a>
+      </div>
+      <a href="/privacy-policy" class="sf-footer__links-item sf-footer__links-item--policy">
+        privacy policy
+      </a>
+    </div>
+    
+    <div class="sf-footer__bottom">
+      <p class="sf-copy">&#169; {{ data.currentYear or '2025' }} S&amp;F</p>
+    </div>
+  </div>
 </footer>
 {% endfragment %} {% fragment breadcrumbs() %} {% if data.page._url !=
 data.home._url %}