(Guillermo) info card add components [skip ci]

client/src/app/main/main-home/main-home-page-portal.js

@@ -1,15 +1,21 @@
 import React from 'react';
 import classNames from 'classnames';
 
+
 import Widget from 'core-components/widget';
+import Card from 'core-components/card';
+import i18n from 'lib-app/i18n';
 
 class MainHomePagePortal extends React.Component {
     render() {
         return (
             <Widget className={classNames('main-home-page-portal', this.props.className)}>
-                support portal
+                <Card title={i18n('TICKETS')} description={i18n('TICKETS_DESCRIPTION')} icon="ticket" color="red"/>
+                <Card title={i18n('ARTICLES')} description={i18n('ARTICLES_DESCRIPTION')} icon="book" color="blue"/>
+                <Card title={i18n('ACCOUNT')} description={i18n('ACCOUNT_DESCRIPTION')} icon="user" color="green"/>
             </Widget>
         );
+
     }
 }
 

client/src/core-components/card.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Icon from 'core-components/icon';
+import classNames from 'classnames';
+
+class Card extends React.Component{
+    static propTypes = {
+        description: React.PropTypes.string,
+        title: React.PropTypes.string,
+        icon: React.PropTypes.string,
+        color: React.PropTypes.string
+    };
+    
+    render(){
+        return(
+            <div className={this.getClass()}>
+                <div className="card__icon"><Icon name={this.props.icon} size="5x"/></div>
+                <div className="card__title">{this.props.title}</div>
+                <div className="card__description">{this.props.description}</div>
+            </div>
+        )
+    }
+    getClass(){
+        var classes = {
+            'card': true,
+            'card_red': (this.props.color === 'red'),
+            'card_blue': (this.props.color === 'blue'),
+            'card_green': (this.props.color === 'green')
+        };
+        return classNames(classes);
+    }
+}
+export default Card;

client/src/core-components/card.scss

@@ -0,0 +1,26 @@
+@import "../scss/vars";
+
+.card{
+  padding: 15px;
+  width: 200px;
+  height: 260px;
+  color: white;
+  display: inline-block;
+  margin-right: 10px;
+  border-radius: 4px;
+  &__title{
+    font-variant: small-caps;
+    font-size: 20px;
+  }
+  &__description{
+  }
+  &_red{
+    background-color: $primary-red;
+  }
+  &_blue{
+    background-color: $secondary-blue;
+  }
+  &_green{
+    background-color: $primary-green;
+  }
+}

client/src/data/languages/en.js

@@ -1,5 +1,8 @@
 export default {
     'WELCOME': 'Welcome',
+    'TICKETS': 'Tickets',
+    'ARTICLES': 'Articles',
+    'ACCOUNT': 'Account',
     'SUBMIT': 'Submit',
     'LOG_IN': 'Log in',
     'SIGN_UP': 'Sign up',
@@ -16,6 +19,9 @@ export default {
     'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.',
     'TICKET_LIST': 'Ticket List',
     'TICKET_LIST_DESCRIPTION': 'Here you can find a list of all tickets you have sent to our support team.',
+    'TICKETS_DESCRIPTION': 'A  random  text  about    tickets',
+    'ARTICLES_DESCRIPTION': 'A random text about articles',
+    'ACCOUNT_DESCRIPTION': 'A random text about account',
 
     //ERRORS
     'EMAIL_NOT_EXIST': 'Email does not exist',

client/src/scss/_vars.scss

@@ -5,6 +5,7 @@ $secondary-red: #FB6362;
 $primary-blue: #414A59;
 $secondary-blue: #20B8c5;
 
+$primary-green: #82CA9C;
 $light-grey: #EEEEEE;
 $grey: #E7E7E7;
 $medium-grey: #D9D9D9;