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

data/pricing.yml

@@ -16,47 +16,52 @@ touts:
     icon: Activity
     color: blue
     text: The rate at which you want to be able to send API requests to our servers.
-tiers:
-  -
-    title: Registered Devices
-    text: simple, flat $1 per registered device (per month)
-    color: teal
-  -
-    title: Simultaneous Call Sessions
-    text: cost per session for simultaneous call sessions
-    color: purple
-    table:
-      head:
-        - $10/session
-        - $9/session
-        - $8/session
-        - $7/session
-        - $6/session
-        - $5/session
-      body:
-        - 1-20 sessions
-        - 21-50 sessions
-        - 51-100 sessions
-        - 101-250 sessions
-        - 251-500 sessions
-        - 500+ sessions
-  -
-    title: API Rate Limits
-    text: flat cost for API requests per minute
-    color: blue
-    table:
-      head:
-        - Free
-        - $5
-        - $10
-        - $20
-        - $40
-      body:
-        - 1-10/min
-        - 11-30/min
-        - 31-60/min
-        - 61-120/min
-        - 121-300/min
+structure:
+  tiers:
+    -
+      title: Registered Devices
+      text: simple, flat $1 per registered device (per month)
+      color: teal
+    -
+      title: Simultaneous Call Sessions
+      text: cost per session for simultaneous call sessions
+      color: purple
+      table:
+        head:
+          - $10/session
+          - $9/session
+          - $8/session
+          - $7/session
+          - $6/session
+          - $5/session
+        body:
+          - 1-20 sessions
+          - 21-50 sessions
+          - 51-100 sessions
+          - 101-250 sessions
+          - 251-500 sessions
+          - 500+ sessions
+    -
+      title: API Rate Limits
+      text: flat cost for API requests per minute
+      color: blue
+      table:
+        head:
+          - Free
+          - $5
+          - $10
+          - $20
+          - $40
+        body:
+          - 1-10/min
+          - 11-30/min
+          - 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

@@ -25,4 +25,12 @@
   @media (max-width: $width-tablet-2) {
     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();
   }
 }