wip

Author: dpatanin

src/pages/getStarted/index.js

@@ -12,21 +12,32 @@ const GetStarted = (props) => {
         <div className="container">
           <div className="row">
             <div className="col-12">
-              <h1>Tutorials</h1>
-              <h2>For starting up things</h2>
-              <p>
-                Guides on how to start up engine, scanner, persistence provider
-                and do scan jobs etc.. Perhaps with screencasts.
-              </p>
+              <h1>Getting Started</h1>
+              <h2>User and developer oriented documentation</h2>
+              <span>
+                How To:
+                <ul>
+                  <li>
+                    Start
+                    <ul>
+                      <li>Operator</li>
+                      <li>Scanner</li>
+                      <li>Persistence Provider</li>
+                    </ul>
+                  </li>
+                  <li>Hooks</li>
+                  <li>Contribute</li>
+                </ul>
+              </span>
             </div>
           </div>
         </div>
       </div>
 
       <div className="container  pb-2  pb-md-3">
         <div className="row justify-content-center">
-          {tutorials.map(tutorial => (
-            <div className="feature">
+          {tutorials.map((tutorial, index) => (
+            <div key={index} className="feature">
               <h1>{tutorial.node.frontmatter.title}</h1>
             </div>
           ))}
@@ -39,7 +50,7 @@ const GetStarted = (props) => {
 export const query = graphql`
   query ServicesQuery {
     allMarkdownRemark(
-      filter: { fileAbsolutePath: { regex: "/getStarted/" } }
+      filter: { fileAbsolutePath: { regex: "/docs/" } }
       sort: { fields: [frontmatter___title], order: DESC }
     ) {
       edges {
@@ -48,6 +59,7 @@ export const query = graphql`
           frontmatter {
             title
             path
+            category
           }
         }
       }

src/scss/components/_footer.scss

@@ -1,12 +1,13 @@
 .footer-strip {
   background: $secureCodeBlue;
-  padding-top: 20px;
-  padding-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 70px;
   .container {
     width: inherit;
     max-width: 4060px;
-    margin-left: 20px;
-    margin-right: 20px;
+    margin: auto 20px;
   }
 }
 .footer {

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

@@ -3,17 +3,14 @@
   background-image: url('../images/documentation.png');
   background-repeat: no-repeat;
   background-size: 100%;
-  background-position: 49px -50px;
+  background-position: right bottom;
   @include media-breakpoint-up(sm) {
     background-size: 90%;
-    background-position: 620% 70px;
   }
   @include media-breakpoint-up(md) {
     background-size: 85%;
-    background-position: 360% 0px;
   }
   @include media-breakpoint-up(lg) {
     background-size: 60%;
-    background-position: 110% 0px;
   }
 }