Refactored the integrations page layout: introduced bootstrap grid-system, integrated all hooks.

Author: rfelber

gatsby-config.js

@@ -100,7 +100,7 @@ module.exports = {
         name: `secureCodeBox-v2-alpha`,
         remote: `https://github.com/secureCodeBox/secureCodeBox-v2-alpha`,
         branch: `master`,
-        patterns: `scanners`,
+        patterns: [`scanners`, `hooks`, `docs`],
       },
     },
     {
@@ -109,6 +109,13 @@ module.exports = {
         name: `scanners`,
         path: `${__dirname}/.cache/gatsby-source-git/secureCodeBox-v2-alpha/scanners`,
       }
+    },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `hooks`,
+        path: `${__dirname}/.cache/gatsby-source-git/secureCodeBox-v2-alpha/hooks`,
+      }
     }
   ],
 };

src/pages/integrations/index.js

@@ -0,0 +1,75 @@
+.integration-card {
+  border: 2px solid #eaeaea;
+  margin-bottom: 1rem;
+  margin-right: 1rem;
+  padding: 1rem;
+  background-color: #ffffff;
+  text-align: center;
+  min-height: 125px;
+  .integration-card-image {
+    width: 80px;
+    height: 80px;
+    text-align: center;
+  }
+  img {
+    width: 100%;
+    height: auto;
+  }
+  .integration-card-title {
+    color: $secondary;
+    font-size: 1.4rem;
+    font-weight: 300;
+    line-height: 1.2;
+    strong {
+      font-size: 1.2rem;
+      font-weight: 600;
+    }
+  }
+  .integration-card-content {
+    margin-bottom: 0;
+    p {
+      margin: 0;
+      color: $secondary;
+      font-size: 1rem;
+      strong {
+        text-transform: uppercase;
+        font-size: 0.7rem;
+        font-weight: 700;
+      }
+      em {
+        color: $primary;
+        font-style: normal;
+      }
+    }
+  }
+  .integration-card-scanner-icon {
+    
+    justify-content: center;
+    align-items: center;
+    
+    img.scanner-icon {
+      width: 80px;
+      height: 40px;
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+    img.release {
+      width: 70px;
+      height: 15px;
+    }
+  }
+}
+
+.integration-card.hoverable {
+  cursor: pointer;
+  &:hover {
+    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
+    text-decoration: none;
+  }
+}
+
+.no-highlight {
+  > a {
+    text-decoration: none;
+  }
+}

src/scss/components/_integration-card.scss

@@ -59,6 +59,7 @@
 @import 'components/strip';
 @import 'components/whitebox';
 @import 'components/feature';
+@import 'components/integration-card';
 @import 'components/call';
 @import 'components/card';
 @import 'components/card-two';

src/scss/style.scss

@@ -25,7 +25,7 @@ const Integration = props => {
               </li>
             ))}
           </ul>
-          <h1 className="sidebar-header">Persistence provider</h1>
+          <h1 className="sidebar-header">Hooks</h1>
           <ul className="list-unstyled components">
             {persistenceProvider.map(persistenceProvider => (
               <li key={persistenceProvider.node.frontmatter.title}>