ben.carrasco/next-static-site
1
0
Fork 0
mirror of https://github.com/jambonz/next-static-site.git synced 2026-10-04 02:04:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
kitajchuk
2021-04-08 14:24:05 -07:00
parent 997a28e3d2
commit fd93844075
6 changed files with 75 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
data/pricing.yml
+46 -41
View File
@@ -16,47 +16,52 @@ touts:
icon: Activity icon: Activity
color: blue 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: structure:
- tiers:
title: Registered Devices -
text: simple, flat $1 per registered device (per month) title: Registered Devices
color: teal text: simple, flat $1 per registered device (per month)
- color: teal
title: Simultaneous Call Sessions -
text: cost per session for simultaneous call sessions title: Simultaneous Call Sessions
color: purple text: cost per session for simultaneous call sessions
table: color: purple
head: table:
- $10/session head:
- $9/session - $10/session
- $8/session - $9/session
- $7/session - $8/session
- $6/session - $7/session
- $5/session - $6/session
body: - $5/session
- 1-20 sessions body:
- 21-50 sessions - 1-20 sessions
- 51-100 sessions - 21-50 sessions
- 101-250 sessions - 51-100 sessions
- 251-500 sessions - 101-250 sessions
- 500+ sessions - 251-500 sessions
- - 500+ sessions
title: API Rate Limits -
text: flat cost for API requests per minute title: API Rate Limits
color: blue text: flat cost for API requests per minute
table: color: blue
head: table:
- Free head:
- $5 - Free
- $10 - $5
- $20 - $10
- $40 - $20
body: - $40
- 1-10/min body:
- 11-30/min - 1-10/min
- 31-60/min - 11-30/min
- 61-120/min - 31-60/min
- 121-300/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: additional:
headline: Additional Services headline: Additional Services
services: services:
pages/pricing.js
+10 -3
View File
@@ -1,7 +1,7 @@
import { nanoid } from 'nanoid'; import { nanoid } from 'nanoid';
import Layout from '../components/layout'; 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'; import { getData } from '../lib/data';
function Touts({data}) { function Touts({data}) {
@@ -25,7 +25,7 @@ function Tiers({ data }) {
return ( return (
<section className="tiers pad"> <section className="tiers pad">
<div className="wrap tiers__wrap"> <div className="wrap tiers__wrap">
{data.map((tier) => { {data.tiers.map((tier) => {
return ( return (
<div key={nanoid()} className="tiers__item"> <div key={nanoid()} className="tiers__item">
<H5><strong className={`color--${tier.color}`}>{tier.title}</strong></H5> <H5><strong className={`color--${tier.color}`}>{tier.title}</strong></H5>
@@ -52,6 +52,13 @@ function Tiers({ data }) {
); );
})} })}
</div> </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> </section>
); );
} }
@@ -94,7 +101,7 @@ export default function Pricing({ data }) {
<Layout siteData={data.site}> <Layout siteData={data.site}>
<Hero data={data.pricing.hero} subStyle="pricing" /> <Hero data={data.pricing.hero} subStyle="pricing" />
<Touts data={data.pricing.touts} /> <Touts data={data.pricing.touts} />
<Tiers data={data.pricing.tiers} /> <Tiers data={data.pricing.structure} />
<Services data={data.pricing.additional} /> <Services data={data.pricing.additional} />
</Layout> </Layout>
); );
styles/_mixins.scss
+8
View File
@@ -25,4 +25,12 @@
@media (max-width: $width-tablet-2) { @media (max-width: $width-tablet-2) {
font-size: $m-size; font-size: $m-size;
} }
}
@mixin cta() {
margin-top: 96px;
@media (max-width: $width-tablet-1) {
margin-top: 64px;
}
} }
styles/pages/_home.scss
+1 -5
View File
@@ -213,10 +213,6 @@
} }
&__cta { &__cta {
margin-top: 96px; @include cta();
@media (max-width: $width-tablet-1) {
margin-top: 64px;
}
} }
} }
styles/pages/_pricing.scss
+9 -5
View File
@@ -73,6 +73,14 @@
&__table { &__table {
margin-top: 32px; margin-top: 32px;
} }
&__cta {
@include cta();
> :first-child {
margin-bottom: 32px;
}
}
} }
/****************************************************************************** /******************************************************************************
@@ -123,10 +131,6 @@
} }
&__cta { &__cta {
margin-top: 96px; @include cta();
@media (max-width: $width-tablet-1) {
margin-top: 64px;
}
} }
} }
styles/pages/_why.scss
+1 -5
View File
@@ -126,10 +126,6 @@
} }
&__cta { &__cta {
margin-top: 96px; @include cta();
@media (max-width: $width-tablet-1) {
margin-top: 64px;
}
} }
} }