Extra CTA on Pricing page -- refactor CTA mixin for SASS

data/pricing.yml

@@ -16,6 +16,7 @@ touts:
     icon: Activity
     color: blue
     text: The rate at which you want to be able to send API requests to our servers.
+structure:
   tiers:
     -
       title: Registered Devices
@@ -57,6 +58,10 @@ tiers:
           - 31-60/min
           - 61-120/min
           - 121-300/min
+  text: Have special pricing needs or large volumes?
+  cta: Contact us
+  icon: Send
+  url: mailto:support@jambonz.org
 additional:
   headline: Additional Services
   services:

pages/pricing.js

@@ -1,7 +1,7 @@
 import { nanoid } from 'nanoid';
 
 import Layout from '../components/layout';
-import { Hero, Icon, Button, H2, H5, P, M, MS } from '../components/jambonz-ui';
+import { Hero, Icon, Button, H2, H5, H6, P, M, MS } from '../components/jambonz-ui';
 import { getData } from '../lib/data';
 
 function Touts({data}) {
@@ -25,7 +25,7 @@ function Tiers({ data }) {
   return (
     <section className="tiers pad">
       <div className="wrap tiers__wrap">
-        {data.map((tier) => {
+        {data.tiers.map((tier) => {
           return (
             <div key={nanoid()} className="tiers__item">
               <H5><strong className={`color--${tier.color}`}>{tier.title}</strong></H5>
@@ -52,6 +52,13 @@ function Tiers({ data }) {
           );
         })}
       </div>
+      <div className="tiers__cta">
+        <P>{data.text}</P>
+        <Button href={`${data.url}?subject=Additional Services Support`} target="_blank" style="pill" subStyle="jambonz">
+          <Icon name={data.icon} />
+          <span>{data.cta}</span>
+        </Button>
+      </div>
     </section>
   );
 }
@@ -94,7 +101,7 @@ export default function Pricing({ data }) {
     <Layout siteData={data.site}>
       <Hero data={data.pricing.hero} subStyle="pricing" />
       <Touts data={data.pricing.touts} />
-      <Tiers data={data.pricing.tiers} />
+      <Tiers data={data.pricing.structure} />
       <Services data={data.pricing.additional} />
     </Layout>
   );

styles/_mixins.scss

@@ -26,3 +26,11 @@
     font-size: $m-size;
   }
 }
+
+@mixin cta() {
+  margin-top: 96px;
+
+  @media (max-width: $width-tablet-1) {
+    margin-top: 64px;
+  }
+}

styles/pages/_home.scss

@@ -213,10 +213,6 @@
   }
 
   &__cta {
-    margin-top: 96px;
-
-    @media (max-width: $width-tablet-1) {
-      margin-top: 64px;
-    }
+    @include cta();
   }
 }

styles/pages/_pricing.scss

@@ -73,6 +73,14 @@
   &__table {
     margin-top: 32px;
   }
+
+  &__cta {
+    @include cta();
+
+    > :first-child {
+      margin-bottom: 32px;
+    }
+  }
 }
 
 /******************************************************************************
@@ -123,10 +131,6 @@
   }
 
   &__cta {
-    margin-top: 96px;
-
-    @media (max-width: $width-tablet-1) {
-      margin-top: 64px;
-    }
+    @include cta();
   }
 }

styles/pages/_why.scss

@@ -126,10 +126,6 @@
   }
 
   &__cta {
-    margin-top: 96px;
-
-    @media (max-width: $width-tablet-1) {
-      margin-top: 64px;
-    }
+    @include cta();
   }
 }