feat(welcome-card): start work

Author: epiqueras

src/assets/images/dark-logo.svg

@@ -0,0 +1,36 @@
+import { Card } from 'antd'
+import PropTypes from 'prop-types'
+import React from 'react'
+import styled from 'styled-components/macro'
+
+const StyledCardGrid = styled(Card.Grid)`
+  align-items: center;
+  display: flex;
+  height: 325px;
+  justify-content: center;
+`
+const StyledIconCardGrid = styled(StyledCardGrid)`
+  border-radius: 12px;
+  width: 393px;
+`
+const StyledTextCardGrid = styled(StyledCardGrid)`
+  border-radius: 0 12px 12px 0;
+  width: 413px;
+`
+const WelcomeCard = ({ icon, text, version }) => (
+  <Card>
+    <StyledIconCardGrid>
+      {icon}
+      {version}
+    </StyledIconCardGrid>
+    <StyledTextCardGrid>{text}</StyledTextCardGrid>
+  </Card>
+)
+
+WelcomeCard.propTypes = {
+  icon: PropTypes.node.isRequired,
+  text: PropTypes.string.isRequired,
+  version: PropTypes.string.isRequired
+}
+
+export default WelcomeCard

src/components/welcome-card.js

@@ -1,15 +1,25 @@
 import { Button } from 'antd'
+import { ReactComponent as DarkLogo } from '../assets/images/dark-logo.svg'
 import React from 'react'
 import TopBanner from '../components/top-banner'
+import WelcomeCard from '../components/welcome-card'
+import { version } from '../../package.json'
 
 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!"
-  />
+  <>
+    <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!"
+    />
+    <WelcomeCard
+      icon={<DarkLogo />}
+      text="Welcome"
+      version={`Athena release ${version}`}
+    />
+  </>
 )