2018-06-19 17:54:44 +03:00
|
|
|
import React from 'react'
|
|
|
|
import { Link } from 'react-router-dom'
|
|
|
|
import styled from 'styled-components'
|
|
|
|
import {
|
|
|
|
Container,
|
|
|
|
Box,
|
|
|
|
Flex,
|
|
|
|
Caps,
|
|
|
|
Heading,
|
|
|
|
Text,
|
|
|
|
Button,
|
|
|
|
Pre,
|
|
|
|
} from 'rebass'
|
|
|
|
import { Logo } from '@compositor/logo'
|
|
|
|
|
|
|
|
const Video = styled.video([], {
|
|
|
|
display: 'block',
|
|
|
|
maxWidth: '100%',
|
|
|
|
height: 'auto',
|
|
|
|
borderRadius: '16px',
|
|
|
|
})
|
|
|
|
|
2018-06-24 05:43:11 +03:00
|
|
|
const features = [
|
|
|
|
'Zero-config',
|
|
|
|
'No plugins',
|
|
|
|
'Components over configuration',
|
|
|
|
'Use markdown, MDX, or React components',
|
|
|
|
'Automatic file-system based routing',
|
|
|
|
'Completely customizable',
|
|
|
|
'Static-site generator',
|
|
|
|
'Isolated development environment',
|
|
|
|
]
|
|
|
|
|
2018-06-19 17:54:44 +03:00
|
|
|
export default class extends React.Component {
|
2018-06-22 22:25:54 +03:00
|
|
|
static defaultProps = {
|
2018-06-24 02:34:13 +03:00
|
|
|
name: 'Home',
|
2018-06-22 22:25:54 +03:00
|
|
|
layout: 'landing'
|
|
|
|
}
|
|
|
|
|
2018-06-19 17:54:44 +03:00
|
|
|
render () {
|
|
|
|
return (
|
|
|
|
<React.Fragment>
|
|
|
|
<Container py={5}>
|
2018-06-24 03:50:28 +03:00
|
|
|
<Box mb={3}>
|
2018-06-19 17:54:44 +03:00
|
|
|
<Video
|
|
|
|
autoPlay
|
|
|
|
loop
|
|
|
|
muted
|
|
|
|
playsInline
|
|
|
|
poster='hello-x0.gif'
|
|
|
|
src='hello-x0.mp4'
|
|
|
|
/>
|
|
|
|
</Box>
|
2018-06-24 03:50:28 +03:00
|
|
|
<Heading
|
|
|
|
is='h1'
|
|
|
|
mb={4}
|
|
|
|
lineHeight={1.125}
|
|
|
|
fontWeight='bold'
|
|
|
|
fontSize={[ 4, 5, 6 ]}>
|
|
|
|
x0:
|
|
|
|
Document & develop React components without breaking a sweat
|
|
|
|
</Heading>
|
2018-06-19 17:54:44 +03:00
|
|
|
<Pre>npm i -g @compositor/x0</Pre>
|
|
|
|
<Flex py={4}>
|
|
|
|
<Button
|
|
|
|
is='a'
|
|
|
|
px={4}
|
|
|
|
py={3}
|
|
|
|
bg='black'
|
|
|
|
href='https://github.com/c8r/x0'>
|
|
|
|
GitHub
|
|
|
|
</Button>
|
|
|
|
<Box mx={1} />
|
|
|
|
<Button
|
|
|
|
is={Link}
|
|
|
|
px={4}
|
|
|
|
py={3}
|
|
|
|
bg='black'
|
2018-06-24 02:34:13 +03:00
|
|
|
to='/getting-started'>
|
2018-06-19 17:54:44 +03:00
|
|
|
Documentation
|
|
|
|
</Button>
|
|
|
|
</Flex>
|
|
|
|
</Container>
|
2018-06-24 05:43:11 +03:00
|
|
|
<Container py={5}>
|
|
|
|
<Flex flexWrap='wrap' mx={-3}>
|
|
|
|
{features.map(feat => (
|
|
|
|
<Box key={feat} width={[ 1, 1, 1/2 ]} p={3}>
|
|
|
|
<Text fontWeight='bold'>
|
|
|
|
{feat}
|
|
|
|
</Text>
|
|
|
|
</Box>
|
|
|
|
))}
|
|
|
|
</Flex>
|
|
|
|
</Container>
|
2018-06-19 17:54:44 +03:00
|
|
|
</React.Fragment>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|