Start PlugYourDevice component

src/components/ManagerPage/PlugYourDevice.js

@@ -0,0 +1,33 @@
+// @flow
+
+import React from 'react'
+import { translate } from 'react-i18next'
+
+import type { T } from 'types/common'
+
+import Box, { Card } from 'components/base/Box'
+import Button from 'components/base/Button'
+
+type Props = {
+  t: T,
+}
+
+function PlugYourDevice(props: Props) {
+  const { t } = props
+  return (
+    <Card py={8} align="center">
+      <Box align="center" style={{ width: 365 }}>
+        <Box mb={5}>hey</Box>
+        <Box textAlign="center" mb={1} ff="Museo Sans|Regular" color="dark" fontSize={6}>
+          {t('manager:plugYourDevice.title')}
+        </Box>
+        <Box textAlign="center" mb={5} ff="Open Sans|Regular" color="smoke" fontSize={4}>
+          {t('manager:plugYourDevice.desc')}
+        </Box>
+        <Button primary>{t('manager:plugYourDevice.cta')}</Button>
+      </Box>
+    </Card>
+  )
+}
+
+export default translate()(PlugYourDevice)

src/components/ManagerPage/stories/PlugYourDevice.stories.js

@@ -0,0 +1,18 @@
+// @flow
+
+import React from 'react'
+
+import { storiesOf } from '@storybook/react'
+import { text, select } from '@storybook/addon-knobs'
+import { action } from '@storybook/addon-actions'
+
+import Box from 'components/base/Box'
+import PlugYourDevice from '../PlugYourDevice'
+
+const stories = storiesOf('Components', module)
+
+stories.add('PlugYourDevice', () => (
+  <Box bg="lightGrey" p={6}>
+    <PlugYourDevice />
+  </Box>
+))

static/i18n/en/manager.yml

@@ -3,3 +3,7 @@ tabs:
   device: My device
 install: Install
 allApps: All apps
+plugYourDevice:
+  title: Plug your device
+  desc: Lorem Ipsum is simply dummy text of the printing and typesetting industry’s standard dummy text
+  cta: Plug my device