added component CardPopup + added route for WIP component + begin integration of Home component

src/component/HomepageCard/HomepageCard.jsx

-import React, { Component } from 'react'
-import LogoHomepage from '../../img/logoHeader.svg'
-
-class HomepageCard extends Component {
-  render () {
-    return (
-      <div className='card homepagecard'>
-        <div className='card-body homepagecard__body'>
-          <div className='homepagecard__title text-center my-4'>
-            Bienvenue sur Tracim
-          </div>
-          <div className='homepagecard__thanks text-center'>
-            Merci de nous faire confiance et d'utiliser notre outil collaboratif
-          </div>
-          <div className='homepagecard__delimiter delimiter' />
-          <div className='homepagecard__text text-center mb-5'>
-            Vous allez créez votre premier espace de travail
-          </div>
-          <div className='homepagecard__btn btn btn-outline-primary'>
-            Créer votre espace de travail
-          </div>
-          <div className='homepagecard__logo mt-5 mb-3'>
-            <img src={LogoHomepage} alt='logo homepage' />
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default HomepageCard

src/component/common/CardPopup/CardPopup.jsx

+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+require('./CardPopup.styl')
+
+const CardPopup = props => {
+  return (
+    <div className={classnames(props.customClass, 'cardPopup')}>
+      <div className='cardPopup__container'>
+        <div className='cardPopup__header' />
+
+        <div className='nopadding'>
+          <div className='cardPopup__close' onClick={props.onClose}>
+            <i className='fa fa-times' />
+          </div>
+
+          <div className='cardPopup__body'>
+            <div className='cardPopup__body__icon'>
+              <i className={props.icon} />
+            </div>
+
+            <div className='cardPopup__body__text'>
+              <div className='cardPopup__body__text__title'>
+                {props.title}
+              </div>
+              <div className='cardPopup__body__text__message'>
+                {props.message}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CardPopup
+
+CardPopup.propTypes = {
+  customClass: PropTypes.string,
+  title: PropTypes.string,
+  message: PropTypes.string,
+  icon: PropTypes.string,
+  onClose: PropTypes.func
+}
+
+CardPopup.defaultProps = {
+  customClass: 'defaultCustomClass',
+  title: 'Default title',
+  message: 'Default message',
+  icon: 'fa fa-times-circle',
+  onClose: () => {}
+}

src/component/common/CardPopup/CardPopup.styl

+@import '../../../css/Variable.styl'
+
+.cardPopup
+  position fixed
+  display flex
+  justify-content center
+  width 100%
+  z-index 10
+  &__container
+    margin-top 50px
+    border 0
+    border-radius 10px
+    width 800px
+    background lightGrey
+    box-shadow shadow-all
+  &__header
+    border-top-right-radius 10px
+    border-top-left-radius 10px
+    width 100%
+    height 8px
+  &__close
+    display flex
+    justify-content flex-end
+    margin 5px
+    cursor pointer
+  &__body
+    display flex
+    align-items center
+    margin 10px 0 25px 0
+    &__icon
+      padding 0 30px
+      font-size 40px
+    &__text
+      &__title
+        font-size 20px
+        font-weight 600
+      &__message
+        padding-right 20px
+        font-weight 500

src/container/Home.jsx

-import React from 'react'
-import { connect } from 'react-redux'
+import React, { Component } from 'react'
+import Card from '../component/common/Card/Card.jsx'
+import CardHeader from '../component/common/Card/CardHeader.jsx'
+import CardBody from '../component/common/Card/CardBody.jsx'
+import LogoHomepage from '../img/logoHeader.svg'
 
-class Home extends React.Component {
+class Home extends Component {
   render () {
-    const { user } = this.props
     return (
-      <div>
-        Home.<br />
-        User logged in : {user.logged.toString()}
-      </div>
+      <section className='homepage'>
+        <div className='container-fluid nopadding'>
+          <Card customClass='homepagecard'>
+            <CardHeader /> {/* @TODO fix architecture of this component */}
+            <CardBody customClass='homepagecard'>
+              <div>
+                <div className='homepagecard__title text-center my-4'>
+                  Bienvenue sur Tracim
+                </div>
+                <div className='homepagecard__thanks text-center'>
+                  Merci de nous faire confiance et d'utiliser notre outil collaboratif
+                </div>
+                <div className='homepagecard__delimiter delimiter' />
+                <div className='homepagecard__text text-center mb-5'>
+                  Vous allez créez votre premier espace de travail
+                </div>
+                <div className='homepagecard__btn btn btn-outline-primary'>
+                  Créer votre espace de travail
+                </div>
+                <div className='homepagecard__logo mt-5 mb-3'>
+                  <img src={LogoHomepage} alt='logo homepage' />
+                </div>
+              </div>
+            </CardBody>
+          </Card>
+        </div>
+      </section>
     )
   }
 }
 
-const mapStateToProps = ({ user }) => ({ user })
-export default connect(mapStateToProps)(Home)
+export default Home

src/container/Homepage.jsx

-import React, { Component } from 'react'
-import HomepageCard from '../Component/HomepageCard/HomepageCard.jsx'
-
-class Homepage extends Component {
-  render () {
-    return (
-      <section className='homepage'>
-        <div className='container-fluid nopadding'>
-          <HomepageCard />
-        </div>
-      </section>
-    )
-  }
-}
-
-export default Homepage

src/container/PopupCreateContainer.jsx

 import React, { Component } from 'react'
-import GenericContent from '../Component/PopupContent/GenericContent.jsx'
-import FileContent from '../Component/PopupContent/FileContent.jsx'
-import WksContent from '../Component/PopupContent/WksContent.jsx'
+// import GenericContent from '../component/PopupContent/GenericContent.jsx'
+import FileContent from '../component/PopupContent/FileContent.jsx'
+// import WksContent from '../component/PopupContent/WksContent.jsx'
 
 class PopupCreateContainer extends Component {
   render () {
         <div className='popupcontent__container card'>
           <div className='popupcontent__container__header' />
           <div className='card-body nopadding'>
-            <FileContent />
+            <div className='filecontent p-3'>
+              <div className='filecontent__close d-flex justify-content-end'>
+                <i className='fa fa-times' />
+              </div>
+              <div className='filecontent__contentname d-flex align-items-center mb-4'>
+                <div className='filecontent__contentname__icon mr-3'>
+                  <i className='fa fa-file-text-o' />
+                </div>
+                <div className='filecontent__contentname__title'>
+                  Fichier de prévisualisation
+                </div>
+              </div>
+
+              <div className='filecontent__text'>Importer votre fichier :</div>
+              <div className='filecontent__form mb-4' drop='true'>
+                <div className='filecontent__form__icon d-flex justify-content-center'>
+                  <label htmlFor='filecontentUpload' type='file'>
+                    <i className='fa fa-download' />
+                  </label>
+                  <input type='file' className='d-none' id='filecontentUpload' />
+                </div>
+                <div className='filecontent__form__instruction text-center'>
+                  Glisser votre fichier ici
+                </div>
+                <div className='filecontent__form__text text-center'>
+                  Vous pouvez également importer votre fichier en cliquant sur l'icon
+                </div>
+              </div>
+              <div className='filecontent__button d-flex justify-content-end'>
+                <button className='filecontent__form__button btn btn-outline-primary'>
+                  Créer et Valider
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </div>

src/container/Tracim.jsx

 import Account from './Account.jsx'
 import FlashMessage from '../component/FlashMessage.jsx'
 import WorkspaceContent from './WorkspaceContent.jsx'
+import WIPcomponent from './WIPcomponent.jsx'
 import {
   Route,
   withRouter
               <PrivateRoute path={`${PAGE_NAME.WS_CONTENT}/:idws/:filter?`} component={WorkspaceContent} />
               <PrivateRoute exact path={PAGE_NAME.ACCOUNT} component={Account} />
               <PrivateRoute exact path={PAGE_NAME.DASHBOARD} component={Dashboard} />
+              <PrivateRoute path={'/wip/:cp'} component={WIPcomponent} />
 
               <Footer />
             </div>

src/container/WIPcomponent.jsx

+import React from 'react'
+import { connect } from 'react-redux'
+import PopupCreateContainer from './PopupCreateContainer.jsx'
+import ProgressBar from './ProgressBar.jsx'
+import Home from './Home.jsx'
+import CardPopup from '../component/common/CardPopup/CardPopup.jsx'
+
+export class WIPcomponent extends React.Component {
+  render () {
+    const MyComponent = {
+      PopupCreateContainer,
+      ProgressBar,
+      Home,
+      CardPopup
+    }
+
+    // this.props.dispatch(newFlashMessage('TEST', 'info', 0))
+
+    const ComponentToDisplay = MyComponent[this.props.match.params.cp]
+
+    return (
+      <div>
+        <ComponentToDisplay />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = () => ({})
+export default connect(mapStateToProps)(WIPcomponent)