Rework/images

README.md

@@ -66,10 +66,46 @@ 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. Currently we use svg images from [undraw](https://undraw.co/) as background images. In the case you are going to use a png, jpg or jpeg, and it does not load in an instant, use gatsby-image and fluid to avoid a spontaneously popping image, e.g.:
+
+Query the image on the page:
+
+```javascript
+export const query = graphql`
+  query {
+    ImageHomeQuery: file(relativePath: { eq: "images/<ImageName.any>" }) {
+      childImageSharp {
+        # Specify the image processing specifications right in the query.
+        fluid {
+          ...GatsbyImageSharpFluid
+        }
+      }
+    }
+  }
+`;
+```
+
+And use the `<Img/>` component:
+
+```html
+<div className="background-plane">
+  <img
+    fluid="{props.data.ImageHomeQuery.childImageSharp.fluid}"
+    alt="secureCodeBox preview"
+    objectFit="cover"
+    className="background-image"
+  />
+</div>
+```
+
+Of course you can use this not only for background images, just ignore then everything related to to background in the example. However, currently, the intro style class provides basic styling for the background images.
+
+Recommended websites for free icons or images:
 
+- [flaticon](https://www.flaticon.com/)
 - [iconmonstr](https://iconmonstr.com/)
 - [pixabay](https://pixabay.com/)
+- [undraw](https://undraw.co/)
 
 ## Documentation Guide
 
@@ -238,7 +274,7 @@ Currently under development, this will be the guide for our "Get Started" tutori
 
 #### Developer docs
 
-Currently under development, this will be the guide for our "Docs" developer documentation similar to the ones above.  
+Currently under development, this will be the guide for our "Docs" developer documentation similar to the ones above.
 
 ## Production Deployment
 

package.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",

src/components/Footer.js

@@ -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/data/features.json

@@ -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"
   }
 ]