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

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