CSR-257 funnel-footer updates.

src/common-components/funnel-footer/funnel-footer.vue

@@ -1,11 +1,31 @@
 <template>
-<div class="container-fluid g-2 mb-6">
-  <div class="row">
-    <div class="col-12">
-      <h4>this should scroll</h4>
+  <div class="container-fluid g-2 footer">
+    <div class="row">
+      <div class="col-12 d-flex justify-content-center pb-2 fs-7">
+        &copy;&nbsp;<span id="years"></span>&nbsp;Safelite Group
+      </div>
+    </div>
+    <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
+      <div class="col d-flex justify-content-center justify-content-around text-center">
+        <textLink
+        footer=true
+        text="Terms of use"
+        href="https://www.safelite.com/terms-of-use"
+        />
+        <textLink
+        footer=true
+        text="Privacy policy"
+        href="https://www.safelite.com/safelite-group-privacy-policy"
+        />
+        <textLink
+        footer=true
+        text="Do not sell my information"
+        href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html"
+        />
+      </div>
     </div>
   </div>
-  <div class="container-fluid fixed-bottom g-4 bg-light py-4">
+  <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
     <div class="row">
       <div class="col">
         <buttonMain
@@ -22,7 +42,6 @@
       </div>
     </div>
   </div>
-</div>
 </template>
 
 <script>
@@ -36,5 +55,27 @@ export default {
     textLink,
     buttonMain
   },
+  data() {
+        return {
+            paddingHeight: 0
+        }
+    },
+    mounted() {
+        this.paddingHeight = document.getElementById("infoBox").offsetHeight
+        this.$nextTick(() => {
+            window.addEventListener('resize', this.onResize);
+        })
+    },
+    beforeUnmount() {
+        window.removeEventListener('resize', this.onResize);
+    },
+    methods: {
+        onResize() {
+            this.paddingHeight = document.getElementById("infoBox").offsetHeight
+        }
+    }
 };
+setTimeout(function(){ // Give it a moment to set the date
+  document.getElementById('years').innerHTML += new Date().getFullYear();
+}, 100);
 </script>

src/ux-components/text-link/text-link.vue

@@ -59,7 +59,7 @@ a {
     transform: translateY(-50%);
   }
   &.footer-link {
-    color: $gray-500;
+    color: $gray-600;
     text-decoration: none;
     border-bottom: 1px solid transparent;
     line-height: 20px;