From 660aaf3d1792d58df1319584b948d4500c24871c Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 9 Nov 2018 16:01:20 +0100
Subject: [PATCH] add dummy data for repos

---
 data/components.yml                   | 22 +++++----
 src/components/Components.jsx         | 67 ++++++++++++++++-----------
 src/components/Components.module.scss | 16 ++++++-
 3 files changed, 70 insertions(+), 35 deletions(-)

diff --git a/data/components.yml b/data/components.yml
index 4b35525d..9fe7c367 100644
--- a/data/components.yml
+++ b/data/components.yml
@@ -1,11 +1,17 @@
-- name: 'Hello'
-  description: 'Hello'
+- name: 'keeper-contracts'
+  description: '💧 Integration of TCRs, CPM and Ocean Tokens in Solidity'
   links:
-    - name: 'Hello'
-      url: '#'
+    - name: 'GitHub'
+      url: 'https://github.com/oceanprotocol/keeper-contracts'
 
-- name: 'Hello'
-  description: 'Hello'
+- name: 'aquarius'
+  description: '🐋 Ocean Metadata API'
   links:
-    - name: 'Hello'
-      url: '#'
+    - name: 'GitHub'
+      url: 'https://github.com/oceanprotocol/aquarius'
+
+- name: 'pleuston'
+  description: '🦄 Web app for consumers to explore, download, and publish data assets.'
+  links:
+    - name: 'GitHub'
+      url: 'https://github.com/oceanprotocol/pleuston'
diff --git a/src/components/Components.jsx b/src/components/Components.jsx
index 7903ea4b..01028fff 100644
--- a/src/components/Components.jsx
+++ b/src/components/Components.jsx
@@ -47,35 +47,50 @@ const Components = () => (
 
             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 className={styles.quickrun}>
+                        <strong>
+                            Wanna quickly get an Ocean network running on your
+                            machine?{' '}
+                            <a href="https://github.com/oceanprotocol/docker-images">
+                                Check out docker-images
+                            </a>
+                            .
+                        </strong>
                     </div>
 
-                    <div className={styles.componentsList}>
-                        <h3 className={styles.componentsTitle}>Libraries</h3>
+                    <div className={styles.componentsLists}>
+                        <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 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>
                 </div>
diff --git a/src/components/Components.module.scss b/src/components/Components.module.scss
index 03c7d5a2..81e74a5e 100644
--- a/src/components/Components.module.scss
+++ b/src/components/Components.module.scss
@@ -2,7 +2,15 @@
 
 .components {
     margin-top: $spacer * 2;
+}
 
+.quickrun {
+    padding-top: $spacer * 2;
+    padding-bottom: $spacer * 2;
+    text-align: center;
+}
+
+.componentsLists {
     @media (min-width: $break-point--medium) {
         display: flex;
         flex-wrap: wrap;
@@ -30,11 +38,17 @@
 }
 
 .component {
+    padding: $spacer / 2;
+    border: 1px solid $brand-grey-lighter;
+    border-radius: $border-radius;
+    margin-bottom: 5%;
+
     @media (min-width: $break-point--small) {
-        flex: 0 0 45%;
+        flex: 0 0 100%;
     }
 }
 
 .componentName {
     font-size: $font-size-large;
+    margin-top: 0;
 }