Merge pull request #20 from secureCodeBox/frontpage-produktkarton

Frontpage rework

Author: SirDany

README.md

@@ -66,8 +66,9 @@ Used Fonts:
 
 ### Icons & Images
 
-Icons should be license free and as close to the other icons' style as possible. They should be outlined and monochrome. Color should only be used to fill, never as line color, and only if color does provide a more pleasing look than monochrome. Images should be fitting and mainly used as background (partially). They should fit the color scheme if possible or do **not** stand out through a high contrast to the website. Recommended websites for free icons or images:
+The icons of the integrations should be monochrome. It is important to have an icon which corresponds to the integrations original icon, but does not need to be the same (we do not want to copy the original one's due to licenses). Colored icons should have on the one side, a generally coherent look on the respective page and on the other side, not stand out from the websites blueish theme. Icons should be free licensed or from [flaticon]. [flaticon] is a great source of millions of free icons and it is referenced on the website for it's use already. Images should be fitting and mainly used as background (partially). They should fit the color scheme if possible or do **not** stand out through a high contrast to the website. Recommended websites for free icons or images:
 
+- [flaticon](https://www.flaticon.com/)
 - [iconmonstr](https://iconmonstr.com/)
 - [pixabay](https://pixabay.com/)
 

package-lock.json

@@ -38,7 +38,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,7 +1,7 @@
+import { graphql, StaticQuery } from 'gatsby';
 import React from 'react';
-import { graphql, Link, StaticQuery } from 'gatsby';
 
-const Footer = props => (
+const Footer = (props) => (
   <div className="footer-strip">
     <div className="container">
       <div className="row">
@@ -11,9 +11,6 @@ const Footer = props => (
               {props.data.site.siteMetadata.title}
             </h3>
             <ul className="footer-menu">
-              <li>
-                <Link to="/">Home</Link>
-              </li>
               <li>
                 <a href="https://www.iteratec.de/impressum/">Imprint</a>
               </li>
@@ -22,6 +19,9 @@ const Footer = props => (
                   Data Protection
                 </a>
               </li>
+              <li>
+                <a href="https://www.flaticon.com/">Icons</a>
+              </li>
               <li className="copyright">
                 <a href="https://www.iteratec.de">
                   © {new Date().getFullYear()}{' '}
@@ -36,7 +36,7 @@ const Footer = props => (
   </div>
 );
 
-export default props => (
+export default (props) => (
   <StaticQuery
     query={graphql`
       query {
@@ -48,6 +48,6 @@ export default props => (
         }
       }
     `}
-    render={data => <Footer data={data} />}
+    render={(data) => <Footer data={data} />}
   />
 );

src/components/Footer.js

@@ -1,26 +1,26 @@
 [
   {
-    "title": "Cloud Ready",
-    "description": "Ready to be deployed on a Cloud Server",
-    "image": "/features/cloud.svg",
-    "altText": "cloud icon"
+    "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": "Open Source",
-    "description": "We are an Open Source project and happy about your contribution",
-    "image": "/features/Open Source.svg",
-    "altText": "open source icon"
+    "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": "Scanner out of the box",
-    "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,13 +1,13 @@
-import React from 'react';
 import { withPrefix } from 'gatsby';
+import Img from 'gatsby-image';
+import { default as React } from 'react';
 import Helmet from 'react-helmet';
-import SEO from '../components/SEO';
+import ReactTooltip from 'react-tooltip';
 import Layout from '../components/Layout';
-import approved from '../images/approved.svg';
-import notApproved from '../images/not approved.svg';
-import Img from 'gatsby-image';
-
+import SEO from '../components/SEO';
 import features from '../data/features.json';
+import close from '../images/close.svg';
+import tick from '../images/tick.svg';
 
 const Home = (props) => {
   return (
@@ -33,24 +33,19 @@ const Home = (props) => {
             <h1>secureCodeBox</h1>
             <h2>Testing your Software Security</h2>
             <p>
-              secureCodeBox is a docker based, modularized toolchain for
-              continuous security scans of your software project. Its goal is to
-              orchestrate and easily automate a bunch of security-testing tools
-              out of the box.
+              secureCodeBox is an automated and scalable open source solution
+              that can be used to integrate various security scanners with a
+              simple and lightweight interface.
             </p>
           </div>
         </div>
         <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"
+                data-tip={feature.description}
               >
                 <div className="feature hoverable">
                   {feature.image && (
@@ -67,45 +62,49 @@ const Home = (props) => {
             ))}
           </div>
         </div>
-      </div>
-      <div className="container pt-3 pb-5 pb-md-7">
-        <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?
-            </h2>
+        <div className="container pt-3 pb-5 pb-md-7">
+          <div className="row justify-content-center">
+            <div className="col-12">
+              <h2 className="title-3 text-dark mb-2">
+                How does the secureCodeBox help our team?
+              </h2>
+            </div>
           </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
-              </li>
-              <li>
-                <img src={approved} alt="checked icon" />
-                Multi-team setups
-              </li>
-              <li>
-                <img src={approved} alt="checked icon" />
-                Integration into fast moving teams
-              </li>
-            </ul>
+          <div className="feature">
+            <div className="feature-list">
+              <ul className="pro">
+                <li>
+                  <img src={tick} alt="checked icon" />
+                  SDLC support
+                </li>
+                <li>
+                  <img src={tick} alt="checked icon" />
+                  Highly scalable: multiple teams, applications and whole
+                  networks.
+                </li>
+                <li>
+                  <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
-              </li>
-              <li>
-                <img src={notApproved} alt="unchecked icon" />
-                Organizations with separate dev, ops and security teams
-              </li>
-            </ul>
+              <ul className="con">
+                <li>
+                  <img src={close} alt="unchecked icon" />
+                  We don't assign grades, someone needs to interpret the scan
+                  results.
+                </li>
+                <li>
+                  <img src={close} alt="unchecked icon" />
+                  Besides our examples, we do not provide many advanced,
+                  pre-configured scans.
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
       </div>
+      <ReactTooltip type="light" effect="solid" className="detailed-info" />
     </Layout>
   );
 };