new footer

website/components/footer/index.jsx

@@ -0,0 +1,32 @@
+import Link from 'next/link'
+
+export default function Footer({ openConsentManager }) {
+  return (
+    <footer className="g-footer">
+      <div className="g-container">
+        <div className="left">
+          <Link href="/intro">
+            <a>Intro</a>
+          </Link>
+          <Link href="/guides">
+            <a>Guides</a>
+          </Link>
+          <Link href="/docs">
+            <a>Docs</a>
+          </Link>
+          <Link href="/community">
+            <a>Community</a>
+          </Link>
+          <a href="https://hashicorp.com/privacy">Privacy</a>
+          <Link href="/security">
+            <a>Security</a>
+          </Link>
+          <Link href="/files/press-kit.zip">
+            <a>Press Kit</a>
+          </Link>
+          <a onClick={openConsentManager}>Consent Manager</a>
+        </div>
+      </div>
+    </footer>
+  )
+}

website/components/footer/style.css

@@ -0,0 +1,32 @@
+.g-footer {
+  padding: 25px 0 17px 0;
+  flex-shrink: 0;
+  display: flex;
+
+  & .g-container {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  & a {
+    color: black;
+    opacity: 0.5;
+    transition: opacity 0.25s ease;
+    cursor: pointer;
+    display: inline-block;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  & .left > a {
+    margin-right: 20px;
+    margin-bottom: 8px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}

website/layouts/index.jsx

@@ -0,0 +1,34 @@
+import DocsPage from '@hashicorp/react-docs-page'
+import Head from 'next/head'
+import Link from 'next/link'
+
+function DocsLayoutWrapper(pageMeta) {
+  function DocsLayout(props) {
+    return (
+      <DocsPage
+        {...props}
+        product="packer"
+        head={{
+          is: Head,
+          title: `${pageMeta.page_title} | Packer by HashiCorp`,
+          description: pageMeta.description,
+          siteName: 'Packer by HashiCorp',
+        }}
+        sidenav={{
+          Link,
+          category: 'docs',
+          currentPage: props.path,
+          data: [],
+          order: [],
+        }}
+        resourceURL={`https://github.com/hashicorp/packer/blob/master/website/pages/${pageMeta.__resourcePath}`}
+      />
+    )
+  }
+
+  DocsLayout.getInitialProps = ({ asPath }) => ({ path: asPath })
+
+  return DocsLayout
+}
+
+export default DocsLayoutWrapper

website/pages/_app.js

@@ -4,7 +4,7 @@ import NProgress from 'nprogress'
 import Router from 'next/router'
 import ProductSubnav from '../components/subnav'
 import MegaNav from '@hashicorp/react-mega-nav'
-import Footer from '@hashicorp/react-footer'
+import Footer from '../components/footer'
 import { ConsentManager, open } from '@hashicorp/react-consent-manager'
 import consentManagerConfig from '../lib/consent-manager-config'
 import bugsnagClient from '../lib/bugsnag'
@@ -14,7 +14,7 @@ import HashiHead from '@hashicorp/react-head'
 
 Router.events.on('routeChangeStart', NProgress.start)
 Router.events.on('routeChangeError', NProgress.done)
-Router.events.on('routeChangeComplete', url => {
+Router.events.on('routeChangeComplete', (url) => {
   setTimeout(() => window.analytics.page(url), 0)
   NProgress.done()
 })
@@ -55,8 +55,8 @@ class NextApp extends App {
             { href: '/css/nprogress.css' },
             {
               href:
-                'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap'
-            }
+                'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap',
+            },
           ]}
           icon={[{ href: '/favicon.ico' }]}
           preload={[
@@ -69,12 +69,14 @@ class NextApp extends App {
             { href: '/fonts/metro-sans/regular.woff2', as: 'font' },
             { href: '/fonts/metro-sans/semi-bold.woff2', as: 'font' },
             { href: '/fonts/metro-sans/bold.woff2', as: 'font' },
-            { href: '/fonts/dejavu/mono.woff2', as: 'font' }
+            { href: '/fonts/dejavu/mono.woff2', as: 'font' },
           ]}
         />
         <MegaNav product="Packer" />
         <ProductSubnav />
-        <Component {...pageProps} />
+        <div className="content">
+          <Component {...pageProps} />
+        </div>
         <Footer openConsentManager={open} />
         <ConsentManager {...consentManagerConfig} />
       </ErrorBoundary>

website/pages/home/style.css

@@ -48,7 +48,7 @@
 
     & .code-block,
     & .text {
-      width: calc(50% - 50px);
+      width: calc(50%);
 
       @media (max-width: 1000px) {
         width: 100%;
@@ -117,7 +117,7 @@
 
     & .logos,
     & .text {
-      width: calc(50% - 50px);
+      width: calc(50%);
 
       @media (max-width: 1000px) {
         width: 100%;

website/pages/security/index.mdx

@@ -1,4 +1,5 @@
 ---
+layout: index
 page_title: Security
 description: |-
   Packer takes security very seriously. Please responsibly disclose any

website/pages/style.css

@@ -13,7 +13,6 @@
 @import '~@hashicorp/react-newsletter-signup-form/dist/style.css';
 @import '~@hashicorp/react-text-input/dist/style.css';
 @import '~@hashicorp/react-button/dist/style.css';
-@import '~@hashicorp/react-footer/dist/style.css';
 @import '~@hashicorp/react-consent-manager/dist/style.css';
 @import '~@hashicorp/react-checkbox-input/dist/style.css';
 @import '~@hashicorp/react-hero/dist/style.css';
@@ -33,6 +32,7 @@
 @import '~@hashicorp/react-docs-page/style.css';
 
 /* Local Components */
+@import '../components/footer/style.css';
 
 /* Local Pages */
 @import './home/style.css';
@@ -42,6 +42,11 @@
 /* Print Styles */
 @import './print.css';
 
+/* Sticky Footer */
+.content {
+  min-height: calc(100vh - 260px);
+}
+
 /*
  * About this selector:
  * `.g-subnav ~ *` finds all elements after the navigation.