add scanner icon style and include scanner release tag

Author: dpatanin

src/pages/scanner/index.js

@@ -1,11 +1,12 @@
-import React from 'react';
-import { graphql } from 'gatsby';
-import { Link } from 'gatsby';
-import SEO from '../../components/SEO';
-import Layout from '../../components/Layout';
+import React from "react";
+import { graphql } from "gatsby";
+import { Link } from "gatsby";
+import SEO from "../../components/SEO";
+import Layout from "../../components/Layout";
 
 const Scanner = props => {
   const scanner = props.data.allMarkdownRemark.edges;
+
   return (
     <Layout bodyClass="page-scanner">
       <SEO title="Scanner" />
@@ -35,12 +36,20 @@ const Scanner = props => {
             >
               <Link to={edge.node.frontmatter.path}>
                 <div className="feature hoverable">
+                  <div className="feature-scanner-icon">
+                    <img className="scanner-icon" src=""></img>
+                    <img
+                      className="release"
+                      src={edge.node.frontmatter.release}
+                    ></img>
+                  </div>
                   <h2 className="feature-title">
                     {edge.node.frontmatter.title}
                   </h2>
                   <div className="feature-content">
                     <p>{edge.node.frontmatter.usecase}</p>
                   </div>
+                  <div className="feature-scanner-icon-right-gap"></div>
                 </div>
               </Link>
             </div>
@@ -65,6 +74,7 @@ export const query = graphql`
             path
             category
             usecase
+            release
           }
         }
       }

src/scss/components/_feature.scss

@@ -6,6 +6,10 @@
   display: flex;
   align-items: center;
   flex-direction: column;
+  flex-wrap: wrap;
+  @include media-breakpoint-down(md) {
+    flex-wrap: nowrap;
+  }
   text-align: center;
   .feature-image {
     flex: 0 0 auto;
@@ -42,6 +46,32 @@
       }
     }
   }
+  .feature-scanner-icon {
+    display: flex;
+    flex-direction: column;
+    align-self: flex-start;
+    justify-self: stretch;
+    justify-content: center;
+    align-content: center;
+    height: 100%;
+    img.scanner-icon {
+      width: 80px;
+      height: auto;
+    }
+    img.release {
+      width: 80px;
+      height: auto;
+    }
+  }
+  .feature-scanner-icon-right-gap {
+    // If you want to use the scanner icon and still keep the other elements in the 
+    // feature element aligned in the center, use this element as well
+    align-self: flex-end;
+    justify-self: stretch;
+    justify-content: center;
+    height: 100%;
+    width: 80px;
+  }
   .feature-list {
     ul.pro {
       display: inline-block;