Design first block dashboard

packages/strapi-admin/admin/src/components/Sub/index.js

@@ -17,27 +17,23 @@ function Sub({ content, title, underline }) {
       <FormattedMessage {...title}>
         {message => <span className={cn(underline && styles.underlinedTitle)}>{message}</span>}
       </FormattedMessage>
-      <FormattedMessage {...content}>{message => <p>{message}</p>}</FormattedMessage>
+      {content()}
     </div>
   );
 }
 
 Sub.defaultProps = {
-  content: {
-    id: 'app.utils.defaultMessage',
-    defaultMessage: 'app.utils.defaultMessage',
-    values: {},
-  },
+  content: () => '',
   title: {
     id: 'app.utils.defaultMessage',
     defaultMessage: 'app.utils.defaultMessage',
     values: {},
   },
-  underline: true,
+  underline: false,
 };
 
 Sub.propTypes = {
-  content: PropTypes.object,
+  content: PropTypes.func,
   title: PropTypes.object,
   underline: PropTypes.bool,
 };

packages/strapi-admin/admin/src/components/Sub/styles.scss

@@ -1,4 +1,5 @@
 .subWrapper {
+  position: relative;
   line-height: 18px;
   > span {
     font-family: Lato-Bold;
@@ -6,6 +7,14 @@
     color: #333740;
     letter-spacing: 0;
   }
+
+  p {
+    display: block;
+    max-width: 550px;
+    margin-top: 18px;
+    color: #333740;
+    font-size: 14px;
+  }
 }
 
 

packages/strapi-admin/admin/src/containers/HomePage/CreateContent.js

@@ -0,0 +1,26 @@
+/**
+ *
+ * CreateContent
+ *
+ */
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+function CreateContent() {
+  return (
+    <FormattedMessage id="app.components.HomePage.createBlock.content.first">
+      {message => (
+        <p>
+          {message}
+          <span style={{ fontStyle: 'italic', fontWeight: '500' }}>Content Type Builder</span>
+          <FormattedMessage id="app.components.HomePage.createBlock.content.second" />
+          <span style={{ fontStyle: 'italic', fontWeight: '500' }}>"Quick Start"</span>
+          <FormattedMessage id="app.components.HomePage.createBlock.content.tutorial" />
+        </p>
+      )}
+    </FormattedMessage>
+  );
+}
+
+export default CreateContent;

packages/strapi-admin/admin/src/containers/HomePage/WelcomeContent.js

@@ -0,0 +1,31 @@
+/**
+ *
+ * WelcomeContent
+ *
+ */
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import styles from './styles.scss';
+
+/* eslint-disable jsx-a11y/accessible-emoji */
+function WelcomeContent() {
+  return (
+    <React.Fragment>
+      <div className={styles.iconWave}>👋</div>
+      <FormattedMessage id="app.components.HomePage.welcomeBlock.content">
+        {message => (
+          <p style={{ marginBottom: '50px' }}>
+            {message}
+            <span style={{ color: '#005FEA' }}>Slack</span>
+            <FormattedMessage id="app.components.HomePage.welcomeBlock.content.raise" />
+            <FormattedMessage id="app.components.HomePage.welcomeBlock.content.issues">{message => <span style={{ color: '#005FEA' }}>{message}</span>}</FormattedMessage>
+          </p>
+        )}
+      </FormattedMessage>
+    </React.Fragment>
+  );
+}
+
+export default WelcomeContent;

packages/strapi-admin/admin/src/containers/HomePage/index.js

@@ -12,10 +12,29 @@ import Helmet from 'react-helmet';
 import cn from 'classnames';
 
 import Block from 'components/HomePageBlock/Loadable';
+import Button from 'components/Button';
 import Sub from 'components/Sub/Loadable';
 
+import WelcomeContent from './WelcomeContent';
+import CreateContent from './CreateContent';
+
 import styles from './styles.scss';
 
+const FIRST_BLOCK = [
+  {
+    title: {
+      id: 'app.components.HomePage.welcome',
+    },
+    content: () => <WelcomeContent />,
+  },
+  {
+    title: {
+      id: 'app.components.HomePage.create',
+    },
+    content: () => <CreateContent />,
+  },
+];
+
 export class HomePage extends React.Component { // eslint-disable-line react/prefer-stateless-function
   render() {
     return (
@@ -24,7 +43,8 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
         <div className="row">
           <div className="col-md-9 col-lg-9">
             <Block>
-              <Sub />
+              {FIRST_BLOCK.map((value, key) => <Sub key={key} {...value} underline={key === 0} />)}
+              <Button className={styles.homePageTutorialButton} primary>START THE QUICK TUTORIAL</Button>
             </Block>
           </div>
           <div className="col-lg-3 col-md-3">

packages/strapi-admin/admin/src/containers/HomePage/styles.scss

@@ -5,6 +5,35 @@
   }
 }
 
+.homePageTutorialButton {
+  position: relative;
+  min-width: 292px;
+  height: 34px;
+  padding-left: 40px;
+  padding-right: 20px;
+  font-size: 13px;
+  font-weight: 800;
+  letter-spacing: 0.46px;
+  text-align: left;
+  &:before {
+    content: '\f105';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 20px;
+    font-size: 22px;
+    margin-right: 10px;
+    font-family: 'FontAwesome';
+  }
+}
+
+.iconWave {
+  position: absolute;
+  top: 24px;
+  right: 0px;
+  font-size: 60px;
+}
+
 // TODO delete
 
 .wrapper {

packages/strapi-admin/admin/src/translations/en.json

@@ -12,7 +12,14 @@
   "app.components.HomePage.description.part1": "We are happy to have you as one of our users!",
   "app.components.HomePage.description.part2": "You are now a member of our community which will help you building your dream app.",
   "app.components.HomePage.button": "Create your first Content Type",
+  "app.components.HomePage.create": "Create your first Content Type",
   "app.components.HomePage.feedback": "Feel free to ask questions or give us feedback by using one of the support channels below.",
+  "app.components.HomePage.welcomeBlock.content": "We are happy to have you as one of community member. We are constantly looking for feedback so feel free to send us DM on\u0020",
+  "app.components.HomePage.welcomeBlock.content.issues": "issues",
+  "app.components.HomePage.welcomeBlock.content.raise": "\u0020or raise\u0020",
+  "app.components.HomePage.createBlock.content.first": "The\u0020",
+  "app.components.HomePage.createBlock.content.second": "\u0020plugin will help you to define the data structure of your models. If you’re new here, we highly recommend you to follow our\u0020",
+  "app.components.HomePage.createBlock.content.tutorial": "\u0020tutorial.",
 
   "app.components.InputFile.newFile": "Add new file",
   "app.components.InputFileDetails.open": "Open in a new tab",
@@ -104,7 +111,7 @@
   "components.Input.error.custom-error": "{errorMessage} ",
 
   "components.ListRow.empty": "There is no data to be shown.",
-  
+
   "notification.error": "An error occurred",
 
   "Users & Permissions": "Users & Permissions",

packages/strapi-helper-plugin/lib/src/components/Button/index.js

@@ -15,7 +15,7 @@ import styles from './styles.scss';
 /* eslint-disable react/require-default-props */
 function Button(props) {
   const buttonProps = Object.assign({}, props);
-  const propsToDelete = ['loader', 'primary', 'primaryAddShape', 'secondary', 'secondaryHotline', 'secondaryHotlineAdd', 'kind', 'labelValues'];
+  const propsToDelete = ['loader', 'primary', 'primaryAddShape', 'secondary', 'secondaryHotline', 'secondaryHotlineAdd', 'kind', 'labelValues', 'className'];
 
   propsToDelete.map((value) => delete buttonProps[value]);