feat(home): implement top banner

Author: epiqueras

src/assets/icons/underline.svg

@@ -0,0 +1,37 @@
+import { Card, Col, Row } from 'antd'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { ReactComponent as Underline } from '../assets/icons/underline.svg'
+import styled from 'styled-components/macro'
+
+const StyledRow = styled(Row)`
+  line-height: 32px;
+`
+const StyledTitleCol = styled(Col)`
+  font-weight: bold;
+`
+const StyledUnderline = styled(Underline)`
+  bottom: -8px;
+  left: 0;
+  position: absolute;
+`
+const TopBanner = ({ description, extra, title }) => (
+  <Card>
+    <StyledRow>
+      <StyledTitleCol offset={2} span={6}>
+        {title}
+        <StyledUnderline className="primary" />
+      </StyledTitleCol>
+      <Col span={12}>{description}</Col>
+      <Col span={4}>{extra}</Col>
+    </StyledRow>
+  </Card>
+)
+
+TopBanner.propTypes = {
+  description: PropTypes.string.isRequired,
+  extra: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired
+}
+
+export default TopBanner

src/components/top-banner.js

@@ -1 +1,15 @@
-export default () => 'Home'
+import { Button } from 'antd'
+import React from 'react'
+import TopBanner from '../components/top-banner'
+
+export default () => (
+  <TopBanner
+    description="Get started by buying PNK if you don't have any already."
+    extra={
+      <Button size="large" type="primary">
+        Buy PNK
+      </Button>
+    }
+    title="Welcome to the Kleros Juror Dashboard!"
+  />
+)