Why jambonz static page

pages/why.js

@@ -1,5 +1,5 @@
 import Layout from '../components/layout';
-import { Hero, Icon, H5, P } from '../components/jambonz-ui';
+import { Hero, Icon, Button, H5, H2, P } from '../components/jambonz-ui';
 import { getData } from '../lib/data';
 import { nanoid } from 'nanoid';
 
@@ -23,11 +23,44 @@ function Facts({data}) {
   );
 }
 
+function OS({data}) {
+  return (
+    <div className="os pad">
+      <div className="wrap os__wrap">
+        <div className="os__headline">
+          <H2>{data.headline}</H2>
+        </div>
+        <div className="os__subtext">
+          <H5>{data.subtext}</H5>
+        </div>
+        <div className="btns os__btns">
+          {data.buttons.map((button) => {
+            return (
+              <Button key={nanoid()} href={button.url} target="_blank" style="pill">
+                <Icon name={button.icon} />
+                <span>{button.text}</span>
+              </Button>
+            );
+          })}
+        </div>
+        <div className="os__logo">
+          <img src={data.logo} />
+          <Icon name={data.icon} style="pill" />
+        </div>
+        <div className="os__cta">
+          <Button href={data.url} subStyle="dark" target="_blank">{data.cta}</Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function Why({ data }) {
   return (
     <Layout siteData={data.site}>
       <Hero data={data.why.hero} subStyle="why" />
       <Facts data={data.why.facts} />
+      <OS data={data.why.os} />
     </Layout>
   );
 }

styles/_buttons.scss

@@ -107,8 +107,25 @@
 
 .btns {
   margin: 0 -2.2222222222vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @media (max-width: $width-mobile) {
+    flex-direction: column;
+  }
 
   .btn {
     margin: 0 2.2222222222vw;
+
+    & + .btn {
+      @media (max-width: $width-mobile) {
+        margin-top: 16px;
+      }
+    }
+
+    @media (max-width: $width-mobile) {
+      margin: 0;
+    }
   }
 }

styles/pages/_why.scss

@@ -73,4 +73,51 @@
       margin-top: 16px;
     }
   }
+}
+
+/******************************************************************************
+ * Open Source
+*******************************************************************************/
+.os {
+  text-align: center;
+
+  &__subtext {
+    margin-top: 16px;
+
+    > div {
+      max-width: 735px;
+      margin: 0 auto;
+    }
+  }
+
+  &__btns {
+    padding: 64px 0;
+
+    @media (max-width: $width-tablet-1) {
+      padding: 48px 0;
+    }
+  }
+
+  &__logo {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    img {
+      width: 200px;
+      margin-bottom: 32px;
+
+      @media (max-width: $width-mobile) {
+        width: 160px;
+      }
+    }
+  }
+
+  &__cta {
+    margin-top: 96px;
+
+    @media (max-width: $width-tablet-1) {
+      margin-top: 64px;
+    }
+  }
 }