Update homepage look and feel

This commit is contained in:
Shay Nehmad 2020-08-04 15:03:03 +03:00
parent c48eef8f94
commit 7403bf14fa
1 changed files with 51 additions and 16 deletions

View File

@ -1,6 +1,9 @@
import React from 'react'; import React from 'react';
import {Col} from 'react-bootstrap'; import {Col, Row} from 'react-bootstrap';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faPlayCircle} from '@fortawesome/free-regular-svg-icons';
import {faBookOpen, faCogs} from '@fortawesome/free-solid-svg-icons';
class RunServerPageComponent extends React.Component { class RunServerPageComponent extends React.Component {
constructor(props) { constructor(props) {
@ -12,23 +15,15 @@ class RunServerPageComponent extends React.Component {
<Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}} <Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}}
lg={{offset: 3, span: 9}} xl={{offset: 2, span: 7}} lg={{offset: 3, span: 9}} xl={{offset: 2, span: 7}}
className={'main'}> className={'main'}>
<h1 className="page-title">1. Monkey Island Server</h1> <h1 className="page-title">Welcome to the Monkey Island Server</h1>
<div style={{'fontSize': '1.2em'}}> <div style={{'fontSize': '1.2em'}}>
<p style={{'marginTop': '30px'}}>Congrats! You have successfully set up the Monkey Island <p style={{'marginTop': '30px'}}>
server. &#x1F44F; &#x1F44F;</p> Congratulations! You have successfully set up the Monkey Island server. &#x1F44F; &#x1F44F;
<p>
The Infection Monkey is an open source security tool for testing a data center's resiliency to perimeter
breaches and internal server infections.
The Monkey uses various methods to propagate across a data
center and reports to this Monkey Island Command and Control server.
</p>
<p>
To read more about the Monkey, visit <a href="http://infectionmonkey.com"
rel="noopener noreferrer" target="_blank">infectionmonkey.com</a>
</p>
<p>
Go ahead and <Link to="/run-monkey">run the monkey</Link>.
</p> </p>
<br/>
<HomepageCallToActions />
<br/>
<MonkeyInfo />
</div> </div>
</Col> </Col>
); );
@ -36,3 +31,43 @@ class RunServerPageComponent extends React.Component {
} }
export default RunServerPageComponent; export default RunServerPageComponent;
function HomepageCallToActions() {
return (
<section id="homepage-shortcuts">
<div className="container">
<Row className="justify-content-center">
<div className="col-lg-4 col-sm-6">
<Link to="/run-monkey" className="px-4 py-5 bg-white shadow text-center d-block">
<h4><FontAwesomeIcon icon={faPlayCircle}/> Run Monkey</h4>
<p>Run the Monkey with the current configuration.</p>
</Link>
</div>
<div className="col-lg-4 col-sm-6">
<Link to="/configure" className="px-4 py-5 bg-white shadow text-center d-block">
<h4><FontAwesomeIcon icon={faCogs}/> Configure Monkey</h4>
<p>Edit targets, add credentials, choose exploits and more.</p>
</Link>
</div>
<div className="col-lg-4 col-sm-6">
<a href="https://infectionmonkey.com" className="px-4 py-5 bg-white shadow text-center d-block" rel="noopener noreferrer" target="_blank">
<h4><FontAwesomeIcon icon={faBookOpen}/> Read more</h4>
<p>Visit our homepage for more information.</p>
</a>
</div>
</Row>
</div>
</section>
);
}
function MonkeyInfo() {
return (
<>
<h4>What is Infection Monkey?</h4>
<strong>Infection Monkey</strong> is an open-source security tool for testing a data center's resiliency to perimeter
breaches and internal server infections. The Monkey uses various methods to propagate across a data center
and reports to this Monkey Island Command and Control server.
</>
);
}