keystone/website/src/pages/components/home/ValueProps2.js

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

import React, { Component } from 'react';
import Container from '../../../../components/Container';
import { Col, Row } from '../../../../components/Grid';
import theme from '../../../../theme';
import { compose } from 'glamor';
import { EntypoTools } from 'react-entypo';

const ValueProp = ({ icon, text, title, text2, marginTop }) => {
	return (
		<div {...compose(styles.base, { marginTop })}>
			{icon && <i {...compose(styles.icon)}>{icon}</i>}
			<div {...compose(styles.content)}>
				<h3 {...compose(styles.title)}>{title}</h3>
				<p {...compose(styles.text)}>{text}</p>
				{text2
					? <p {...compose(styles.text)}>{text2}</p>
					: null}
			</div>
		</div>
	);
};

ValueProp.defaultProps = {
	marginTop: '4em',
};

export default class ValueProps extends Component {
	render () {
		return (
			<div className={compose(styles.wrapper)}>
				<Container>
					<div className={compose(styles.intro)}>
						<h2 className={compose(styles.heading)}>What you build is up to you.</h2>
						<p className={compose(styles.subheading)}>There are a lot of frameworks that make decisions for you, and many that take decisions away.<br />Keystone doesn't do that. Use the features that suit you, and replace the ones that don't.</p>
					</div>
					<div className={compose(styles.divider)}>
						<span className={compose(styles.dividerLine)} />
						<EntypoTools style={{ width: '60px', height: '60px', margin: '0 2rem' }} />
						<span className={compose(styles.dividerLine)} />
					</div>
					<Row small="1" medium="1/2" large="1/4">
						<Col>
							<ValueProp
								title="Built on Express"
								text="Keystone can configure Express for you, or you can take over and treat Keystone like any other Express middleware."
								text2="You can also easily integrate it into an existing Express app."
								marginTop="1em"
							/>
						</Col>
						<Col>
							<ValueProp
								title="Powered by MongoDB"
								text="Keystone uses Mongoose, the leading ODM for Node.js and MongoDB, and gives you a single place for your schema, validation rules, and logic."
								text2="Anything you can build with MongoDB, you can build with Keystone."
								marginTop="1em"
							/>
						</Col>
						<Col>
							<ValueProp
								title="Lightweight and flexible"
								text="Keystone is designed to be as light as you want - you can pick and choose the features you want to include."
								text2="Create your own routes, your own database schema, and use any template language you like."
								marginTop="1em"
							/>
						</Col>
						<Col>
							<ValueProp
								title="Extendable"
								text="One of the greatest things about Node.js is the vast number of quality packages available."
								text2="Keystone is designed to let you use any of them without losing the benefits they provide."
								marginTop="1em"
							/>
						</Col>
					</Row>
				</Container>
			</div>
		);
	}
};

const styles = {
	wrapper: {
		backgroundColor: theme.color.blue,
		color: 'white',
		padding: '4rem 0',
	},
	intro: {
		textAlign: 'center',
	},
	heading: {
		fontSize: '2em',
		color: 'inherit',
	},
	subheading: {
		fontSize: '1.25em',
		color: 'rgba(255,255,255,0.75)',
	},
	divider: {
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'center',
		margin: '3rem 0',
	},
	dividerLine: {
		flex: 1,
		height: 1,
		backgroundColor: 'rgba(255,255,255,0.1)',
	},
	base: {
		display: 'flex',
	},
	content: {
		flexGrow: 1,
	},
	icon: {
		marginRight: '1em',
	},
	title: {
		color: 'inherit',
		margin: 0,
	},
	text: {
		marginTop: '1rem',
	},
	cloud: {
		width: '200px',
		height: '170px',
		color: theme.color.blue,
		marginTop: '-170px',
		position: 'absolute',
		right: '8%',
	},
	rocket: {
		width: '137px',
		height: '140px',
		color: theme.color.blue,
		marginTop: '-220px',
		position: 'absolute',
		left: '8%',
	},
};