recover lost commits: rework frontpage

Author: dpatanin

package-lock.json

@@ -35,7 +35,8 @@
     "react-dom": "^16.13.1",
     "react-helmet": "^6.1.0",
     "react-icons": "^3.11.0",
-    "react-tabs": "^3.1.1"
+    "react-tabs": "^3.1.1",
+    "react-tooltip": "^4.2.9"
   },
   "devDependencies": {
     "node-sass": "^4.14.1",

package.json

@@ -1,26 +1,26 @@
 [
   {
-    "title": "Quick & Easy",
-    "description": "It's a quick and straight forward installation. It works on every system and is ready to use.",
+    "title": "Quick & easy installation",
+    "description": "It's a quick and straight forward installation. It works on every system and is ready to use from start.",
     "image": "/features/quick.svg",
     "altText": "speed clock"
   },
   {
-    "title": "Professionals & Rookies",
+    "title": "For professionals & rookies",
     "description": "You can start scans without any configuration right away and use best practice tests. But each scanner also provides extensive configuration options.",
     "image": "/features/code.svg",
     "altText": "code terminal"
   },
   {
-    "title": "Monitoring",
-    "description": "We integrate Open Source Scanner ready to use",
-    "image": "/features/scan.svg",
-    "altText": "scanner icon"
+    "title": "Monitor your results",
+    "description": "Easily monitor each scanner's results through pre-designed (or self made) dashboards, use a tool integration such as e.g. DefectDojo or integrate the persistence tool of your choice.",
+    "image": "/features/graph.svg",
+    "altText": "graph icon"
   },
   {
-    "title": "Scans behind firewalls",
-    "description": "Our Scans can dig deeply into your Network",
-    "image": "/features/firewall.svg",
-    "altText": "firewall icon"
+    "title": "Design your own process",
+    "description": "Our architecture is designed for open flexibility and free adjustments. New tools can be integrated fairly simple and you can design your own scan and monitor process.",
+    "image": "/features/content.svg",
+    "altText": "content icon"
   }
 ]

src/data/features.json

@@ -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 features from "../data/features.json";
+import { withPrefix } from 'gatsby';
+import React from 'react';
+import Helmet from 'react-helmet';
+import ReactTooltip from 'react-tooltip';
+import Layout from '../components/Layout';
+import SEO from '../components/SEO';
+import features from '../data/features.json';
+import tick from '../images/tick.svg';
+import close from '../images/close.svg';
 
 const Home = () => {
   return (
@@ -32,13 +32,12 @@ const Home = () => {
 
       <div className="container pt-3 pb-2 pt-md-3 pb-md-3">
         <div className="row justify-content-center">
-          <div className="col-12">
-            <h2 className="title-3 text-dark mb-2">
-              What the secureCodeBox provides:
-            </h2>
-          </div>
           {features.map((feature) => (
-            <div key={feature.title} className="col-12 col-md-3 col-lg-3 mb-2">
+            <div
+              key={feature.title}
+              className="col-12 col-md-3 col-lg-3 mb-2"
+              data-tip={feature.description}
+            >
               <div className="feature hoverable">
                 {feature.image && (
                   <div className="feature-image">
@@ -59,40 +58,44 @@ const Home = () => {
         <div className="row justify-content-center">
           <div className="col-12">
             <h2 className="title-3 text-dark mb-2">
-              When is the secureCodeBox the right toolset for your team?
+              How does the secureCodeBox help our team?
             </h2>
           </div>
         </div>
         <div className="feature">
           <div className="feature-list">
             <ul className="pro">
               <li>
-                <img src={approved} alt="checked icon" />
-                Teams with an already medium to advanced security program
+                <img src={tick} alt="checked icon" />
+                SDLC support
               </li>
               <li>
-                <img src={approved} alt="checked icon" />
-                Multi-team setups
+                <img src={tick} alt="checked icon" />
+                Highly scalable: multiple teams, applications and whole
+                networks.
               </li>
               <li>
-                <img src={approved} alt="checked icon" />
-                Integration into fast moving teams
+                <img src={tick} alt="checked icon" />
+                Scans can range from low-hanging fruits to pen testing.
               </li>
             </ul>
 
             <ul className="con">
               <li>
-                <img src={notApproved} alt="unchecked icon" />
-                For the first security steps
+                <img src={close} alt="unchecked icon" />
+                We don't assign grades, someone needs to interpret the scan
+                results.
               </li>
               <li>
-                <img src={notApproved} alt="unchecked icon" />
-                Organizations with separate dev, ops and security teams
+                <img src={close} alt="unchecked icon" />
+                Besides our examples, we do not provide many advanced,
+                pre-configured scans.
               </li>
             </ul>
           </div>
         </div>
       </div>
+      <ReactTooltip type="light" effect="solid" className="detailed-info" />
     </Layout>
   );
 };

src/images/approved.svg

@@ -67,7 +67,7 @@
     }
   }
   .feature-scanner-icon-right-gap {
-    // If you want to use the scanner icon and still keep the other elements in the 
+    // 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;
@@ -76,59 +76,40 @@
     width: 80px; //Same as the widest of img.scanner-icon or img.release
   }
   .feature-list {
-    ul.pro {
-      display: inline-block;
+    display: grid;
+    ul {
       list-style: none;
-      -webkit-columns: 1;
-      -moz-columns: 1;
-      margin: 0;
-      padding: 0;
-      float: left;
-      max-width: 45%;
-      @include media-breakpoint-down(sm) {
-        max-width: 90%;
-        float: unset;
+      padding-left: 0px;
+    }
+    @include media-breakpoint-up(md) {
+      ul.pro {
+        grid-column: 1;
       }
-      li {
-        img {
-          width: 40px;
-          padding-right: 5px;
-        }
-        font-size: 1.1rem;
-        color: $secondary;
-        margin: 25px;
-        line-height: 1.3;
-        text-align: left;
-        // Needs to be the negative of img-width
-        text-indent: -40px;
+      ul.con {
+        grid-column: 2;
       }
     }
-    ul.con {
-      display: inline-block;
-      list-style: none;
-      -webkit-columns: 1;
-      -moz-columns: 1;
-      margin: 0;
-      padding: 0;
-      max-width: 45%;
-      float: right;
-      @include media-breakpoint-down(sm) {
-        max-width: 90%;
-        float: unset;
+    @include media-breakpoint-down(md) {
+      ul.pro {
+        grid-row: 1;
       }
-      li {
-        img {
-          width: 40px;
-          padding-right: 5px;
+      ul.con {
+        grid-row: 2;
+      }
+    }
+    li {
+      img {
+        width: 35px;
+        margin-right: 10px;
+        @include media-breakpoint-down(md) {
+          width: 25px;
         }
-        font-size: 1.1rem;
-        color: $secondary;
-        margin: 25px;
-        line-height: 1.3;
-        text-align: left;
-        // Needs to be the negative of img-width
-        text-indent: -40px;
       }
+      font-size: 1.1rem;
+      color: $secondary;
+      margin: 25px;
+      line-height: 1.3;
+      text-align: left;
     }
   }
 }
@@ -147,4 +128,4 @@
   > a {
     text-decoration: none;
   }
-}
+}

src/images/close.svg

@@ -17,3 +17,18 @@
     background-position: 100% 130px;
   }
 }
+
+// React-tooltip requires !important statement for custom styles
+.detailed-info {
+  opacity: 100% !important;
+  border: solid 1px $gray-600 !important;
+  font-size: 20px !important;
+  max-width: 600px !important;
+  @include media-breakpoint-down(md) {
+    font-size: 16px !important;
+    max-width: 400px !important;
+  }
+  @include media-breakpoint-down(sm) {
+    max-width: 80vw !important;
+  }
+}