redesign product page

src/components/ProductVignette/ProductVignette.js

@@ -1,11 +1,14 @@
 import React, { Component } from 'react';
+import { Link } from 'react-router';
 
 export default class ProductVignette extends Component {
   render() {
     const styles = require('./ProductVignette.styl');
     return (
       <div className={styles.productContainer}>
-        <img src="product.jpg"/>
+        <Link to="/product">
+          <img src="product.jpg"/>
+        </Link>
         <div className={styles.productInfos}>
           <p>Title</p>
         </div>

src/containers/Product/Product.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+
+export default class Product extends Component {
+  render() {
+    const styles = require('./Product.styl');
+    return (
+      <div className={styles.productContainer}>
+
+        <img src="product.jpg"/>
+
+        <div className={styles.mainInformations}>
+
+          <div className={styles.mainInformationsLeft}>
+            <h3>Brand</h3>
+            <h3>Price</h3>
+          </div>
+
+          <div className={styles.mainInformationsRight}>
+            <p>Nike</p>
+            <p>120$</p>
+          </div>
+
+        </div>
+
+        <div className={styles.additionalInformations}>
+          <p>Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, ut augeretur sublimibus incrementis, foedere pacis aeternae Virtus convenit atque Fortuna plerumque dissidentes, quarum si altera defuisset, ad perfectam non venerat summitatem.</p>
+        </div>
+
+      </div>
+    );
+  }
+}
+
+/* OLD TEST
+<div className={styles.productContainer}>
+  <img src="product.jpg"/>
+  <div className={styles.productInfos}>
+    <h1>Title</h1>
+    <h2>Price</h2>
+    <div className={styles.productDescription}>
+      <p>Description : Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, ut augeretur sublimibus incrementis, foedere pacis aeternae Virtus convenit atque Fortuna plerumque dissidentes, quarum si altera defuisset, ad perfectam non venerat summitatem.</p>
+    </div>
+  </div>
+</div>
+*/

src/containers/index.js

@@ -2,7 +2,7 @@ export App from './App/App';
 export Market from './Market/Market';
 export Signup from './Signup/Signup';
 export Login from './Login/Login';
-// export Product from './Product/Product';
+export Product from './Product/Product';
 export Profile from './Profile/Profile';
 export Admin from './Admin/Admin';
 export NotFound from './NotFound/NotFound';

src/routes.js

@@ -12,6 +12,7 @@ import {
   Admin,
   Panel,
   Users,
+  Product,
   Products,
   NotFound
 } from './containers';
@@ -72,6 +73,7 @@ export default function(store) {
         <IndexRoute component={Profile}/>
         <Route path="orders" component={Orders}/>
       </Route>
+      <Route path="product" component={Product} onEnter={requireAuth}/>
       <Route path="admin" component={Admin} onEnter={requireAdmin}>
         <IndexRoute component={Panel}/>
         <Route path="users" component={Users}/>