frontpage sections color coding

data/sections.yml

@@ -1,12 +1,14 @@
 - title: Core Concepts
   description: Understand the fundamentals of Ocean Protocol.
   link: /concepts/introduction/
-  color: $brand-purple
+  color: purple
 
 - title: Setup Guides
   description: Setting up the Ocean Protocol components.
   link: /setup/marketplace/
+  color: blue
 
 - title: Tutorials
   description: Browse tutorials for most common setup and development use-cases.
   link: /tutorials/jupyter/
+  color: orange

package.json

@@ -5,6 +5,7 @@
   "author": "Ocean Protocol <devops@oceanprotocol.com>",
   "dependencies": {
     "@oceanprotocol/art": "^1.0.2",
+    "classnames": "^2.2.6",
     "gatsby": "^2.0.45",
     "gatsby-image": "^2.0.20",
     "gatsby-plugin-catch-links": "^2.0.8",

src/pages/index.js

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Link, graphql } from 'gatsby'
 import Helmet from 'react-helmet'
+import classnames from 'classnames'
 import Layout from '../components/Layout'
 import Content from '../components/Content'
 import HeaderHome from '../components/HeaderHome'
@@ -9,8 +10,15 @@ import Repositories from '../components/Repositories'
 import { ReactComponent as Arrow } from '../images/arrow.svg'
 import styles from './index.module.scss'
 
-const SectionLink = ({ to, title, children }) => (
-    <Link to={to} className={styles.link}>
+const SectionLink = ({ to, title, color, children }) => {
+    let classNames = classnames(styles.link, {
+        [styles.purple]: color === 'purple',
+        [styles.blue]: color === 'blue',
+        [styles.orange]: color === 'orange'
+    })
+
+    return (
+        <Link to={to} className={classNames}>
             <h3 className={styles.sectionTitle}>{title}</h3>
             <p className={styles.sectionText}>{children}</p>
             <span className={styles.sectionMore}>
@@ -18,10 +26,12 @@ const SectionLink = ({ to, title, children }) => (
             </span>
         </Link>
     )
+}
 
 SectionLink.propTypes = {
     to: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
+    color: PropTypes.string,
     children: PropTypes.any
 }
 
@@ -38,7 +48,11 @@ const IndexPage = ({ data, location }) => (
                 <ul className={styles.sections}>
                     {data.allSectionsYaml.edges.map(({ node }) => (
                         <li key={node.title} className={styles.section}>
-                            <SectionLink to={node.link} title={node.title}>
+                            <SectionLink
+                                to={node.link}
+                                title={node.title}
+                                color={node.color}
+                            >
                                 {node.description}
                             </SectionLink>
                         </li>
@@ -72,6 +86,7 @@ export const IndexQuery = graphql`
                     title
                     description
                     link
+                    color
                 }
             }
         }

src/pages/index.module.scss

@@ -47,7 +47,6 @@
 
     &:hover,
     &:focus {
-        color: $brand-grey;
         box-shadow: rgba($brand-black, .1) 0 12px 20px;
 
         svg {
@@ -56,6 +55,27 @@
     }
 }
 
+.purple {
+    .sectionTitle,
+    .sectionMore {
+        color: $brand-purple;
+    }
+}
+
+.blue {
+    .sectionTitle,
+    .sectionMore {
+        color: $brand-blue;
+    }
+}
+
+.orange {
+    .sectionTitle,
+    .sectionMore {
+        color: $orange;
+    }
+}
+
 .sectionTitle {
     margin-top: 0;
     margin-bottom: $spacer / $line-height;
@@ -64,6 +84,7 @@
 
 .sectionText {
     margin-bottom: 0;
+    color: $brand-grey;
 }
 
 .sectionMore {

src/styles/global.scss

@@ -137,7 +137,7 @@ h4,
 h5 {
     font-family: $font-family-title;
     color: inherit;
-    line-height: 1.25;
+    line-height: 1.2;
     font-weight: 600;
 }