Add SEO Footer to Help Dot

docs/_includes/footer.html

@@ -0,0 +1,121 @@
+<div class="page-footer">
+    <div class="page-footer__wrapper">
+        <div class="columns">
+            <div class="column">
+                <h3>Features</h3>
+                <ul>
+                    <li>
+                        <a href="https://use.expensify.com/expense-management" alt="Expense Management" target="_blank">Expense Management</a>
+                    </li>
+                    <li>
+                        <a href="https://use.expensify.com/spend-management" alt="Spend Management" target="_blank">Spend Management</a>
+                    </li>
+                    <li>
+                        <a href="https://use.expensify.com/expense-reports" alt="Expense Reports" target="_blank">Expense Reports</a>
+                    </li>
+                    <li>
+                        <a href="https://use.expensify.com/company-credit-card" alt="Company Credit Card" target="_blank">Company Credit Card</a>
+                    </li>
+                    <li>
+                        <a href="https://use.expensify.com/receipt-scanning-app" alt="Receipt Scanning App" target="_blank">Receipt Scanning App</a>
+                    </li>
+                    <li>
+                        <a href="https://use.expensify.com/bills" alt="Bill Pay" target="_blank">Bill Pay</a>
+                    </li>
+                    <li>
+                        <a href="https://use.expensify.com/invoices" alt="Invoicing" target="_blank">Invoicing</a>
+                    </li>
+                    <li>
+                        <a href="https://use.expensify.com/cpa-card" alt="CPA Card" target="_blank">CPA Card</a>
+                    </li>
+                    <li>
+                        <a href="https://use.expensify.com/payroll" alt="Payroll" target="_blank">Payroll</a>
+                    </li>
+                    <li>
+                        <a href="https://use.expensify.com/travel" alt="Travel" target="_blank">Travel</a>
+                    </li>
+                </ul>
+            </div>
+            <div class="column">
+                <h3>Resources</h3>
+                <ul>
+                    <li>
+                        <a href="https://use.expensify.com/accountants" alt="ExpensifyApproved!" target="_blank">ExpensifyApproved!</a>
+                    </li>
+
+                    <li>
+                        <a href="https://use.expensify.com/press-kit" alt="Press Kit" target="_blank">Press Kit</a>
+                    </li>
+                    <li>
+                        <a href="https://use.expensify.com/support" alt="Support" target="_blank">Support</a>
+                    </li>
+                    <li>
+                        <a href="https://help.expensify.com/" alt="ExpensifyHelp" target="_blank">ExpensifyHelp</a>
+                    </li>
+                    <li>
+                        <a href="https://community.expensify.com/" alt="Community" target="_blank">Community</a>
+                    </li>
+                    <li>
+                        <a href="https://use.expensify.com/privacy" alt="Privacy" target="_blank">Privacy</a>
+                    </li>
+                </ul>
+            </div>
+            <div class="column">
+                <h3>Learn more</h3>
+                <ul>
+                    <li>
+                        <a href="https://we.are.expensify.com/how-we-got-here" alt="About Expensify" target="_blank">About Expensify</a>
+                    </li>
+                    <li>
+                        <a href="https://blog.expensify.com/" alt="Blog" target="_blank">Blog</a>
+                    </li>
+                    <li>
+                        <a href="https://we.are.expensify.com/" alt="Jobs" target="_blank">Jobs</a>
+                    </li>
+                    <li>
+                        <a href="https://www.expensify.org" alt="Expensify.org" target="_blank">Expensify.org</a>
+                    </li>
+                    <li>
+                        <a href="https://ir.expensify.com" alt="Investor Relations" target="_blank">Investor Relations</a>
+                    </li>
+                </ul>
+
+                <div class="page-footer__social-icons">
+                    <a href="https://we.are.expensify.com/podcast" class="social-media-link expensicons expensicons-podcast">
+                        <img src="/assets/images/social-podcast.svg" alt="Podcast" width="24" height="24">
+                    </a>
+                    <a href="https://www.twitter.com/expensify" class="social-media-link expensicons expensicons-twitter" target="_blank" rel="noreferer noopener">
+                        <img src="/assets/images/social-twitter.svg" alt="Twitter" width="24" height="24">
+                    </a>
+                    <a href="http://www.instagram.com/expensify" class="social-media-link expensicons expensicons-instagram" target="_blank" rel="noreferer noopener">
+                        <img src="/assets/images/social-instagram.svg" alt="Instagram" width="24" height="24">
+                    </a>
+                    <a href="https://www.facebook.com/expensify" class="social-media-link expensicons expensicons-facebook" target="_blank" rel="noreferer noopener">
+                        <img src="/assets/images/social-facebook.svg" alt="Twitter" width="24" height="24">
+                    </a>
+                    <a href="http://www.linkedin.com/company/expensify" class="social-media-link expensicons expensicons-linkedin" target="_blank" rel="noreferer noopener">
+                        <img src="/assets/images/social-linkedin.svg" alt="LinkedIn" width="24" height="24">
+                    </a>
+                </div>
+            </div>
+            <div class="column">
+                <h3>Get Started</h3>
+                <ul>
+                    <li>
+                        <a href="https://www.expensify.com" alt="Create a new account" target="_blank">Create a new account</a>
+                    </li>
+
+                    <li>
+                        <a href="https://www.expensify.com" alt="Log in" target="_blank">Log in</a>
+                    </li>
+                </ul>
+
+                <p class="page-footer__fine-print">&copy;2008-<script type="text/javascript">document.write(new Date().getFullYear());</script> Expensify, Inc.</p>
+            </div>
+        </div>
+
+        <div class="page-footer__logo">
+            <img src="/assets/images/expensify-footer-logo.svg" alt="Expensify" />
+        </div>
+    </div>
+</div>

docs/_layouts/default.html

@@ -73,6 +73,10 @@ <h3 class="title with-margin">Didn't find what you were looking for?</h3>
                 <button class="success">Send a message</button>
             </div>
         </a>
+
+        <div id="footer">
+            {% include footer.html %}
+        </div>
     </div>
 </body>
 </html>

docs/_sass/_main.scss

@@ -289,7 +289,7 @@ button {
     background-color: $color-super-dark-green;
     min-height: 100vh;
     margin-left: 0;
-    padding: 80px 24px 24px 24px;
+    padding: 80px 24px 0px 24px;
 
     @include breakpoint($breakpoint-tablet) {
         margin-left: 320px;
@@ -298,15 +298,15 @@ button {
     @include breakpoint($breakpoint-desktop) {
         /* Same as the width of the lhn */
         margin-left: 420px;
-        padding: 52px 68px;
+        padding: 52px 68px 0 68px;
         box-sizing: border-box;
     }
 
     @include breakpoint($breakpoint-wide) {
         margin-left: 420px;
         /* On wide screens, the padding needs to be equal to
         the view width, minus the content size, minus the lhn size, divided by two. */
-        padding: 52px calc((100vw - 1000px - 420px)/2);
+        padding: 52px calc((100vw - 1000px - 420px)/2) 0 calc((100vw - 1000px - 420px)/2);
     }
 
     ul,
@@ -598,3 +598,103 @@ button {
         overflow: hidden;
     }
 }
+
+.page-footer {
+    font-size: 15px;
+
+    @include maxBreakpoint($breakpoint-desktop) {
+        background: url('/assets/images/expensify-footer-logo--vertical.svg') no-repeat right 120px;
+        background-size: 111px 618px;
+        margin-right: -25px;
+    }
+
+    h3 {
+        color: $color-green;
+        font-size: 17px;
+        font-weight: 700;
+        margin-bottom: 16px;
+    }
+
+    ul {
+        margin: 0px !important;
+        padding: 0;
+
+        li {
+            list-style-type: none !important;
+            margin: 0 0 8px;
+
+            a {
+                color: $color-white;
+                display: block;
+                padding: 4px 0;
+                word-break: break-word;
+
+                &:hover {
+                    color: $color-green;
+                }
+            }
+        }
+    }
+
+    &__social-icons {
+        padding-bottom: 20px;
+
+        a {
+            color: $color-white;
+            display: inline-block;
+
+            &:hover {
+                color: $color-green;
+            }
+        }
+    }
+
+    &__fine-print {
+        color: $color-gray-green;
+        font-size: 10px;
+
+        a {
+            color: $color-link;
+        }
+    }
+
+    // Big logo at the bottom
+    &__logo {
+        margin-top: 40px;
+
+        img {
+            display: block;
+        }
+
+        @include maxBreakpoint($breakpoint-desktop) {
+            display: none;
+        }
+    }
+
+    &__wrapper {
+        margin: 0 auto;
+        max-width: 1000px;
+        padding: 64px 0 0;
+
+        @include maxBreakpoint($breakpoint-tablet) {
+            padding: 64px 0px 20px;
+        }
+    }
+
+    .columns {
+        @include breakpoint($breakpoint-desktop) {
+            display: flex;
+            margin-left: (-1 * 16px);
+            margin-right: (-1 * 16px);
+        }
+    }
+
+    .column {
+        margin-bottom: 40px;
+
+        @include breakpoint($breakpoint-desktop) {
+            padding: 16px;
+            width: 25%;
+        }
+    }
+}