frontpage sections sourced from data

content/concepts/architecture.md

@@ -3,4 +3,4 @@ title: Architecture
 description: The architecture of Ocean Protocol with all its components and how they work together.
 ---
 
-![Ocean Protocol Components](../images/components.png 'Ocean Protocol Components')
+![Ocean Protocol Components](images/components.png 'Ocean Protocol Components')

gatsby-config.js

@@ -19,6 +19,13 @@ module.exports = {
                 path: `${__dirname}/content`
             }
         },
+        {
+            resolve: 'gatsby-source-filesystem',
+            options: {
+                name: 'data',
+                path: `${__dirname}/src/data`
+            }
+        },
         {
             resolve: 'gatsby-transformer-remark',
             options: {

src/data/sections.yml

@@ -0,0 +1,11 @@
+- title: Core Concepts
+  description: Understand the fundamentals of Ocean Protocol.
+  link: /concepts/introduction/
+
+- title: Setup Guides
+  description: Setting up the Ocean Protocol components.
+  link: /setup/keeper/
+
+- title: Tutorials
+  description: Browse tutorials for most common setup and development use-cases.
+  link: /tutorials/jupyter/

src/pages/index.js

@@ -1,14 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Link } from 'gatsby'
+import { Link, graphql } from 'gatsby'
 import Layout from '../components/Layout'
 import Content from '../components/Content'
-// import styles from './index.module.scss'
+import styles from './index.module.scss'
 
 const SectionLink = ({ to, title, children }) => (
     <Link to={to}>
-        <h3>{title}</h3>
-        <p>{children}</p>
+        <h3 className={styles.sectionTitle}>{title}</h3>
+        <p className={styles.sectionText}>{children}</p>
     </Link>
 )
 
@@ -18,27 +18,39 @@ SectionLink.propTypes = {
     children: PropTypes.any
 }
 
-const IndexPage = ({ location }) => (
+const IndexPage = ({ data, location }) => (
     <Layout location={location}>
         <Content>
-            <SectionLink to="/concepts/introduction/" title="Core Concepts">
-                Understand the fundamentals of Ocean Protocol.
-            </SectionLink>
-
-            <SectionLink to="/setup/keeper/" title="Setup Guides">
-                Setting up the Ocean Protocol components.
-            </SectionLink>
-
-            <SectionLink to="/tutorials/jupyter/" title="Tutorials">
-                Browse tutorials for most common setup and development
-                use-cases.
+            <ul className={styles.sections}>
+                {data.allSectionsYaml.edges.map(({ node }) => (
+                    <li key={node.title} className={styles.section}>
+                        <SectionLink to={node.link} title={node.title}>
+                            {node.description}
                         </SectionLink>
+                    </li>
+                ))}
+            </ul>
         </Content>
     </Layout>
 )
 
 IndexPage.propTypes = {
+    data: PropTypes.object.isRequired,
     location: PropTypes.object.isRequired
 }
 
 export default IndexPage
+
+export const IndexQuery = graphql`
+    query {
+        allSectionsYaml {
+            edges {
+                node {
+                    title
+                    description
+                    link
+                }
+            }
+        }
+    }
+`

src/pages/index.module.scss

@@ -1,2 +1,39 @@
 @import 'variables';
 
+.sections {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    margin-top: $spacer * 2;
+
+    @media (min-width: $break-point--medium) {
+        display: flex;
+        justify-content: space-between;
+    }
+}
+
+.section {
+    margin-bottom: $spacer;
+
+    @media (min-width: $break-point--medium) {
+        flex: 0 0 30%;
+        margin-bottom: 0;
+    }
+
+    a {
+        display: block;
+        padding: $spacer * $line-height;
+        border-radius: $border-radius;
+        box-shadow: rgba($brand-black, .1) 0px 9px 18px;
+        color: $brand-grey;
+        height: 100%;
+    }
+}
+
+.sectionTitle {
+    margin-top: 0;
+}
+
+.sectionText {
+    margin-bottom: 0;
+}