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

update jambonz-ui

Browse Source
This commit is contained in:
kitajchuk
2022-06-14 09:30:51 -07:00
parent 54e9886d70
commit ba0e418cca
10 changed files with 137 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/index.js
View File

@@ -61,7 +61,7 @@ function Dilemma({data}) {
}, [mobile, active, setActive, initialRef]);
return (
<section className="bg-grey dilemma pad">
<section className="bg--grey dilemma pad">
<div className="wrap dilemma__wrap">
<div className="dilemma__headline">
<H2>{data.headline}</H2>

101
pages/jambonz-ui.js
View File

@@ -1,6 +1,7 @@
import Link from 'next/link';
import Layout from '../src/components/layout';
import Icons from '../src/components/icons';
import { P, M, MS, MXS, H1, H2, H3, H4, H5, H6, Button, Icon, Hero } from '../src/components/jambonz-ui';
import { getData } from '../src/lib/data';
@@ -59,70 +60,88 @@ export default function JambonzUI({ data }) {
</div>
</Hero>
{/* Show black background style */}
<div className="pad bg-black">
<div className="pad bg--black">
<div className="wrap">
<div className="wrap-text">
<H1>{pageData.text}</H1>
<H1>H1: {pageData.text}</H1>
</div>
</div>
</div>
<div className="wrap">
<div className="wrap-text pad">
<H2>{pageData.text}</H2>
<H2>H2: {pageData.text}</H2>
</div>
</div>
{/* Show pink background style */}
<div className="pad bg-pink">
<div className="pad bg--pink">
<div className="wrap">
<div className="wrap-text">
<H3>{pageData.text}</H3>
<H3>H3: {pageData.text}</H3>
</div>
</div>
</div>
<div className="wrap">
<div className="wrap-text pad">
<H4>{pageData.text}</H4>
<H4>H4: {pageData.text}</H4>
</div>
</div>
{/* Show grey background style */}
<div className="pad bg-grey">
<div className="pad bg--grey">
<div className="wrap">
<div className="wrap-text">
<H5>{pageData.text}</H5>
<H5>H5: {pageData.text}</H5>
</div>
</div>
</div>
<div className="wrap">
<div className="wrap-text pad">
<H6>{pageData.text}</H6>
<H6>H6: {pageData.text}</H6>
</div>
<div className="wrap-text pad">
<P>{pageData.text}</P>
<P>P: {pageData.text}</P>
</div>
<div className="wrap-text pad">
<M>{pageData.text}</M>
<P>P: With a <strong>strong</strong> element</P>
</div>
<div className="wrap-text pad">
<MS>{pageData.text}</MS>
<P>P: With a <strong className="med">medium</strong> element</P>
</div>
<div className="wrap-text pad">
<MXS>{pageData.text}</MXS>
<P>P: With an <em>emphasized</em> element</P>
</div>
<div className="wrap-text pad">
<P>P: <span className="color--blue">With</span> <span className="color--teal">colored</span> <span className="color--purple">text</span></P>
</div>
<div className="wrap-text pad">
<M>M: {pageData.text}</M>
</div>
<div className="wrap-text pad">
<MS>MS: {pageData.text}</MS>
</div>
<div className="wrap-text pad">
<MXS>MXS: {pageData.text}</MXS>
</div>
<div className="pad">
<img src="/images/Jambonz_app_screenshot.webp" width="1280" height="842" alt="jambonz node-red screenshot" />
<div className="icons icons--set">
{Object.keys(Icons).map((icon) => {
return <Icon key={icon} mainStyle="fill" name={icon} />;
})}
</div>
</div>
<div className="pad">
<div className="icons">
<Icon mainStyle="fill" name="Server" />
<Icon mainStyle="fill" name="Folder" />
<Icon mainStyle="fill" name="Cloud" />
<Icon mainStyle="fill" name="Layers" />
<Icon mainStyle="fill" name="UserCheck" />
<Icon mainStyle="fill" name="Lock" />
<Icon mainStyle="fill" name="ThumbsUp" />
<Icon mainStyle="fill" subStyle="purple" name="Phone" />
<Icon mainStyle="fill" subStyle="teal" name="PhoneCall" />
<Icon mainStyle="fill" subStyle="blue" name="Activity" />
<div className="icons icons--set">
<Icon mainStyle="fill" subStyle="dark" name="MapPin" />
<Icon mainStyle="fill" subStyle="purple" name="MapPin" />
<Icon mainStyle="fill" subStyle="teal" name="MapPin" />
<Icon mainStyle="fill" subStyle="blue" name="MapPin" />
</div>
</div>
<div className="pad">
<div className="icons icons--set">
<Icon mainStyle="pill" subStyle="dark" name="Heart" />
<Icon mainStyle="pill" subStyle="purple" name="Heart" />
<Icon mainStyle="pill" subStyle="teal" name="Heart" />
<Icon mainStyle="pill" subStyle="blue" name="Heart" />
<Icon mainStyle="pill" name="Heart" />
</div>
</div>
@@ -130,17 +149,31 @@ export default function JambonzUI({ data }) {
<img src="/svg/drachtio.svg" width="313" height="71" alt="drachtio" />
</div>
<div className="pad">
<Button href="#" mainStyle="login">Log In</Button>
<Button href="/regions/?redirect=login" mainStyle="login">Log In</Button>
</div>
</div>
<div className="bg--jambonz">
<div className="pad">
<Button href="/regions/?redirect=login" mainStyle="login" subStyle="white">Log In</Button>
</div>
</div>
<div className="wrap">
<div className="btns pad">
<Button href="/regions/?redirect=register">Sign up for free</Button>
<Button href="/regions/?redirect=register" subStyle="dark">Get started for free</Button>
</div>
<div className="btns pad">
<Button href="#">Button</Button>
<Button href="#" subStyle="dark">styles...</Button>
<Button href="/regions/?redirect=register" subStyle="purple">Do it</Button>
<Button href="/regions/?redirect=register" subStyle="teal">Do it</Button>
<Button href="/regions/?redirect=register" subStyle="blue">Do it</Button>
</div>
<div className="btns pad">
<Button href="#" subStyle="purple">Optional</Button>
<Button href="#" subStyle="teal">button</Button>
<Button href="#" subStyle="blue">styles...</Button>
</div>
<div className="bg--jambonz">
<div className="pad">
<Button href="mailto:support@jambonz.org?subject=Jambonz Support" subStyle="light" target="_blank">support@jambonz.org</Button>
</div>
</div>
<div className="wrap">
<div className="btns pad">
<Button href="https://github.com/jambonz" target="_blank" mainStyle="pill">
<Icon name="GitHub" />
@@ -152,9 +185,9 @@ export default function JambonzUI({ data }) {
</Button>
</div>
<div className="pad">
<Button href="#" mainStyle="pill" subStyle="jambonz">
<Button href="mailto:support@jambonz.org?subject=Additional Services Support" mainStyle="pill" subStyle="jambonz" target="_blank">
<Icon name="Send" />
<span>Contact us to get started</span>
<span>Contact us</span>
</Button>
</div>
</div>

2
pages/pricing.js
View File

@@ -27,7 +27,7 @@ function Structure({data}) {
function Services({data}) {
return (
<section className="bg-pink services pad">
<section className="bg--pink services pad">
<div className="wrap services__wrap">
<div className="services__headline">
<H2>{data.headline}</H2>

2
pages/regions.js
View File

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
import { nanoid } from 'nanoid';
import Layout from '../src/components/layout';
import { Hero, Icon, P, H6 } from '../src/components/jambonz-ui';
import { Hero, Icon, P } from '../src/components/jambonz-ui';
import { getData } from '../src/lib/data';
function Regions({ data }) {

2
pages/why.js
View File

@@ -6,7 +6,7 @@ import { getData } from '../src/lib/data';
function Facts({data}) {
return (
<section className="bg-pink facts">
<section className="bg--pink facts">
<div className="wrap facts__wrap">
<div className="facts__items">
{data.map((fact) => {

2
src/components/footer.js
View File

@@ -18,7 +18,7 @@ function FooterItem({ obj }) {
export default function Footer({ siteData }) {
return (
<footer className="bg-jambonz foot">
<footer className="bg--jambonz foot">
<div className="wrap foot__wrap">
<div className="foot__navs">
<ul className="foot__links">

2
src/components/jambonz-ui.js
View File

@@ -89,7 +89,7 @@ export function Latest({ data }) {
'latest': true,
[`latest--${data.label}`]: true,
'pad': true,
'bg-pink': true,
'bg--pink': true,
};
return (

2
src/components/navi.js
View File

@@ -30,7 +30,7 @@ function NaviItem({obj}) {
function NaviMobile({ active, handler, siteData }) {
const classes = {
'bg-jambonz': true,
'bg--jambonz': true,
'wrap': true,
'navi__mobile': true,
'active': active,

22
src/styles/_backgrounds.scss
View File

@@ -1,22 +1,34 @@
.bg-jambonz {
.bg--jambonz {
background-color: $jambonz;
color: $white;
}
.bg-black {
.bg--black {
background-color: $black;
color: $white;
}
.bg-charcoal {
.bg--charcoal {
background-color: $charcoal;
color: $white;
}
.bg-grey {
.bg--grey {
background-color: $grey;
}
.bg-pink {
.bg--pink {
background-color: $pink;
}
.bg--blue {
background-color: $blue;
}
.bg--purple {
background-color: $purple;
}
.bg--teal {
background-color: $teal;
}

46
src/styles/_icons.scss
View File

@@ -33,6 +33,38 @@
svg {
stroke: $jambonz;
}
&--dark {
border: 2px solid $charcoal;
svg {
stroke: $charcoal;
}
}
&--blue {
border: 2px solid $blue;
svg {
stroke: $blue;
}
}
&--teal {
border: 2px solid $teal;
svg {
stroke: $teal;
}
}
&--purple {
border: 2px solid $purple;
svg {
stroke: $purple;
}
}
}
&--fill {
@@ -48,6 +80,10 @@
background-color: $teal;
}
&--dark {
background-color: $charcoal;
}
&--white {
background-color: $white;
@@ -72,4 +108,14 @@
margin: 0 8px;
}
}
&--set {
.icon {
margin: 16px;
@media (max-width: $width-mobile) {
margin: 8px;
}
}
}
}