Finish static pricing page

data/pricing.yml

@@ -16,3 +16,62 @@ 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
+additional:
+  headline: Additional Services
+  services:
+    -
+      title: Static IP
+      text: Static IP address assigned only to you, to be used for routing your calls to carriers and devices.
+    -
+      title: Microsoft Teams Direct Routing
+      text: Ability to route PSTN calls to and from your MS teams clients.
+    -
+      title: Dedicated SBC
+      text: A private session border controller handling only your traffic, along with a grafana dashboard to let your NOC folks monitor your traffic in real-time.
+    -
+      title: Professional Services
+      text: Commission us to help build your voice applications, or to set up and manage a jambonz cluster on your own infrastructure.
+  cta: Contact us to get started
+  icon: Send
+  url: mailto:support@jambonz.org

pages/jambonz-ui.js

@@ -22,7 +22,7 @@ export default function JambonzUI({ data }) {
               <div>Objectivity (free, large family—16 styles)</div>
               <div>
                 <Link href="https://www.behance.net/gallery/60530395/Objectivity-Free-Font-Family">
-                  <a target="_blank">
+                  <a className="i" target="_blank">
                     <span>design</span>
                     <Icon name="ExternalLink" />
                   </a>
@@ -30,7 +30,7 @@ export default function JambonzUI({ data }) {
               </div>
               <div>
                 <Link href="https://www.fontsquirrel.com/fonts/objectivity">
-                  <a target="_blank">
+                  <a className="i" target="_blank">
                     <span>specimen</span>
                     <Icon name="ExternalLink" />
                   </a>
@@ -41,7 +41,7 @@ export default function JambonzUI({ data }) {
               <div>Feather (free, large set—286 icons)</div>
               <div>
                 <Link href="https://feathericons.com">
-                  <a target="_blank">
+                  <a className="i" target="_blank">
                     <span>specimen</span>
                     <Icon name="ExternalLink" />
                   </a>
@@ -49,7 +49,7 @@ export default function JambonzUI({ data }) {
               </div>
               <div>
                 <Link href="https://github.com/feathericons/react-feather">
-                  <a target="_blank">
+                  <a className="i" target="_blank">
                     <span>react-feather</span>
                     <Icon name="ExternalLink" />
                   </a>

pages/pricing.js

@@ -1,5 +1,6 @@
 import Layout from '../components/layout';
-import { Hero, Icon, P } from '../components/jambonz-ui';
+import Link from 'next/link';
+import { Hero, Icon, Button, H2, H5, P, M, MS } from '../components/jambonz-ui';
 import { getData } from '../lib/data';
 import { nanoid } from 'nanoid';
 
@@ -20,11 +21,83 @@ function Touts({data}) {
   );
 }
 
+function Tiers({ data }) {
+  return (
+    <div className="tiers pad">
+      <div className="wrap tiers__wrap">
+        {data.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>
+  );
+}
+
+function Services({data}) {
+  return (
+    <div className="bg-grey services pad">
+      <div className="wrap services__wrap">
+        <div className="services__headline">
+          <H2>{data.headline}</H2>
+        </div>
+        <div className="services__options">
+          {data.services.map((service) => {
+            return (
+              <div key={nanoid()} className="services__option">
+                <P>
+                  <Link href={data.url}>
+                    <a className="i" target="_blank">
+                      <strong>{service.title}</strong>
+                      <Icon name="ExternalLink" />
+                    </a>
+                  </Link>
+                </P>
+                <P>{service.text}</P>
+              </div>
+            );
+          })}
+        </div>
+        <div className="services__cta">
+          <Button href={data.url} target="_blank" style="pill" subStyle="jambonz">
+            <Icon name={data.icon} />
+            <span>{data.cta}</span>
+          </Button>
+        </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} />
+      <Tiers data={data.pricing.tiers} />
+      <Services data={data.pricing.additional} />
     </Layout>
   );
 }

styles/_layout.scss

@@ -83,3 +83,88 @@
     }
   }
 }
+
+/******************************************************************************
+ * Tables
+*******************************************************************************/
+.table {
+  margin: 0 auto;
+  max-width: 100%;
+  display: flex;
+  justify-content: center;
+
+  @media (max-width: $width-tablet-2) {
+    flex-wrap: wrap;
+    max-width: 480px;
+  }
+
+  .table__row {
+    @media (max-width: $width-tablet-2) {
+      width: 100%;
+      display: flex;
+    }
+  }
+  
+  .table__head,
+  .table__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: 2px solid $color;
+        border-bottom: 2px solid $color;
+
+        & + .table__row {
+          @media (max-width: $width-tablet-2) {
+            border-top: none;
+          }
+        }
+
+        &:last-child {
+          .table__head {
+            border-right: 2px solid $color;
+
+            @media (max-width: $width-tablet-2) {
+              border-right: none;
+            }
+          }
+
+          .table__cell {
+            border-right: 2px solid $color;
+          }
+        }
+      }
+
+      .table__head {
+        border-bottom: 2px solid $color;
+        border-left: 2px solid $color;
+
+        @media (max-width: $width-tablet-2) {
+          border-bottom: none;
+        }
+      }
+
+      .table__cell {
+        border-left: 2px solid $color;
+
+        @media (max-width: $width-tablet-2) {
+          border-right: 2px solid $color;
+        }
+      }
+    }
+  }
+}

styles/_typography.scss

@@ -7,11 +7,16 @@ body {
 
 a {
   color: $jambonz;
+  text-decoration: none;
 }
-/* Buttons have their own inline svg/span styles */
+
-a:not(.btn) {
+/*
-  svg, span {
+ * Buttons have their own inline svg/span styles
-    display: inline-block;
+ * This className lets us inline a flat icon with text
+ */
+.i {
+  svg, span, strong {
+    display: inline;
     vertical-align: middle;
   }
 
@@ -46,10 +51,11 @@ a:not(.btn) {
       height: 18px;
     }
 
-    @media (max-width: $width-mobile) {
+    // @note: Consideration on stopping type reduction here
-      width: 16px;
+    // @media (max-width: $width-mobile) {
-      height: 16px;
+    //   width: 16px;
-    }
+    //   height: 16px;
+    // }
   }
 }
 
@@ -167,6 +173,10 @@ em {
     color: $jambonz;
   }
 
+  a {
+    text-decoration: underline;
+  }
+
   @media (max-width: $width-tablet-1) {
     font-size: $h6-size;
   }
@@ -175,9 +185,10 @@ em {
     font-size: $p-size;
   }
 
-  @media (max-width: $width-mobile) {
+  // @note: Consideration on stopping type reduction here
-    font-size: $m-size;
+  // @media (max-width: $width-mobile) {
-  }
+  //   font-size: $m-size;
+  // }
 }
 
 .h6 {
@@ -208,23 +219,19 @@ em {
   font-size: $p-size;
   line-height: 1.9;
 
-  @media (max-width: $width-tablet-1) {
+  @media (max-width: $width-tablet-2) {
     font-size: $m-size;
   }
-
-  // @note: Consideration on stopping type reduction here
-  // @media (max-width: $width-tablet-2) {
-  //   font-size: $ms-size;
-  // }
 }
 
 .m {
   font-size: $m-size;
   line-height: 1.9;
 
-  @media (max-width: $width-tablet-1) {
+  // @note: Consideration on stopping type reduction here
-    font-size: $ms-size;
+  // @media (max-width: $width-tablet-1) {
-  }
+  //   font-size: $ms-size;
+  // }
 }
 
 .ms {
@@ -241,3 +248,15 @@ em {
   font-size: $mxs-size;
   line-height: 2;
 }
+
+.color--teal {
+  color: $teal;
+}
+
+.color--blue {
+  color: $blue;
+}
+
+.color--purple {
+  color: $purple;
+}

styles/pages/_pricing.scss

@@ -49,3 +49,80 @@
     }
   }
 }
+
+/******************************************************************************
+ * Tier pricing
+*******************************************************************************/
+.tiers {
+  text-align: center;
+
+  &__item {
+    + .tiers__item {
+      margin-top: 96px;
+
+      @media (max-width: $width-tablet-1) {
+        margin-top: 64px;
+      }
+    }
+  }
+
+  &__table {
+    margin-top: 32px;
+  }
+}
+
+/******************************************************************************
+ * Additional Services
+*******************************************************************************/
+.services {
+  text-align: center;
+
+  &__options {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    @media (max-width: $width-tablet-1) {
+      margin: 0 -32px;
+    }
+
+    @media (max-width: $width-tablet-2) {
+      margin: 0;
+    }
+
+    svg {
+      stroke: $jambonz;
+    }
+
+    strong {
+      color: $jambonz;
+    }
+  }
+
+  &__option {
+    width: 33.3333333333vw;
+    max-width: 480px;
+    text-align: left;
+    padding-top: 64px;
+    margin: 0 50px;
+
+    @media (max-width: $width-tablet-1) {
+      width: calc(50% - 64px);
+      margin: 0 32px;
+    }
+
+    @media (max-width: $width-tablet-2) {
+      width: 100%;
+      margin: 0;
+      padding-top: 32px;
+    }
+  }
+
+  &__cta {
+    margin-top: 96px;
+
+    @media (max-width: $width-tablet-1) {
+      margin-top: 64px;
+    }
+  }
+}