Pricing page changes for simplified structure

data/pricing.yml

@@ -1,67 +1,15 @@
 hero:
-  headline: Simple, capacity-based pricing.
+  headline: Simple, capacity based pricing.
-  subtext:
+  subtext: Choose the number of concurrent calls you want to handle, and pay $12 per call session MRC.
-    - There are no per-minute charges.
-    - "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.
 structure:
-  tiers:
+  text:
-    -
+    - Oh, and with that you can register 5 x the number of devices - so if you purchased 100 sessions you can also register up to 500 devices.
-      title: Registered Devices
+    - (Need more devices?  Add them to your monthly subscription at $1/device)
-      text: simple, flat $1 per registered device (per month)
+  cta:
-      color: teal
+    text: Have special pricing needs or large volumes?
-    -
+    cta: Contact us
-      title: Simultaneous Call Sessions
+    icon: Send
-      text: cost per session for simultaneous call sessions
+    url: mailto:support@jambonz.org
-      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,62 +1,24 @@
 import { nanoid } from 'nanoid';
 
 import Layout from '../components/layout';
-import { Hero, Icon, Button, H2, H5, H6, P, M, MS } from '../components/jambonz-ui';
+import { Hero, Icon, Button, H2, H6, P, normalizeSubtext } from '../components/jambonz-ui';
 import { getData } from '../lib/data';
 
-function Touts({data}) {
+function Structure({data}) {
   return (
-    <section className="bg-pink touts">
+    <section className="structure">
-      <div className="wrap touts__wrap">
+      <div className="wrap structure__text">
-        {data.map((tout) => {
+        <>
-          return (
+          {normalizeSubtext(data.text).map((text) => {
-            <div key={nanoid()} className="touts__item">
+            return <H6 key={nanoid()}>{text}</H6>;
-              <Icon name={tout.icon} style="fill" subStyle={tout.color} />
+          })}
-              <P>{tout.text}</P>
+        </>
-            </div>
-          );
-        })}
       </div>
-    </section>
+      <div className="wrap structure__cta">
-  );
+        <P>{data.cta.text}</P>
-}
+        <Button href={`${data.cta.url}?subject=Additional Services Support`} target="_blank" style="pill" subStyle="jambonz">
-
+          <Icon name={data.cta.icon} />
-function Tiers({ data }) {
+          <span>{data.cta.cta}</span>
-  return (
-    <section className="tiers pad">
-      <div className="wrap tiers__wrap">
-        {data.tiers.map((tier) => {
-          return (
-            <div key={nanoid()} className="tiers__item">
-              <H5><strong className={`color--${tier.color}`}>{tier.title}</strong></H5>
-              <M>{tier.text}</M>
-              {tier.table && (
-                <div className={`table table--${tier.color} tiers__table`}>
-                  {tier.table.head.map((headText, index) => {
-                    const cellText = tier.table.body[index];
-
-                    return (
-                      <div key={nanoid()} className="table__row">
-                        <div className="table__head">
-                          <MS>{headText}</MS>
-                        </div>
-                        <div className="table__cell">
-                          <MS>{cellText}</MS>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              )}
-            </div>
-          );
-        })}
-      </div>
-      <div className="wrap tiers__cta">
-        <H6>{data.text}</H6>
-        <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>
@@ -65,7 +27,7 @@ function Tiers({ data }) {
 
 function Services({data}) {
   return (
-    <section className="bg-grey services pad">
+    <section className="bg-pink services pad">
       <div className="wrap services__wrap">
         <div className="services__headline">
           <H2>{data.headline}</H2>
@@ -100,8 +62,7 @@ export default function Pricing({ data }) {
   return (
     <Layout siteData={data.site}>
       <Hero data={data.pricing.hero} subStyle="pricing" />
-      <Touts data={data.pricing.touts} />
+      <Structure data={data.pricing.structure} />
-      <Tiers data={data.pricing.structure} />
       <Services data={data.pricing.additional} />
     </Layout>
   );

styles/_layout.scss

@@ -48,45 +48,15 @@
   }
 
   &--pricing {
-    position: relative;
+    padding-bottom: 0;
-
-    &:before {
-      content: '';
-      background-color: $pink;
-      width: 100%;
-      height: calc(100% + #{$navi-height});
-      transform: translateY(-#{$navi-height});
-      z-index: 1;
-      display: block;
-      position: absolute;
-      left: 0;
-      top: 0;
-    }
 
     .hero__wrap {
       position: relative;
       z-index: 2;
     }
 
-    .hero__headline {
-      color: $jambonz;
-    }
-
     .hero__subtext {
-      margin-bottom: 0;
+      max-width: 770px;
-      max-width: 820px;
-
-      div + div {
-        margin-top: 32px;
-
-        @media (max-width: $width-mobile) {
-          margin-top: 16px;
-        }
-      }
-
-      @media (max-width: $width-tablet-1) {
-        max-width: 680px;
-      }
     }
   }
 
@@ -108,113 +78,3 @@
     }
   }
 }
-
-/******************************************************************************
- * Tables
-*******************************************************************************/
-.table {
-  max-width: 100%;
-  display: flex;
-  justify-content: center;
-
-  @media (max-width: $width-tablet-2) {
-    flex-wrap: wrap;
-    max-width: 420px;
-  }
-
-  &__row {
-    border-top: 2px solid $charcoal;
-    border-bottom: 2px solid $charcoal;
-
-    @media (max-width: $width-tablet-2) {
-      width: 100%;
-      display: flex;
-    }
-
-    &:last-child {
-      .table__head {
-        border-right: 2px solid $charcoal;
-
-        @media (max-width: $width-tablet-2) {
-          border-right: none;
-        }
-      }
-
-      .table__cell {
-        border-right: 2px solid $charcoal;
-      }
-    }
-
-    & + & {
-      @media (max-width: $width-tablet-2) {
-        border-top: none;
-      }
-    }
-  }
-
-  &__head {
-    border-bottom: 2px solid $charcoal;
-    border-left: 2px solid $charcoal;
-
-    @media (max-width: $width-tablet-2) {
-      border-bottom: none;
-    }
-  }
-
-  &__cell {
-    border-left: 2px solid $charcoal;
-
-    @media (max-width: $width-tablet-2) {
-      border-right: 2px solid $charcoal;
-    }
-  }
-  
-  &__head,
-  &__cell {
-    text-align: center;
-    padding: 16px;
-
-    @media (max-width: $width-tablet-2) {
-      width: 50%;
-    }
-  }
-
-  $colors: (
-    'blue': $blue,
-    // 'teal': $teal,
-    'purple': $purple,
-    // 'jambonz': $jambonz
-  );
-
-  @each $name, $color in $colors {
-    &--#{$name} {
-      .table__row {
-        border-top-color: $color;
-        border-bottom-color: $color;
-
-        &:last-child {
-          .table__head {
-            border-right-color: $color;
-          }
-
-          .table__cell {
-            border-right-color: $color;
-          }
-        }
-      }
-
-      .table__head {
-        border-bottom-color: $color;
-        border-left-color: $color;
-      }
-
-      .table__cell {
-        border-left-color: $color;
-
-        @media (max-width: $width-tablet-2) {
-          border-right-color: $color;
-        }
-      }
-    }
-  }
-}

styles/pages/_pricing.scss

@@ -1,7 +1,7 @@
 /******************************************************************************
- * Hero Touts
+ * Pricing structure
 *******************************************************************************/
-.touts {
+.structure {
   padding-bottom: 96px;
   text-align: center;
 
@@ -9,69 +9,17 @@
     padding-bottom: 64px;
   }
 
-  &__wrap {
+  &__text {
-    display: flex;
+    max-width: 960px;
-    justify-content: center;
+    @include flex-cols();
-    align-items: flex-start;
 
-    @media (max-width: $width-tablet-2) {
+    h6 + h6 {
-      flex-wrap: wrap;
+      margin-top: 32px;
-      max-width: 320px;
-      margin: 0 auto;
-    }
-  }
-
-  &__item {
-    max-width: 300px;
-    margin: 0 40px;
-
-    @media (max-width: $width-tablet-1) {
-      margin: 0 32px;
-    }
-
-    & + & {
-      @media (max-width: $width-tablet-2) {
-        margin-top: 64px;
-      }
 
       @media (max-width: $width-mobile) {
-        margin-top: 32px;
+        margin-top: 16px;
       }
     }
-
-    @media (max-width: $width-tablet-2) {
-      margin: 0;
-      max-width: 100%;
-    }
-
-    .icon {
-      margin-bottom: 16px;
-    }
-  }
-}
-
-/******************************************************************************
- * Tier pricing
-*******************************************************************************/
-.tiers {
-  text-align: center;
-
-  &__item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    & + & {
-      margin-top: 96px;
-
-      @media (max-width: $width-tablet-1) {
-        margin-top: 64px;
-      }
-    }
-  }
-
-  &__table {
-    margin-top: 32px;
   }
 
   &__cta {