List products as chips in TOC

css/main.css

@@ -295,16 +295,23 @@ body {
     margin: 4rem 0;
 }
 
+.chip.toc-tag {
+    background-color: rgba(27, 61, 108, 0.1);
+}
 h1 {
     font-family: 'Raleway', sans-serif;
     text-align: center;
     text-transform: uppercase;
     color: #0C2545;
 }
+
 #eba-about {
     text-align: justify;
 }
 
+.responsive-img.circle {
+    padding: 1rem 0;
+}
 .pagebreak {
     page-break-before: always;
 }
@@ -355,6 +362,11 @@ h4.primary-title {
     font-size: 1.8rem;
 }
 
+h5 {
+    font-size: 2rem;
+    margin: 1rem 0 .5rem 0;
+}
+
 p {
     margin: .5rem 0 1rem 0;
 }

index.html

@@ -42,17 +42,17 @@
             </div>
             <div class="col s6 center-align">
               <image src="images/application.png" width="124" />
-              <p>Formulaciones únicas, concebidas en combinación con técnicas de aplicación sinérgica, que aportan resultados inmediatos y duraderos.</p>
+              <p>Formulaciones únicas que aportan resultados inmediatos y duraderos.</p>
             </div>
           </div>
           <div class="row">
             <div class="col s6 center-align">
               <image src="images/science.png" width="124"/>
-              <p>Vehículos especializados para preservar la integridad de las fórmulas y evitar procesos de sensibilización.</p>
+              <p>Vehículos especializados que preservan la integridad de las fórmulas y evitan procesos de sensibilización.</p>
             </div>
             <div class="col s6 center-align">
               <image src="images/certification.png" width="124" />
-              <p>Estrictos controles bajo normas de calidad internacional GMP son garantía de los productos ESPECIFICOS Buenos Aires.</p>
+              <p>Estrictos controles bajo normas de calidad internacional GMP son garantía de nuestros productos.</p>
             </div>
           </div>
         </div>

js/vademecum.js

@@ -121,26 +121,24 @@ const Category = (category, products, prices) => (
 const ToC = (categories, products) => (
   <section id="eba-toc" className="container">
     <h2 className="pagebreak">Indice</h2>
-    <div class="col s8">
-      {
-        categories.map((category, i) => (
-          <div>
+      <div className="">
+        {
+          categories.map((category, i) => (
             <div>
-              <a href={`#${category[TAG]}`}> 
-                <h5>{category[LABEL]} <i className="material-icons">chevron_right</i></h5>
-              </a>
+              <div>
+                <a href={`#${category[TAG]}`}> 
+                  <h5>{category[LABEL]} <i className="material-icons">chevron_right</i></h5>
+                </a>
+              </div>
+              <div>
+                {
+                  products[category[LABEL]].map(product => Tag(product.name, null, 'toc-tag'))
+                }
+              </div>
             </div>
-            {
-              products[category[LABEL]].map(product => (
-                <div>
-                  { product.name }
-                </div>
-              ))
-            }
-          </div>
-        ))
-      }
-    </div>
+          ))
+        }
+      </div>
   </section>
 )
 

lib/vademecum.js

@@ -118,15 +118,15 @@ var ToC = function ToC(categories, products) {
   }, dom("h2", {
     className: "pagebreak"
   }, "Indice"), dom("div", {
-    class: "col s8"
+    className: ""
   }, categories.map(function (category, i) {
     return dom("div", null, dom("div", null, dom("a", {
       href: "#".concat(category[TAG])
     }, dom("h5", null, category[LABEL], " ", dom("i", {
       className: "material-icons"
-    }, "chevron_right")))), products[category[LABEL]].map(function (product) {
-      return dom("div", null, product.name);
-    }));
+    }, "chevron_right")))), dom("div", null, products[category[LABEL]].map(function (product) {
+      return Tag(product.name, null, 'toc-tag');
+    })));
   })));
 };