From f754251622cf73daff3a7909da1c31c12c88a78f Mon Sep 17 00:00:00 2001
From: AntonyAntonio <guillermo@opensupports.com>
Date: Wed, 24 Aug 2016 17:59:18 -0300
Subject: [PATCH] (Guillermo)  info card add components  [skip ci]

---
 .../main/main-home/main-home-page-portal.js   |  8 ++++-
 client/src/core-components/card.js            | 32 +++++++++++++++++++
 client/src/core-components/card.scss          | 26 +++++++++++++++
 client/src/data/languages/en.js               |  6 ++++
 client/src/scss/_vars.scss                    |  1 +
 5 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 client/src/core-components/card.js
 create mode 100644 client/src/core-components/card.scss

diff --git a/client/src/app/main/main-home/main-home-page-portal.js b/client/src/app/main/main-home/main-home-page-portal.js
index 311c5c8f..43261fe5 100644
--- a/client/src/app/main/main-home/main-home-page-portal.js
+++ b/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>
         );
+
     }
 }
 
diff --git a/client/src/core-components/card.js b/client/src/core-components/card.js
new file mode 100644
index 00000000..6022fb6b
--- /dev/null
+++ b/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;
diff --git a/client/src/core-components/card.scss b/client/src/core-components/card.scss
new file mode 100644
index 00000000..c978dc07
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js
index 940b4baf..ece39332 100644
--- a/client/src/data/languages/en.js
+++ b/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',
diff --git a/client/src/scss/_vars.scss b/client/src/scss/_vars.scss
index bf22c61c..956a56d9 100644
--- a/client/src/scss/_vars.scss
+++ b/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;