ligo/gitlab-pages/website/pages/en/index.js
2020-01-23 09:20:42 -05:00

101 lines
2.6 KiB
JavaScript

const React = require('react');
const MarkdownBlock = require('../../core/CompLibrary').MarkdownBlock;
const CodeExamples = require(`${process.cwd()}/core/CodeExamples`);
const docUrl = require(`${process.cwd()}/core/UrlUtils`).docUrl;
const FEATURES = [
{
image: 'img/strong-type-system.svg',
title: 'Strong Type System',
content: 'Write types, then code. Benefit from the safety of type systems.'
},
{
image: 'img/syntax-agnostic.svg',
title: 'Syntax Agnostic',
content:
'Code in your language. Write PascaLIGO, CameLIGO, or add your own syntax.'
},
{
image: 'img/easy-integration.svg',
title: 'Easy Integration',
content: 'You can use LIGO as a NodeJS library with Granary'
}
];
const PARTNERS = [
{
name: 'Nomadic Labs',
image: 'img/nomadic-logo.png',
link: 'https://www.nomadic-labs.com/',
pinned: true
},
{
name: 'Tocqueville Group',
image: 'img/tq-logo.svg',
link: 'https://tqgroup.io/',
pinned: true
},
{
name: 'Stove Labs',
image: 'img/stove-logo.png',
link: 'https://stove-labs.com',
pinned: true
}
];
const Feature = (config, props) => (
<div className="feature" key={props.title}>
<img src={`${config.baseUrl}${props.image}`} />
<h1>{props.title}</h1>
<p>{props.content}</p>
</div>
);
const Partner = (config, props) => (
<a
href={props.link}
title={props.name}
target="_blank"
rel="noopener noreferrer"
>
<img src={`${config.baseUrl}${props.image}`} />
</a>
);
module.exports = props => {
return (
<div id="homePage">
<div id="intro" className="centered">
<div id="callToAction">
<ul>
<li className="primary">
<a href="https://ide.ligolang.org">Try Online</a>
</li>
<li className="secondary">
<a href={docUrl(props.config, 'intro/installation')}>Install</a>
</li>
</ul>
</div>
<div id="preview">
<h1>A friendly smart contract language for Tezos</h1>
<p>Michelson was never so easy</p>
<CodeExamples MarkdownBlock={MarkdownBlock}></CodeExamples>
</div>
</div>
<div id="features" className="centered">
{FEATURES.map(entry => Feature(props.config, entry))}
</div>
<div id="partners">
<div className="centered wrapper">
<span id="heading">Our Partners</span>
<div id="list">
{PARTNERS.filter(entry => entry.pinned).map(entry =>
Partner(props.config, entry)
)}
</div>
</div>
</div>
</div>
);
};