UI: Add banner to the top of the landing page

monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx

@@ -9,6 +9,9 @@ import IslandHttpClient from "../IslandHttpClient";
 import ParticleBackground from '../ui-components/ParticleBackground';
 import Logo from "../logo/LogoComponent";
 
+const monkeyIcon = require('../../images/monkey-icon.svg')
+const infectionMonkey = require('../../images/infection-monkey.svg')
+
 const LandingPageComponent = (props) => {
 
   return (
@@ -17,6 +20,7 @@ const LandingPageComponent = (props) => {
     <Col sm={{offset: 1, span: 10}} md={{offset: 1, span: 10}}
          lg={{offset: 2, span: 8}} xl={{offset: 3, span: 6}}
          className={'landing-page'}>
+       <MonkeyBanner />
        <h1 className="page-title">Breach & Attack Simulation</h1>
        <div style={{'fontSize': '1.2em'}}>
          <ScenarioButtons/>
@@ -101,4 +105,13 @@ function ScenarioInfo() {
     );
 }
 
+function MonkeyBanner(props) {
+  return (
+    <div className={'landing-page-banner'}>
+      <img className={'landing-banner-component landing-banner-monkey-icon'} src={monkeyIcon} />
+      <img className={'landing-banner-component landing-banner-title'} src={infectionMonkey} />
+    </div>
+  );
+}
+
 export default LandingPageComponent;

monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss

@@ -40,3 +40,27 @@
 .guardicore-logo .version-text {
   position: relative;
 }
+
+.landing-page-banner {
+    display: block;
+    background-color: #ffcc00;
+    height:200px;
+    margin-right: -15px;
+    margin-left: -15px;
+}
+
+.landing-banner-component {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 10px;
+}
+
+.landing-banner-monkey-icon {
+    max-height: 65%;
+}
+
+.landing-banner-title {
+    padding-bottom: 10px;
+    max-height: 35%;
+}