Why jambonz facts -- styles/pages

data/why.yml

@@ -2,4 +2,37 @@ hero:
   headline: Why choose jambonz?
   subtext: jambonz is the communications platform that brings your ideas to life. So you can bring your best to your customers every day.
   cta: Get started for free
+  url: https://jambonz.us
+facts:
+  -
+    icon: Layers
+    title: Leverage your existing architecture
+    text: You've already built value with your current architecture. We make it easy through our self- service portal to plug in your chosen carriers and speech APIs from Google or AWS.
+  -
+    icon: UserCheck
+    title: Pay only for what you need
+    text: We don't sell minutes, and we don’t try to make money by selling you AWS and Google speech services at heavily marked-up prices. Our hosted service charges are based on a simple capacity-based processing model. Or download and install the open source on your own infrastructure for free.
+  -
+    icon: Lock
+    title: Limit your customer’s data exposure
+    text: jambonz minimizes the storage of sensitive customer information. Unlike other CPaaS vendors, jambonz never stores artifacts like voicemail recordings and transcriptions that can contain credit card information, health record information and other sensitive information about your customers.
+  -
+    icon: ThumbsUp
+    title: We love driving your success
+    text: We're here to help. Whether it’s providing excellent customer service for our hosted platform, helping you set up your own platform on the open source, or working with you to add new capabilities to the paltform, we measure our success by helping you win.
+os:
+  headline: Oh, and we mean completely open source.
+  subtext: All of the jambonz core software and drachtio is available on github under the MIT License.
+  buttons:
+    -
+      icon: GitHub
+      text: github.com/jambonz
+      url: https://github.com/jambonz
+    -
+      icon: GitHub
+      text: github.com/drachtio
+      url: https://github.com/drachtio
+  logo: /svg/drachtio.svg
+  icon: Heart
+  cta: Get started for free
   url: https://jambonz.us

pages/why.js

@@ -1,11 +1,33 @@
 import Layout from '../components/layout';
-import { Hero } from '../components/jambonz-ui';
+import { Hero, Icon, H5, P } from '../components/jambonz-ui';
 import { getData } from '../lib/data';
+import { nanoid } from 'nanoid';
+
+function Facts({data}) {
+  return (
+    <div className="bg-pink facts">
+      <div className="wrap facts__wrap">
+        {data.map((fact) => {
+          return (
+            <div key={nanoid()} className="facts__item">
+              <Icon name={fact.icon} style="fill" />
+              <div className="facts__text">
+                <H5><strong>{fact.title}</strong></H5>
+                <P>{fact.text}</P>
+              </div>
+            </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} />
     </Layout>
   );
 }

styles/_typography.scss

@@ -198,9 +198,10 @@ em {
     font-size: $m-size;
   }
 
-  @media (max-width: $width-mobile) {
-    font-size: $ms-size;
-  }
+  // @note: Consideration on stopping type reduction here
+  // @media (max-width: $width-mobile) {
+  //   font-size: $ms-size;
+  // }
 }
 
 .p {
@@ -211,9 +212,10 @@ em {
     font-size: $m-size;
   }
 
-  @media (max-width: $width-tablet-2) {
-    font-size: $ms-size;
-  }
+  // @note: Consideration on stopping type reduction here
+  // @media (max-width: $width-tablet-2) {
+  //   font-size: $ms-size;
+  // }
 }
 
 .m {
@@ -229,9 +231,10 @@ em {
   font-size: $ms-size;
   line-height: 2;
 
-  @media (max-width: $width-tablet-1) {
-    font-size: $mxs-size;
-  }
+  // @note: Consideration on stopping type reduction here
+  // @media (max-width: $width-tablet-1) {
+  //   font-size: $mxs-size;
+  // }
 }
 
 .mxs {

styles/global.scss

@@ -44,14 +44,11 @@
 @import 'footer.scss';
 
 /******************************************************************************
- * Homepage
+ * Pages
 *******************************************************************************/
-@import 'homepage.scss';
-
-/******************************************************************************
- * Jambonz UI
-*******************************************************************************/
-@import 'jambonz-ui.scss';
+@import 'pages/home.scss';
+@import 'pages/why.scss';
+@import 'pages/jambonz-ui.scss';
 
 /******************************************************************************
  * Nextra

styles/pages/_why.scss

@@ -0,0 +1,76 @@
+/******************************************************************************
+ * Jambonz Facts
+*******************************************************************************/
+.facts {
+  padding-top: 96px;
+  padding-bottom: 32px;
+
+  @media (max-width: $width-tablet-1) {
+    padding-top: 64px;
+    padding-bottom: 0;
+  }
+
+  .icon {
+    transform: translateY(-4px);
+
+    @media (max-width: $width-tablet-1) {
+      transform: translateY(-8px);
+    }
+
+    @media (max-width: $width-tablet-2) {
+      transform: translateY(-10px);
+    }
+
+    @media (max-width: $width-mobile) {
+      transform: none;
+    }
+  }
+
+  &__wrap {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  &__item {
+    width: 100%;
+    max-width: 50%;
+    display: flex;
+    align-items: flex-start;
+    padding-bottom: 64px;
+
+    @media (max-width: $width-tablet-2) {
+      max-width: 100%;
+    }
+
+    @media (max-width: $width-mobile) {
+      flex-wrap: wrap;
+      text-align: center;
+      justify-content: center;
+    }
+  }
+
+  &__text {
+    width: calc(100% - #{$icon-size-1});
+    padding-left: 16px;
+    padding-right: 64px;
+
+    > div + div {
+      margin-top: 16px;
+    }
+
+    @media (max-width: $width-tablet-1) {
+      padding-right: 32px;
+    }
+
+    @media (max-width: $width-tablet-2) {
+      padding-right: 0;
+    }
+
+    @media (max-width: $width-mobile) {
+      width: 100%;
+      padding: 0 16px;
+      margin-top: 16px;
+    }
+  }
+}