add dummy data for repos

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'

src/components/Components.jsx

@@ -47,6 +47,18 @@ const Components = () => (
 
             return (
                 <div className={styles.components}>
+                    <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.componentsLists}>
                         <div className={styles.componentsList}>
                             <h3 className={styles.componentsTitle}>
                                 Core Components
@@ -65,7 +77,9 @@ const Components = () => (
                         </div>
 
                         <div className={styles.componentsList}>
-                        <h3 className={styles.componentsTitle}>Libraries</h3>
+                            <h3 className={styles.componentsTitle}>
+                                Libraries
+                            </h3>
 
                             <div className={styles.componentsWrapper}>
                                 {components.map(({ node }) => (
@@ -79,6 +93,7 @@ const Components = () => (
                             </div>
                         </div>
                     </div>
+                </div>
             )
         }}
     />

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;
 }