From a70bbb6a177100fa0114a22326c70bb63031dadc Mon Sep 17 00:00:00 2001
From: kitajchuk <bk@kitajchuk.com>
Date: Thu, 1 Apr 2021 10:25:31 -0700
Subject: [PATCH] Footer

---
 components/footer.js | 37 ++++++++++++++++++++++++++++++++-
 styles/_footer.scss  | 49 ++++++++++++++++++++++++++++++++++++++++++++
 styles/global.scss   |  5 +++++
 3 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 styles/_footer.scss

diff --git a/components/footer.js b/components/footer.js
index 1eae557..ba00133 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,5 +1,40 @@
+import Link from 'next/link';
+import { Button } from './jambonz-ui';
+import { homeObj } from '../lib/vars';
+
+function FooterItem({ obj }) {
+  return (
+    <li>
+      <Link href={obj.link}>
+        <a target={obj.open ? '_blank' : null} className="foot__link">
+          {obj.label}
+        </a>
+      </Link>
+    </li>
+  );
+}
+
 export default function Footer({ siteData }) {
   return (
-    <footer className="foot"></footer>
+    <footer className="bg-jambonz foot">
+      <div className="wrap foot__wrap">
+        <div className="foot__navs">
+          <ul className="foot__links">
+            {siteData.footer.links.map((obj) => {
+              return <FooterItem key={obj.id} obj={obj} />
+            })}
+          </ul>
+          <ul className="foot__links">
+            <FooterItem key="home" obj={homeObj} />
+            {siteData.navi.links.map((obj) => {
+              return <FooterItem key={obj.id} obj={obj} />
+            })}
+          </ul>
+        </div>
+        <div className="foot__support">
+          <Button href={`mailto:${siteData.footer.email}`} target="_blank" subStyle="light">{siteData.footer.email}</Button>
+        </div>
+      </div>
+    </footer>
   );
 }
\ No newline at end of file
diff --git a/styles/_footer.scss b/styles/_footer.scss
new file mode 100644
index 0000000..363f742
--- /dev/null
+++ b/styles/_footer.scss
@@ -0,0 +1,49 @@
+.foot {
+  padding: 96px 0;
+
+  &__navs {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  &__links {
+    margin: 0 64px;
+
+    li {
+      margin-bottom: 16px;
+    }
+
+    @media (max-width: $width-mobile) {
+      margin: 0;
+      width: 100%;
+    }
+  }
+
+  &__links:first-child {
+    text-align: right;
+
+    @media (max-width: $width-mobile) {
+      text-align: center;
+    }
+  }
+
+  &__links:last-child {
+    text-align: left;
+
+    @media (max-width: $width-mobile) {
+      text-align: center;
+      margin-top: 32px;
+    }
+  }
+
+  &__link {
+    color: $white;
+    text-decoration: none;
+  }
+
+  &__support {
+    text-align: center;
+    padding-top: 96px;
+  }
+}
\ No newline at end of file
diff --git a/styles/global.scss b/styles/global.scss
index 41d8d4d..953dd08 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -38,6 +38,11 @@
 *******************************************************************************/
 @import 'navi.scss';
 
+/******************************************************************************
+ * Footer
+*******************************************************************************/
+@import 'footer.scss';
+
 /******************************************************************************
  * Kit of Parts
 *******************************************************************************/