text: import React from 'react';
  import { withStyles } from '@material-ui/core/styles';
  import Grid from '@material-ui/core/Grid';
  import Typography from '@material-ui/core/Typography';
  import classNames from 'classnames';
  import TabBar from '../../components/TabBar';
  import { thePrimokoDiffernceFields } from '../../metadata';
  
  const styles = (theme) => ({
  	container: {
  		[theme.breakpoints.down('sm')]: {
  			padding: '40px 30px'
  		},
  		[theme.breakpoints.up('md')]: {
  			padding: '86px 60px'
  		},
  		[theme.breakpoints.up('lg')]: {
  			padding: '86px'
  		}
  	},
  	row: {
  		boxShadow: '0 2px 20px 0 rgba(0, 0, 0, 0.15)',
  		padding: '5%',
  		transform: 'translateY(-500px)',
  		backgroundColor: 'white',
  		marginBottom: '-500px'
  	},
  	parallax: {
  		background: `linear-gradient(101deg, #4198ff, #6f73ff)`,
  		minHeight: '500px',
  		backgroundPosition: 'center',
  		backgroundRepeat: 'no-repeat',
  		backgroundSize: 'cover'
  	},
  	title: {
  		[theme.breakpoints.down('sm')]: {
  			...theme.typography.mtitle
  		},
  		[theme.breakpoints.up('sm')]: {
  			...theme.typography.title
  		}
  	},
  	paragraph: {
  		[theme.breakpoints.down('sm')]: {
  			...theme.typography.mparagraph
  		},
  		[theme.breakpoints.up('sm')]: {
  			...theme.typography.paragraph
  		}
  	},
  	space: {
  		marginTop: theme.spacing.unit * 4
  	},
  	image: {
  		height: '50%',
  		width: '100%'
  	}
  });
  
  export default withStyles(styles)(({ classes }) => {
  	return (
  		<React.Fragment>
  			<TabBar fields={thePrimokoDiffernceFields} />
  			<div className={classes.parallax} />
  			<Grid container className={classes.container} justify="center">
  				<Grid className={classes.row} item xs={12} md={12}>
  					<Typography className={classes.title} gutterBottom>
  						Manifesto
  					</Typography>
  					<Typography className={classNames(classes.paragraph, classes.space)} gutterBottom>
  						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
  						labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
  						laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
  						voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  						non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  					</Typography>
  					<Typography className={classNames(classes.paragraph, classes.space)} gutterBottom>
  						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
  						labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
  						laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
  						voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  						non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  					</Typography>
  					<Typography className={classNames(classes.paragraph, classes.space)} gutterBottom>
  						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
  						labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
  						laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
  						voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  						non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  					</Typography>
  					<Typography className={classNames(classes.paragraph, classes.space)} gutterBottom>
  						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
  						labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
  						laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
  						voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  						non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  					</Typography>
  					<Typography className={classNames(classes.paragraph, classes.space)} gutterBottom>
  						— The Primoko team
  					</Typography>
  				</Grid>
  			</Grid>
  		</React.Fragment>
  	);
  });
  