ben.carrasco/next-static-site
1
0
Fork 0
mirror of https://github.com/jambonz/next-static-site.git synced 2025-12-19 04:47:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Finish static pricing page

Browse Source
This commit is contained in:
kitajchuk
2021-04-05 19:25:31 -07:00
parent 051ebfb4f2
commit 0731a5cd84
6 changed files with 339 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
data/pricing.yml
View File

@@ -15,4 +15,63 @@ touts:
-
icon: Activity
color: blue
text: The rate at which you want to be able to send API requests to our servers.
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

8
pages/jambonz-ui.js
View File

@@ -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>

75
pages/pricing.js
View File

@@ -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>
);
}

85
styles/_layout.scss
View File

@@ -82,4 +82,89 @@
margin-right: auto;
}
}
}
/******************************************************************************
* 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;
}
}
}
}
}

59
styles/_typography.scss
View File

@@ -7,11 +7,16 @@ body {
a {
color: $jambonz;
text-decoration: none;
}
/* Buttons have their own inline svg/span styles */
a:not(.btn) {
svg, span {
display: inline-block;
/*
* Buttons have their own inline svg/span styles
* 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) {
width: 16px;
height: 16px;
}
// @note: Consideration on stopping type reduction here
// @media (max-width: $width-mobile) {
// 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) {
font-size: $m-size;
}
// @note: Consideration on stopping type reduction here
// @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) {
font-size: $ms-size;
}
// @note: Consideration on stopping type reduction here
// @media (max-width: $width-tablet-1) {
// font-size: $ms-size;
// }
}
.ms {
@@ -240,4 +247,16 @@ em {
.mxs {
font-size: $mxs-size;
line-height: 2;
}
.color--teal {
color: $teal;
}
.color--blue {
color: $blue;
}
.color--purple {
color: $purple;
}

77
styles/pages/_pricing.scss
View File

@@ -48,4 +48,81 @@
margin-bottom: 16px;
}
}
}
/******************************************************************************
* 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;
}
}
}