Add page component

package.json

@@ -43,7 +43,9 @@
     "react-apollo": "^2.3.1",
     "react-dom": "^16.6.1",
     "react-dropzone": "^5.1.0",
-    "react-image-cropper": "^1.3.0"
+    "react-helmet": "^5.2.0",
+    "react-image-cropper": "^1.3.0",
+    "react-router": "^4.3.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.1.5",

src/page/index.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Typography from '@material-ui/core/Typography'
+import { withStyles } from '@material-ui/core/styles'
+
+import Card from '@material-ui/core/Card'
+import CardContent from '@material-ui/core/CardContent'
+
+const styles = theme => ({
+  card: {
+    display: 'flex',
+    width: '100%',
+    margin: '1.5em',
+    padding: '3em'
+  },
+  cardDetails: {
+    display: 'flex',
+    flex: 1
+  },
+  cardContent: {
+    flex: 1
+  }
+})
+
+export const MessageCard = ({ classes, message, children }) => (
+  <Card className={classes.card}>
+    <div className={classes.cardDetails}>
+      <CardContent className={classes.cardContent}>
+        <Typography variant='h5' align='center' gutterBottom>
+          {message}
+        </Typography>
+        {children}
+      </CardContent>
+    </div>
+  </Card>
+)
+
+MessageCard.propTypes = {
+  children: PropTypes.node,
+  classes: PropTypes.object.isRequired,
+  message: PropTypes.string
+}
+
+export default withStyles(styles)(MessageCard)

src/page/stories/page.stories.js

@@ -0,0 +1,11 @@
+/* eslint react/prop-types: 0 */
+import React from 'react'
+
+import { storiesOf } from '@storybook/react'
+import { withKnobs, text } from '@storybook/addon-knobs'
+
+import MessageCard from '../index'
+
+storiesOf('MessageCard', module)
+  .addDecorator(withKnobs)
+  .add('with text', () => <MessageCard message={text('Message', 'This is a message')} />)