Add products and categories mock

client/css/products.css

@@ -0,0 +1,21 @@
+ul.categories {
+    list-style: none;
+    text-align: center;
+}
+
+li.category {
+    display: inline-block;
+    padding: 0px 20px;
+}
+
+li.category > a {
+    text-decoration: none;
+    text-transform: uppercase;
+    color: #4a4a4a;
+    opacity: 0.8;
+    transition: ease-in 0.5s;
+}
+
+li.category > a:hover {
+    opacity: 1
+}

client/index.html

@@ -24,6 +24,7 @@
     <link rel="stylesheet" href="css/skeleton.css">
     <link rel="stylesheet" href="css/styles.css">
     <link rel="stylesheet" href="css/timeline.css">
+    <link rel="stylesheet" href="css/products.css">
     <link href='https://api.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.css' rel='stylesheet' />
 
     <!-- Favicon
@@ -116,10 +117,30 @@
                             ética, seriedad y apoyo constante para un perfecto resultado.</p>
                     </div>
                 </div>
+
+                <ul class="categories">
+                    <li v-for="category in categories" class="category">
+                        <router-link :to="'/productos/' + category.path">{{category.name}}</router-link>
+                    </li>
+                </ul>
+                <router-view></router-view>
             </div>
         </div>
     </template>
 
+    <template id="category">
+        <div class="row">
+            <h5>{{ category }}</h5>
+            <ul>
+                <li v-for="product in products">
+                    <img v-bind:src="product.img" v-bind:alt="product.name">
+                    <span>{{ product.name }}</span>
+                    <p>{{ product.shortDescription }}</p>
+                </li>
+            </ul>
+        </div>
+    </template>
+
     <script src="js/main.js"></script>
 
 </body>

client/js/main.js

@@ -43,7 +43,13 @@ var productos = {
     template: '#productos',
     data: function () {
         return {
-            titulo: 'Productos'
+            titulo: 'Productos',
+            categories: Object.keys(productsByCategory).map(function (p) {
+                return {
+                    path: p,
+                    name: p
+                }
+            })
         }
     }
 }
@@ -81,6 +87,59 @@ Vue.directive('scroller', {
 Vue.component('empresa', empresa);
 Vue.component('productos', productos);
 
+var productsByCategory = {
+    higiene: [{
+        name: 'Exfoliating scrub',
+        shortDescription: 'Piel fresca, descongestiva y limpia. Prepara a la piel para recibir el tratamiento posterior',
+        img: 'https://especificosba.com.ar/Images/thumbs/exfoliating_scrub.png'
+    }, {
+        name: 'Emulsion de higiene',
+        shortDescription: 'Emulsión de limpieza, demaquillante, de PH neutro, hipoalergénica. Indicada para todo tipo de piel',
+        img: 'https://especificosba.com.ar/Images/thumbs/emulsion_higiene.png'
+    }], 
+    mascaras: [{
+        name: 'Dynamic Do All 1',
+        shortDescription: 'Laboris officia adipisicing voluptate magna fugiat deserunt magna.',
+        img: 'https://especificosba.com.ar/Images/thumbs/dda_1.png'
+    },{
+        name: 'Dynamic Do All 2',
+        shortDescription: 'Id officia ex laboris consectetur duis do quis.',
+        img: 'https://especificosba.com.ar/Images/thumbs/dda_2.png'
+    }, {
+        name: 'Refreshing mask',
+        shortDescription: 'Dolore adipisicing laborum elit proident ipsum quis voluptate duis.',
+        img: 'https://especificosba.com.ar/Images/thumbs/refreshing_mask.png'
+    }, {
+        name: 'Specific mask',
+        shortDescription: 'Pariatur deserunt quis minim eu enim excepteur non sit cillum commodo labore est nulla consectetur.',
+        img: 'https://especificosba.com.ar/Images/thumbs/specific_mask.png'
+    }],
+}
+
+function getProducts(category) {
+    return productsByCategory[category]
+}
+
+function categoryComponent(categoryName) {
+    return Vue.component(categoryName, {
+        template: '#category',
+        data: function () {
+            return {
+                category: categoryName,
+                products: getProducts(categoryName)
+            }
+        }
+    })
+}
+
+var productChildren = Object.keys(productsByCategory).map(function (p) {
+    return {
+        path: p,
+        name: p,
+        component: categoryComponent(p)
+    }
+})
+
 var routes = [{
         path: '/',
         component: empresa
@@ -93,7 +152,8 @@ var routes = [{
     {
         path: '/productos',
         component: productos,
-        text: 'Productos'
+        text: 'Productos',
+        children: productChildren
     }
 ]