[604] Refactor footer to use dynamic CMS content

website/modules/@apostrophecms/global/index.js

@@ -72,8 +72,8 @@ module.exports = {
           },
         },
       },
-      comAddress: {
-        label: 'Company Address',
+      companyMission: {
+        label: 'Company Mission',
         type: 'area',
         options: {
           max: 1,
@@ -84,19 +84,6 @@ module.exports = {
           },
         },
       },
-      footerLinks: {
-        label: 'Footer Links',
-        type: 'array',
-        titleField: 'footerLink.linkTitle',
-        fields: {
-          add: {
-            footerLink: {
-              label: 'Link',
-              ...linkSchema,
-            },
-          },
-        },
-      },
       socialMediaLinks: {
         label: 'Social Media Links',
         type: 'array',
@@ -110,16 +97,20 @@ module.exports = {
           },
         },
       },
-      footerForm: {
-        label: 'Footer Form',
-        type: 'area',
-        options: {
-          max: 1,
-          widgets: {
-            '@apostrophecms/form': {},
+      footerLinks: {
+        label: 'Footer Links',
+        type: 'array',
+        titleField: 'footerLink.linkTitle',
+        fields: {
+          add: {
+            footerLink: {
+              label: 'Link',
+              ...linkSchema,
+            },
           },
         },
       },
+
       // SEO fields
       seoGoogleTagManager: {
         label: 'Google Tag Manager ID',
@@ -134,7 +125,7 @@ module.exports = {
       },
       footer: {
         label: 'Footer',
-        fields: ['comAddress', 'footerLinks', 'socialMediaLinks', 'footerForm'],
+        fields: ['companyMission', 'footerLinks', 'socialMediaLinks'],
       },
       seo: {
         label: 'SEO & Analytics',

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

@@ -1,18 +1,18 @@
 .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 {
+
+  .sf-footer__mission {
     text-align: center;
     margin-bottom: 32px;
     display: block;
@@ -22,82 +22,85 @@
       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) {
+
+    p {
+      font-size: $font-size-footer-mobile;
+      font-weight: $font-weight-300;
+      color: $gray-300;
+      margin: 0;
+      line-height: 120%;
       display: block;
-      @include breakpoint-medium {
-        display: inline-block;
+      margin-right: 4px;
+      text-wrap: balance;
+
+      &: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%;
-
+    gap: 44px;
+
     @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;
   }

website/views/fragments/fragments.html

@@ -30,40 +30,44 @@
 {% endfragment %} {% fragment footer() %}
 <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>
+
+    {% if data.global.companyMission and data.global.companyMission.items and data.global.companyMission.items.length > 0 %}
+    <div class="sf-footer__mission">
+      <div class="sf-footer__mission-content">
+        {% area data.global, 'companyMission' %}
+      </div>
     </div>
+    {% endif %}
 
     <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
+      {% if data.global.socialMediaLinks and data.global.socialMediaLinks.length > 0 %}
+        <div class="sf-footer__links-group">
+          {% for item in data.global.socialMediaLinks %}
+          <a
+            href="{% if item.SMLink.linkType == 'page' and item.SMLink._page %}{{ item.SMLink._page._url }}{% else %}{{ item.SMLink.customUrl }}{% endif %}"
+            class="sf-footer__links-item"
+            {% if item.SMLink.target and item.SMLink.target.includes('_blank') %}target="_blank" rel="noopener noreferrer"{% endif %}
+          >
+          {{ item.SMLink.linkTitle }}
         </a>
+        {% endfor %}
+    </div>
+    {% endif %}
+
+    {% if data.global.footerLinks and data.global.footerLinks.length > 0 %}
+      <div class="sf-footer__links-group">
+        {% for item in data.global.footerLinks %}
         <a
-          href="mailto:connect@speedandfunction.com"
+          href="{% if item.footerLink.linkType == 'page' and item.footerLink._page %}{{ item.footerLink._page._url }}{% else %}{{ item.footerLink.customUrl }}{% endif %}"
           class="sf-footer__links-item"
+          {% if item.footerLink.target and item.footerLink.target.includes('_blank') %}target="_blank" rel="noopener noreferrer"{% endif %}
         >
-          connect@speedandfunction.com
+          {{ item.footerLink.linkTitle }}
         </a>
+        {% endfor %}
       </div>
-      <a
-        href="/privacy-policy"
-        class="sf-footer__links-item sf-footer__links-item--policy"
-      >
-        privacy policy
-      </a>
-    </div>
+    {% endif %}
+  </div>
 
     <div class="sf-footer__bottom">
       <p class="sf-copy">&#169; {{ data.currentYear or '2025' }} S&amp;F</p>