change highlight color and minor adjustments

Author: dpatanin

src/pages/index.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { withPrefix } from 'gatsby';
-import Helmet from 'react-helmet';
-import SEO from '../components/SEO';
-import Layout from '../components/Layout';
-import approved from '../images/approved.svg';
-import notApproved from '../images/not approved.svg';
+import React from "react";
+import { withPrefix } from "gatsby";
+import Helmet from "react-helmet";
+import SEO from "../components/SEO";
+import Layout from "../components/Layout";
+import approved from "../images/approved.svg";
+import notApproved from "../images/not approved.svg";
 
-import features from '../data/features.json';
+import features from "../data/features.json";
 
 const Home = () => {
   return (
@@ -58,10 +58,12 @@ const Home = () => {
       </div>
 
       <div className="container pt-3 pb-5 pb-md-7">
-        <div className="col-12">
-          <h2 className="title-3 text-dark mb-2">
-            When is the secureCodeBox right for your team?
-          </h2>
+        <div className="row justify-content-center">
+          <div className="col-12">
+            <h2 className="title-3 text-dark mb-2">
+              When is the secureCodeBox right for your team?
+            </h2>
+          </div>
         </div>
         <div className="feature">
           <h2 className="feature-title"></h2>

src/scss/_bootstrap-variables.scss

@@ -20,7 +20,7 @@ $white: #ffffff;
 $black: #000000;
 $primary: #1c3ed3;
 $iteragenta: #a9218e;
-$iteragentaLight: rgb(170, 77, 151);
+$highlight: #7c00ce57;
 $secureCodeBlue: #3296dc;
 $secondary: #414156;
 

src/scss/components/_feature.scss

@@ -62,7 +62,7 @@
           padding-right: 5px;
         }
         font-size: 1.1rem;
-        color: rgb(87, 87, 87);
+        color: $secondary;
         margin: 25px;
         line-height: 1.3;
         text-align: left;
@@ -77,20 +77,19 @@
       -moz-columns: 1;
       margin: 0;
       padding: 0;
-      max-width: 40%;
+      max-width: 45%;
       float: right;
       @include media-breakpoint-down(sm) {
         max-width: 90%;
         float: unset;
       }
-      max-width: 45%;
       li {
         img {
           width: 40px;
           padding-right: 5px;
         }
         font-size: 1.1rem;
-        color: rgb(87, 87, 87);
+        color: $secondary;
         margin: 25px;
         line-height: 1.3;
         text-align: left;
@@ -106,8 +105,7 @@
   &:hover {
     margin-top: -1px;
     margin-bottom: 1px;
-    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1);
-    border-color: $iteragenta;
+    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
     text-decoration: none;
   }
 }

src/scss/components/_main-menu.scss

@@ -31,7 +31,7 @@
         padding: 10px 14px 10px 14px;
         text-decoration: none;
         &:hover {
-          background: $iteragenta;
+          background: $highlight;
           color: #fff;
           text-decoration: none;
         }