preperation

Author: dpatanin

src/pages/getStarted/index.js

@@ -5,7 +5,7 @@ import Layout from '../../components/Layout';
 import Img from 'gatsby-image';
 
 const GetStarted = (props) => {
-  const docs = props.data.ServicesQuery.edges.filter(function(doc) {
+  const docs = props.data.ServicesQuery.edges.filter(function (doc) {
     return doc.node.frontmatter.path !== null;
   });
   return (
@@ -26,7 +26,10 @@ const GetStarted = (props) => {
               <div className="col-12">
                 <h1>Getting Started</h1>
                 <h2>Documentation for user and developer</h2>
-                <span>
+                {/* TODO: Build quick link navigation  */}
+                <div className="quick-link-menu">
+                  ✍ Page under construction.
+                  <br />
                   How To:
                   <ul>
                     <li>
@@ -40,13 +43,18 @@ const GetStarted = (props) => {
                     <li>Hooks</li>
                     <li>Contribute</li>
                   </ul>
-                </span>
+                </div>
               </div>
             </div>
             <div className="container  pb-2  pb-md-3 doc-selection">
+              <h1>Choose you Guide</h1>
               <div className="row docs">
                 {docs.map((doc, index) => (
-                  <Link key={index} to={doc.node.frontmatter.path}>
+                  <Link
+                    key={index}
+                    className="col-12 col-md-2 col-lg-4 mb-2"
+                    to={doc.node.frontmatter.path}
+                  >
                     <div className="feature hoverable">
                       <div className="feature-image">
                         <img
@@ -56,9 +64,9 @@ const GetStarted = (props) => {
                           alt={doc.node.frontmatter.title}
                         />
                       </div>
-                      <h2 className="feature-title">
+                      <div className="feature-title">
                         {doc.node.frontmatter.title}
-                      </h2>
+                      </div>
                     </div>
                   </Link>
                 ))}

src/scss/pages/getStarted/_page-getStarted.scss

@@ -1,13 +1,26 @@
 .page-getStarted {
   background: #fafafa;
+
+  .quick-link-menu {
+    filter: blur(3px);
+  }
+
+  .quick-link-menu:hover {
+    filter: none;
+  }
+
   .doc-selection {
     text-align: center;
+    margin-top: 40px;
+
     h1 {
       color: $black;
+      font-size: 2.2rem;
     }
+
     .docs {
       justify-content: space-evenly;
-      margin-top: 100px;
+      margin-top: 40px;
     }
   }
 }

src/templates/doc.js

@@ -8,6 +8,11 @@ const docs = ({ data, location }) => {
   return (
     <Layout bodyClass="integration">
       <div className="sidebar-wrapper">
+        {/* TODO: add sidebar for navigation through the page. 
+        <Sidebar
+          categories={[{ categoryName: 'Scanners', entries: [] }]}
+          currentPathname={location.pathname}
+        /> */}
         <div id="content">
           <div className="container-fluid" id="integration-doc">
             <div