mirror of
https://github.com/jambonz/next-static-site.git
synced 2026-11-08 12:34:33 +00:00
Initial commit
This commit is contained in:
kitajchuk committed
commit
25f5486415
63 files changed
+4150
No files matched your search
@@ -0,0 +1,108 @@
|
||||
import Link from 'next/link';
|
||||
import Head from 'next/head';
|
||||
import classNames from 'classnames';
|
||||
import * as Icons from 'react-feather';
|
||||
|
||||
export function H1({ children }) {
|
||||
return <div className="h1">{children}</div>;
|
||||
}
|
||||
|
||||
export function H2({ children }) {
|
||||
return <div className="h2">{children}</div>;
|
||||
}
|
||||
|
||||
export function H3({ children }) {
|
||||
return <div className="h3">{children}</div>;
|
||||
}
|
||||
|
||||
export function H4({ children }) {
|
||||
return <div className="h4">{children}</div>;
|
||||
}
|
||||
|
||||
export function H5({ children }) {
|
||||
return <div className="h5">{children}</div>;
|
||||
}
|
||||
|
||||
export function H6({ children }) {
|
||||
return <div className="h6">{children}</div>;
|
||||
}
|
||||
|
||||
export function P({children}) {
|
||||
return <div className="p">{children}</div>;
|
||||
}
|
||||
|
||||
export function M({ children }) {
|
||||
return <div className="m">{children}</div>;
|
||||
}
|
||||
|
||||
export function MS({ children }) {
|
||||
return <div className="ms">{children}</div>;
|
||||
}
|
||||
|
||||
export function MXS({ children }) {
|
||||
return <div className="mxs">{children}</div>;
|
||||
}
|
||||
|
||||
export function Button({children, href, style = 'jambonz', target = '_blank'}) {
|
||||
const classes = {
|
||||
'btn': true,
|
||||
[`btn--${style}`]: true,
|
||||
};
|
||||
|
||||
return (
|
||||
<Link href={href}>
|
||||
<a target={target} className={classNames(classes)}>{children}</a>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export function Icon({name, size = 24, style = 'inline'}) {
|
||||
const Component = Icons[name];
|
||||
const classes = {
|
||||
'icon': true,
|
||||
[`icon--${style}`]: true,
|
||||
};
|
||||
|
||||
// See react-feather for all 286 icons available
|
||||
// https://github.com/feathericons/react-feather
|
||||
if (!Component) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Circle icon with fill or pill style
|
||||
if (style !== 'inline') {
|
||||
return (
|
||||
<div className={classNames(classes)}>
|
||||
<Component size={size} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Inline SVG icon
|
||||
return <Component size={size} />;
|
||||
}
|
||||
|
||||
export function Layout({children, title = "jambonz"}) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{title}</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="The “bring your own everything” CPaaS"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="/logo192.png" />
|
||||
{/*
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
*/}
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
</Head>
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { P, M, MS, MXS, H1, H2, H3, H4, H5, H6, Button, Icon } from './jambonz-ui';
|
||||
|
||||
export default function Kitofparts() {
|
||||
const text = 'jambonz is a self-hosted, “bring your own everything” open source CPaaS platform, developed by the creator of the drachtio open source sip server.';
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="wrap padr">
|
||||
<div className="pad">
|
||||
<img src="/svg/jambonz.svg" width="128" />
|
||||
</div>
|
||||
<div className="pad">
|
||||
<H5>
|
||||
<div><strong>font</strong></div>
|
||||
<div>Objectivity (free, large family—16 styles)</div>
|
||||
<div> </div>
|
||||
<div><strong>specimen</strong></div>
|
||||
<div>
|
||||
<Link href="https://www.fontsquirrel.com/fonts/objectivity">
|
||||
<a target="_blank">www.fontsquirrel.com/fonts/objectivity</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link href="https://www.behance.net/gallery/60530395/Objectivity-Free-Font-Family">
|
||||
<a target="_blank">www.behance.net/gallery/60530395/Objectivity-Free-Font-Family</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div> </div>
|
||||
<div><strong>icons</strong></div>
|
||||
<div>Feather (free, large set—286 icons)</div>
|
||||
<div> </div>
|
||||
<div><strong>specimen</strong></div>
|
||||
<div>
|
||||
<Link href="https://feathericons.com">
|
||||
<a target="_blank">feathericons.com</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link href="https://github.com/feathericons/react-feather">
|
||||
<a target="_blank">github.com/feathericons/react-feather</a>
|
||||
</Link>
|
||||
</div>
|
||||
</H5>
|
||||
</div>
|
||||
<div className="wrap-text pad">
|
||||
<H1>{text}</H1>
|
||||
</div>
|
||||
<div className="wrap-text pad">
|
||||
<H2>{text}</H2>
|
||||
</div>
|
||||
<div className="wrap-text pad">
|
||||
<H3>{text}</H3>
|
||||
</div>
|
||||
<div className="wrap-text pad">
|
||||
<H4>{text}</H4>
|
||||
</div>
|
||||
<div className="wrap-text pad">
|
||||
<H5>{text}</H5>
|
||||
</div>
|
||||
<div className="wrap-text pad">
|
||||
<H6>{text}</H6>
|
||||
</div>
|
||||
<div className="wrap-text pad">
|
||||
<P>{text}</P>
|
||||
</div>
|
||||
<div className="wrap-text pad">
|
||||
<M>{text}</M>
|
||||
</div>
|
||||
<div className="wrap-text pad">
|
||||
<MS>{text}</MS>
|
||||
</div>
|
||||
<div className="wrap-text pad">
|
||||
<MXS>{text}</MXS>
|
||||
</div>
|
||||
<div className="pad">
|
||||
<Image src="/images/Jambonz_app_screenshot.png" width={1280 / 2} height={842 / 2} />
|
||||
</div>
|
||||
<div className="icons pad">
|
||||
<Icon style="fill" name="Server" />
|
||||
<Icon style="fill" name="PhoneCall" />
|
||||
<Icon style="fill" name="Folder" />
|
||||
<Icon style="fill" name="Cloud" />
|
||||
<Icon style="pill" name="Heart" />
|
||||
</div>
|
||||
<div className="pad">
|
||||
<img src="/svg/drachtio.svg" width="128" />
|
||||
</div>
|
||||
<div className="pad">
|
||||
<Button href="#" target="_blank" style="login">Log In</Button>
|
||||
</div>
|
||||
<div className="pad">
|
||||
<Button href="#" target="_blank">Sign up for free</Button>
|
||||
</div>
|
||||
<div className="pad">
|
||||
<Button href="#" target="_blank" style="dark">Sign up for free</Button>
|
||||
</div>
|
||||
<div className="btns pad">
|
||||
<Button href="https://github.com/jambonz" target="_blank" style="pill">
|
||||
<Icon size={18} name="GitHub" />
|
||||
<span>github.com/jambonz</span>
|
||||
</Button>
|
||||
<Button href="https://github.com/drachtio" target="_blank" style="pill">
|
||||
<Icon size={18} name="GitHub" />
|
||||
<span>github.com/drachtio</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pad bg-jambonz">
|
||||
<div className="wrap padr">
|
||||
<Button href="#" target="_blank" style="light">Sign up for free</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user