Pricing page touts

data/pricing.yml

@@ -2,4 +2,17 @@ hero:
   headline: Simple, capacity-based pricing.
   subtext:
     - There are no per-minute charges.
-    - "You choose the application processing capacity that you need and pay a monthly fee based on:"
+    - "You choose the application processing capacity that you need and pay a monthly fee based on:"
+touts:
+  -
+    icon: PhoneCall
+    color: purple
+    text: The number of simultaneous call sessions that you want to be able to support.
+  -
+    icon: Phone
+    color: teal
+    text: The number of SIP devices you want to be online/registered.
+  -
+    icon: Activity
+    color: blue
+    text: The rate at which you want to be able to send API requests to our servers.

pages/pricing.js

@@ -1,11 +1,30 @@
 import Layout from '../components/layout';
-import { Hero } from '../components/jambonz-ui';
+import { Hero, Icon, P } from '../components/jambonz-ui';
 import { getData } from '../lib/data';
+import { nanoid } from 'nanoid';
+
+function Touts({data}) {
+  return (
+    <div className="bg-pink touts">
+      <div className="wrap touts__wrap">
+        {data.map((tout) => {
+          return (
+            <div key={nanoid()} className="touts__item">
+              <Icon name={tout.icon} style="fill" subStyle={tout.color} />
+              <P>{tout.text}</P>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
 
 export default function Pricing({ data }) {
   return (
     <Layout siteData={data.site}>
       <Hero data={data.pricing.hero} subStyle="pricing" />
+      <Touts data={data.pricing.touts} />
     </Layout>
   );
 }

styles/_layout.scss

@@ -61,6 +61,8 @@
     }
 
     .hero__subtext {
+      margin-bottom: 0;
+
       > div {
         max-width: 820px;
       }

styles/global.scss

@@ -48,6 +48,7 @@
 *******************************************************************************/
 @import 'pages/home.scss';
 @import 'pages/why.scss';
+@import 'pages/pricing.scss';
 @import 'pages/jambonz-ui.scss';
 
 /******************************************************************************

styles/pages/_pricing.scss

@@ -0,0 +1,51 @@
+/******************************************************************************
+ * Hero Touts
+*******************************************************************************/
+.touts {
+  padding-bottom: 96px;
+  text-align: center;
+
+  @media (max-width: $width-tablet-1) {
+    padding-bottom: 64px;
+  }
+
+  &__wrap {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+
+    @media (max-width: $width-tablet-2) {
+      flex-wrap: wrap;
+      max-width: 320px;
+      margin: 0 auto;
+    }
+  }
+
+  &__item {
+    max-width: 300px;
+    margin: 0 40px;
+
+    @media (max-width: $width-tablet-1) {
+      margin: 0 32px;
+    }
+
+    & + .touts__item {
+      @media (max-width: $width-tablet-2) {
+        margin-top: 64px;
+      }
+
+      @media (max-width: $width-mobile) {
+        margin-top: 32px;
+      }
+    }
+
+    @media (max-width: $width-tablet-2) {
+      margin: 0;
+      max-width: 100%;
+    }
+
+    .icon {
+      margin-bottom: 16px;
+    }
+  }
+}