prototype components section

data/components.yml

@@ -0,0 +1,11 @@
+- name: 'Hello'
+  description: 'Hello'
+  links:
+    - name: 'Hello'
+      url: '#'
+
+- name: 'Hello'
+  description: 'Hello'
+  links:
+    - name: 'Hello'
+      url: '#'

src/components/Components.jsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StaticQuery, graphql } from 'gatsby'
+import styles from './Components.module.scss'
+
+const Component = ({ name, description, links }) => (
+    <div className={styles.component}>
+        <h1 className={styles.componentName}>{name}</h1>
+        <p>{description}</p>
+
+        <ul>
+            {links.map(link => (
+                <li key={link.url}>
+                    <a href={link.url}>{link.name}</a>
+                </li>
+            ))}
+        </ul>
+    </div>
+)
+
+Component.propTypes = {
+    name: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    links: PropTypes.array.isRequired
+}
+
+const Components = () => (
+    <StaticQuery
+        query={graphql`
+            query {
+                allComponentsYaml {
+                    edges {
+                        node {
+                            name
+                            description
+                            links {
+                                name
+                                url
+                            }
+                        }
+                    }
+                }
+            }
+        `}
+        render={data => {
+            const components = data.allComponentsYaml.edges
+
+            return (
+                <div className={styles.components}>
+                    <div className={styles.componentsList}>
+                        <h3 className={styles.componentsTitle}>
+                            Core Components
+                        </h3>
+
+                        <div className={styles.componentsWrapper}>
+                            {components.map(({ node }) => (
+                                <Component
+                                    key={node.name}
+                                    name={node.name}
+                                    description={node.description}
+                                    links={node.links}
+                                />
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className={styles.componentsList}>
+                        <h3 className={styles.componentsTitle}>Libraries</h3>
+
+                        <div className={styles.componentsWrapper}>
+                            {components.map(({ node }) => (
+                                <Component
+                                    key={node.name}
+                                    name={node.name}
+                                    description={node.description}
+                                    links={node.links}
+                                />
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            )
+        }}
+    />
+)
+
+export default Components

src/components/Components.module.scss

@@ -0,0 +1,40 @@
+@import 'variables';
+
+.components {
+    margin-top: $spacer * 2;
+
+    @media (min-width: $break-point--medium) {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+}
+
+.componentsList {
+    @media (min-width: $break-point--medium) {
+        flex: 0 0 45%;
+    }
+}
+
+.componentsWrapper {
+    @media (min-width: $break-point--small) {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+}
+
+.componentsTitle {
+    font-size: $font-size-h4;
+    color: $brand-grey-light;
+}
+
+.component {
+    @media (min-width: $break-point--small) {
+        flex: 0 0 45%;
+    }
+}
+
+.componentName {
+    font-size: $font-size-large;
+}

src/pages/index.js

@@ -4,6 +4,7 @@ import { Link, graphql } from 'gatsby'
 import Layout from '../components/Layout'
 import Content from '../components/Content'
 import HeaderHome from '../components/HeaderHome'
+import Components from '../components/Components'
 import { ReactComponent as Arrow } from '../images/arrow.svg'
 import styles from './index.module.scss'
 
@@ -35,6 +36,8 @@ const IndexPage = ({ data, location }) => (
                     </li>
                 ))}
             </ul>
+
+            <Components />
         </Content>
     </Layout>
 )