mirror of
https://github.com/jambonz/next-static-site.git
synced 2025-12-19 04:47:44 +00:00
Pricing page changes for simplified structure
This commit is contained in:
Brandon Lee Kitajchuk
committed by
GitHub
GitHub
parent
5589c3496c
commit
c14e4ad12e
@@ -1,67 +1,15 @@
|
||||
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:"
|
||||
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.
|
||||
headline: Simple, capacity based pricing.
|
||||
subtext: Choose the number of concurrent calls you want to handle, and pay $12 per call session MRC.
|
||||
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
|
||||
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.
|
||||
- (Need more devices? Add them to your monthly subscription at $1/device)
|
||||
cta:
|
||||
text: Have special pricing needs or large volumes?
|
||||
cta: Contact us
|
||||
icon: Send
|
||||
url: mailto:support@jambonz.org
|
||||
additional:
|
||||
headline: Additional Services
|
||||
services:
|
||||
|
||||
@@ -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">
|
||||
<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>
|
||||
);
|
||||
})}
|
||||
<section className="structure">
|
||||
<div className="wrap structure__text">
|
||||
<>
|
||||
{normalizeSubtext(data.text).map((text) => {
|
||||
return <H6 key={nanoid()}>{text}</H6>;
|
||||
})}
|
||||
</>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function Tiers({ data }) {
|
||||
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>
|
||||
<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} />
|
||||
<span>{data.cta.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} />
|
||||
<Tiers data={data.pricing.structure} />
|
||||
<Structure data={data.pricing.structure} />
|
||||
<Services data={data.pricing.additional} />
|
||||
</Layout>
|
||||
);
|
||||
|
||||
@@ -48,45 +48,15 @@
|
||||
}
|
||||
|
||||
&--pricing {
|
||||
position: relative;
|
||||
|
||||
&: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;
|
||||
}
|
||||
padding-bottom: 0;
|
||||
|
||||
.hero__wrap {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero__headline {
|
||||
color: $jambonz;
|
||||
}
|
||||
|
||||
.hero__subtext {
|
||||
margin-bottom: 0;
|
||||
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;
|
||||
}
|
||||
max-width: 770px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -107,114 +77,4 @@
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************************************
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
/******************************************************************************
|
||||
* Hero Touts
|
||||
* Pricing structure
|
||||
*******************************************************************************/
|
||||
.touts {
|
||||
.structure {
|
||||
padding-bottom: 96px;
|
||||
text-align: center;
|
||||
|
||||
@@ -9,69 +9,17 @@
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
|
||||
&__wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
&__text {
|
||||
max-width: 960px;
|
||||
@include flex-cols();
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
& + & {
|
||||
@media (max-width: $width-tablet-2) {
|
||||
margin-top: 64px;
|
||||
}
|
||||
h6 + h6 {
|
||||
margin-top: 32px;
|
||||
|
||||
@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 {
|
||||
|
||||
Reference in New Issue
Block a user