17 files changed, 296 insertions, 101 deletions
diff --git a/src/components/home/ContactSection.js b/src/components/home/ContactSection.js
index 8e6aed1a..c8494c4d 100644
--- a/src/components/home/ContactSection.js
+++ b/src/components/home/ContactSection.js
@@ -1,31 +1,39 @@
 import React from "react";
+import FontAwesome from "react-fontawesome";
+import Mailto from "react-mailto";
+import "./ContactSection.css";
 import ContentSection from "./ContentSection";
-import "./ContentSection.css";
 
 const ContactSection = () => (
-    <ContentSection name="contact">
-        <h1>Contact</h1>
+    <ContentSection name="contact" title="Contact">
+        <div className="row justify-content-center">
+            <div className="col-4">
+                <a href="https://github.com/atlarge-research/opendc">
+                    <FontAwesome name="github" size="3x"/>
+                    <div className="w-100"/>
+                    atlarge-research/opendc
+                </a>
+            </div>
+            <div className="col-4">
+                <Mailto title="Contact us" email="opendc@atlarge-research.com">
+                    <FontAwesome name="envelope" size="3x"/>
+                    <div className="w-100"/>
+                    opendc@atlarge-research.com
+                </Mailto>
+            </div>
+        </div>
         <div className="row">
-            <img src="img/tudelfticon.png" className="col-lg-2 col-md-2 col-sm-3 col-xs-6
-                    col-lg-offset-4 col-md-offset-4 col-sm-offset-3 col-xs-offset-3 tudelft-icon" alt="TU Delft Logo"/>
-            <div className="col-lg-4 col-md-5 col-sm-6 col-xs-10
-                col-lg-offset-0 col-md-offset-0 col-sm-offset-0 col-xs-offset-1 text-left">
-                <div className="row vcenter">
-                    <img src="img/email-icon.png" className="col-lg-2 col-md-2 col-sm-2 col-xs-2" alt="Email Icon"/>
-                    <div className="info-points col-lg-10 col-md-10 col-sm-10 col-xs-10">
-                        <a href="mailto:opendc@atlarge-research.com">opendc@atlarge-research.com</a>
-                    </div>
-                </div>
-                <div className="row vcenter">
-                    <img src="img/github-icon.png" className="col-lg-2 col-md-2 col-sm-2 col-xs-2" alt="Github Icon"/>
-                    <div className="info-points col-lg-10 col-md-10 col-sm-10 col-xs-10">
-                        <a href="https://github.com/atlarge-research/opendc">atlarge-research/opendc</a>
-                    </div>
-                </div>
+            <div className="col text-center">
+                <img src="img/tudelft-icon.png" className="img-fluid tudelft-icon" alt="TU Delft"/>
             </div>
         </div>
-        <div className="atlarge-footer row">
-            A project by the <a href="http://atlarge-research.com"><strong>@Large Research Group</strong></a>.
+        <div className="row">
+            <div className="col text-center">
+                A project by the &nbsp;
+                <a href="http://atlarge.science" target="_blank" rel="noopener noreferrer">
+                    <strong>@Large Research Group</strong>
+                </a>.
+            </div>
         </div>
     </ContentSection>
 );
diff --git a/src/components/home/ContactSection.sass b/src/components/home/ContactSection.sass
new file mode 100644
index 00000000..c292526c
--- /dev/null
+++ b/src/components/home/ContactSection.sass
@@ -0,0 +1,15 @@
+.contact-section
+  background-color: #444
+  color: #ddd
+
+  a
+    color: #ddd
+
+  a:hover
+    color: #fff
+
+  .tudelft-icon
+    height: 100px
+
+  .fa
+    margin-right: 10px
diff --git a/src/components/home/ContentSection.js b/src/components/home/ContentSection.js
index 126c5e4b..6b4cbca4 100644
--- a/src/components/home/ContentSection.js
+++ b/src/components/home/ContentSection.js
@@ -3,12 +3,11 @@ import PropTypes from "prop-types";
 import React from "react";
 import "./ContentSection.css";
 
-const ContentSection = ({name, children}) => (
+const ContentSection = ({name, title, children}) => (
     <div id={name} className={classNames(name + "-section", "content-section")}>
         <div className="container">
-            <div className="row">
-                {children}
-            </div>
+            <h1>{title}</h1>
+            {children}
         </div>
     </div>
 );
diff --git a/src/components/home/ContentSection.sass b/src/components/home/ContentSection.sass
index c84f26db..31062aa7 100644
--- a/src/components/home/ContentSection.sass
+++ b/src/components/home/ContentSection.sass
@@ -5,23 +5,5 @@
   padding-bottom: 150px
   text-align: center
 
-@media screen and (min-width: $screen-sm) and (max-width: $screen-md)
-  .content-section h1
-    font-size: 2em
-    margin-bottom: 40px
-
-  .content-section h3
-    font-size: 1.5em
-
-@media screen and (min-width: $screen-md) and (max-width: $screen-lg)
-  .content-section h1
-    font-size: 3em
-    margin-bottom: 40px
-
-  .content-section h3
-    font-size: 1.8em
-
-@media screen and (min-width: $screen-lg)
-  .content-section h1
-    font-size: 3em
-    margin-bottom: 40px
+  h1
+    margin-bottom: 30px
diff --git a/src/components/home/JumbotronHeader.js b/src/components/home/JumbotronHeader.js
new file mode 100644
index 00000000..b7af420e
--- /dev/null
+++ b/src/components/home/JumbotronHeader.js
@@ -0,0 +1,17 @@
+import React from "react";
+import "./JumbotronHeader.css";
+
+const JumbotronHeader = () => (
+    <section className="jumbotron-header">
+        <div className="container">
+            <div className="jumbotron">
+                <h1 className="display-3">Open<span className="dc">DC</span></h1>
+                <p className="lead">
+                    Collaborative Datacenter Simulation and Exploration for Everybody
+                </p>
+            </div>
+        </div>
+    </section>
+);
+
+export default JumbotronHeader;
diff --git a/src/components/home/JumbotronHeader.sass b/src/components/home/JumbotronHeader.sass
new file mode 100644
index 00000000..51eb0578
--- /dev/null
+++ b/src/components/home/JumbotronHeader.sass
@@ -0,0 +1,16 @@
+.jumbotron-header
+  background: #00A6D6
+
+.jumbotron
+  background-color: inherit
+  margin-bottom: 0
+
+.jumbotron h1
+  color: #eee
+
+.jumbotron h1 .dc
+  color: #eee
+  font-weight: bold
+
+.jumbotron .lead
+  color: #eee
diff --git a/src/components/home/ModelingSection.js b/src/components/home/ModelingSection.js
new file mode 100644
index 00000000..2a984935
--- /dev/null
+++ b/src/components/home/ModelingSection.js
@@ -0,0 +1,19 @@
+import React from "react";
+import ScreenshotSection from "./ScreenshotSection";
+
+const ModelingSection = () => (
+    <ScreenshotSection name="modeling" title="Datacenter Modeling"
+                       imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-construction.PNG"
+                       caption="The datacenter construction interface"
+                       imageIsRight={true}>
+        <h3>Collaboratively...</h3>
+        <ul>
+            <li>Model DC layout, and room locations and types</li>
+            <li>Place racks in rooms and nodes in racks</li>
+            <li>Add real-world CPU, GPU, memory, storage and network units to each node</li>
+            <li>Select from diverse scheduling policies</li>
+        </ul>
+    </ScreenshotSection>
+);
+
+export default ModelingSection;
diff --git a/src/components/home/ScreenshotSection.js b/src/components/home/ScreenshotSection.js
new file mode 100644
index 00000000..74394dcb
--- /dev/null
+++ b/src/components/home/ScreenshotSection.js
@@ -0,0 +1,23 @@
+import classNames from "classnames";
+import React from "react";
+import ContentSection from "./ContentSection";
+import "./ScreenshotSection.css";
+
+const ScreenshotSection = ({name, title, imageUrl, caption, imageIsRight, children}) => (
+    <ContentSection name={name} title={title}>
+        <div className="row">
+            <div className={classNames("col-xl-5 col-lg-5 col-md-5 col-sm-12 col-12 text-left",
+                {"order-1": !imageIsRight})}>
+                {children}
+            </div>
+            <div className="col-xl-7 col-lg-7 col-md-7 col-sm-12 col-12">
+                <img src={imageUrl} className="col-12 screenshot" alt={caption}/>
+                <div className="row text-muted justify-content-center">
+                    {caption}
+                </div>
+            </div>
+        </div>
+    </ContentSection>
+);
+
+export default ScreenshotSection;
diff --git a/src/components/home/ScreenshotSection.sass b/src/components/home/ScreenshotSection.sass
new file mode 100644
index 00000000..a349ad48
--- /dev/null
+++ b/src/components/home/ScreenshotSection.sass
@@ -0,0 +1,5 @@
+.screenshot
+  outline: 2px black solid
+  padding-left: 0
+  padding-right: 0
+  margin-bottom: 5px
diff --git a/src/components/home/SimulationSection.js b/src/components/home/SimulationSection.js
new file mode 100644
index 00000000..d9212c95
--- /dev/null
+++ b/src/components/home/SimulationSection.js
@@ -0,0 +1,19 @@
+import React from "react";
+import ScreenshotSection from "./ScreenshotSection";
+
+const ModelingSection = () => (
+    <ScreenshotSection name="simulation" title="Datacenter Simulation"
+                       imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-simulation-zoom.PNG"
+                       caption="The same simulation at node level"
+                       imageIsRight={false}>
+        <h3>Working with OpenDC:</h3>
+        <ul>
+            <li>Seamlessly switch between construction and simulation modes</li>
+            <li>Choose one of several predefined workloads (Big Data, Bag of Tasks, Hadoop, etc.)</li>
+            <li>Play, pause, and skip around the informative simulation timeline</li>
+            <li>Visualize and demo live</li>
+        </ul>
+    </ScreenshotSection>
+);
+
+export default ModelingSection;
diff --git a/src/components/home/StakeholderSection.js b/src/components/home/StakeholderSection.js
new file mode 100644
index 00000000..47f0d9bb
--- /dev/null
+++ b/src/components/home/StakeholderSection.js
@@ -0,0 +1,26 @@
+import React from "react";
+import ContentSection from "./ContentSection";
+
+const Stakeholder = ({name, title, subtitle}) => (
+    <div className="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6">
+        <img src={"img/stakeholders/" + name + ".png"} className="col-4 img-fluid" alt={title}/>
+        <div className="text-center">
+            <h3>{title}</h3>
+            <p>{subtitle}</p>
+        </div>
+    </div>
+);
+
+const StakeholderSection = () => (
+    <ContentSection name="stakeholders" title="Stakeholders">
+        <div className="row justify-content-center">
+            <Stakeholder name="Manager" title="Managers" subtitle="Seeing is deciding"/>
+            <Stakeholder name="Sales" title="Sales" subtitle="Demo concepts"/>
+            <Stakeholder name="Developer" title="DevOps" subtitle="Develop & tune"/>
+            <Stakeholder name="Researcher" title="Researchers" subtitle="Understand & design"/>
+            <Stakeholder name="Student" title="Students" subtitle="Grasp complex concepts"/>
+        </div>
+    </ContentSection>
+);
+
+export default StakeholderSection;
diff --git a/src/components/home/TeamSection.js b/src/components/home/TeamSection.js
new file mode 100644
index 00000000..efa76b29
--- /dev/null
+++ b/src/components/home/TeamSection.js
@@ -0,0 +1,34 @@
+import React from "react";
+import ContentSection from "./ContentSection";
+
+const TeamMember = ({photoId, name, description}) => (
+    <div className="col-xl-3 col-lg-3 col-md-5 col-sm-6 col-12 justify-content-center">
+        <img src={"img/portraits/" + photoId + ".png"}
+             className="col-xl-10 col-lg-10 col-md-10 col-sm-8 col-5 mb-2 mt-2"
+             alt={name}/>
+        <div className="col-12">
+            <h4>{name}</h4>
+            <div className="team-member-description">
+                {description}
+            </div>
+        </div>
+    </div>
+);
+
+const TeamSection = () => (
+    <ContentSection name="team" title="The Team">
+        <div className="row justify-content-center">
+            <TeamMember photoId="aiosup" name="Prof. dr. ir. Alexandru Iosup"
+                        description="Project Lead"/>
+            <TeamMember photoId="loverweel" name="Leon Overweel"
+                        description="Product Lead and Software Engineer responsible for the web server, database, and
+                        API specification"/>
+            <TeamMember photoId="gandreadis" name="Georgios Andreadis"
+                        description="Software Engineer responsible for the frontend web application"/>
+            <TeamMember photoId="mbijman" name="Matthijs Bijman"
+                        description="Software Engineer responsible for the datacenter simulator"/>
+        </div>
+    </ContentSection>
+);
+
+export default TeamSection;
diff --git a/src/components/home/TechnologiesSection.js b/src/components/home/TechnologiesSection.js
new file mode 100644
index 00000000..79c1eaee
--- /dev/null
+++ b/src/components/home/TechnologiesSection.js
@@ -0,0 +1,32 @@
+import React from "react";
+import FontAwesome from "react-fontawesome";
+import ContentSection from "./ContentSection";
+
+const TechnologiesSection = () => (
+    <ContentSection name="technologies" title="Technologies">
+        <ul className="list-group text-left">
+            <li className="list-group-item list-group-item-primary">
+                <FontAwesome name="window-maximize"/> &nbsp;
+                <strong>Browser</strong> &nbsp;
+                JavaScript, React, Redux, HTML5 Canvas
+            </li>
+            <li className="list-group-item list-group-item-warning">
+                <FontAwesome name="television"/> &nbsp;
+                <strong>Server</strong> &nbsp;
+                Python, Flask, FlaskSocketIO, OpenAPI
+            </li>
+            <li className="list-group-item list-group-item-success">
+                <FontAwesome name="database"/> &nbsp;
+                <strong>Database</strong> &nbsp;
+                MariaDB
+            </li>
+            <li className="list-group-item list-group-item-danger">
+                <FontAwesome name="cogs"/> &nbsp;
+                <strong>Simulator</strong> &nbsp;
+                Kotlin
+            </li>
+        </ul>
+    </ContentSection>
+);
+
+export default TechnologiesSection;
diff --git a/src/components/navigation/AppNavbar.js b/src/components/navigation/AppNavbar.js
new file mode 100644
index 00000000..83959f08
--- /dev/null
+++ b/src/components/navigation/AppNavbar.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import Mailto from "react-mailto";
+import {Link} from "react-router-dom";
+import Navbar, {NavItem} from "./Navbar";
+import "./Navbar.css";
+
+const AppNavbar = () => (
+    <Navbar>
+        <NavItem route="/simulations">
+            <Link className="nav-link simulations" title="Simulations" to="/simulations">Simulations</Link>
+        </NavItem>
+        <NavItem route="email">
+            <Mailto className="nav-link support" title="Support" email="opendc@atlarge-research.com"
+                    headers={{subject: "OpenDC Support"}}>
+                Support
+            </Mailto>
+        </NavItem>
+
+    </Navbar>
+);
+
+export default AppNavbar;
diff --git a/src/components/navigation/HomeNavbar.js b/src/components/navigation/HomeNavbar.js
new file mode 100644
index 00000000..9c393da4
--- /dev/null
+++ b/src/components/navigation/HomeNavbar.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import Navbar from "./Navbar";
+import "./Navbar.css";
+
+const ScrollNavItem = ({id, name}) => (
+    <li className="nav-item">
+        <a className="nav-link" href={id}>{name}</a>
+    </li>
+);
+
+const HomeNavbar = () => (
+    <Navbar>
+        <ScrollNavItem id="#stakeholders" name="Stakeholders"/>
+        <ScrollNavItem id="#modeling" name="Modeling"/>
+        <ScrollNavItem id="#simulation" name="Simulation"/>
+        <ScrollNavItem id="#technologies" name="Technologies"/>
+        <ScrollNavItem id="#team" name="Team"/>
+        <ScrollNavItem id="#contact" name="Contact"/>
+    </Navbar>
+);
+
+export default HomeNavbar;
diff --git a/src/components/navigation/Navbar.js b/src/components/navigation/Navbar.js
index 5a4cd29e..c0c8c006 100644
--- a/src/components/navigation/Navbar.js
+++ b/src/components/navigation/Navbar.js
@@ -1,6 +1,5 @@
 import classNames from "classnames";
 import React from 'react';
-import Mailto from "react-mailto";
 import {Link, withRouter} from "react-router-dom";
 import {userIsLoggedIn} from "../../auth/index";
 import Login from "../../containers/auth/Login";
@@ -8,7 +7,7 @@ import Logout from "../../containers/auth/Logout";
 import ProfileName from "../../containers/auth/ProfileName";
 import "./Navbar.css";
 
-const NavItem = withRouter(props => <NavItemWithoutRoute {...props}/>);
+export const NavItem = withRouter(props => <NavItemWithoutRoute {...props}/>);
 
 const NavItemWithoutRoute = ({route, location, children}) => (
     <li className={classNames("nav-item", location.pathname === route ? "active" : undefined)}>
@@ -16,8 +15,8 @@ const NavItemWithoutRoute = ({route, location, children}) => (
     </li>
 );
 
-const Navbar = () => (
-    <nav className="navbar fixed-top navbar-toggleable-md navbar-light bg-faded">
+const Navbar = ({children}) => (
+    <nav className="navbar fixed-top navbar-expand-lg navbar-light bg-faded" id="navbar">
         <div className="container">
             <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                     data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
@@ -30,16 +29,7 @@ const Navbar = () => (
 
             <div className="collapse navbar-collapse" id="navbarSupportedContent">
                 <ul className="navbar-nav mr-auto">
-                    <NavItem route="/simulations">
-                        <Link className="nav-link simulations" title="Simulations"
-                              to="/simulations">Simulations</Link>
-                    </NavItem>
-                    <NavItem route="email">
-                        <Mailto className="nav-link support" title="Support" email="opendc.tudelft@gmail.com"
-                                headers={{subject: "OpenDC Support"}}>
-                            Support
-                        </Mailto>
-                    </NavItem>
+                    {children}
                 </ul>
                 <ul className="navbar-nav">
                     {userIsLoggedIn() ?
diff --git a/src/components/navigation/Navbar.sass b/src/components/navigation/Navbar.sass
index 80346660..8e95b9c6 100644
--- a/src/components/navigation/Navbar.sass
+++ b/src/components/navigation/Navbar.sass
@@ -26,45 +26,11 @@
     display: inline-block
     width: 30px
 
-.navbar-button-group
-  display: inline-block
-  height: 100%
-
-  a
-    display: inline-block
-    line-height: $navbar-height
-    text-align: center
-    color: $gray-very-dark
-
-    +clickable
-    +transition(background, $transition-length)
-
-  a:hover
-    color: $gray-dark
-
-.navigation
-  margin-left: 10px
-
-  .simulations
-    float: left
-    padding: 0 20px
-
-    font-size: 12pt
-
-.user-controls
-  float: right
-  margin-right: $global-padding
-
-  .support
-    float: left
-    margin-top: -1px
-
-    width: $navbar-height
-
-    font-size: 14pt
-
-  .username
-    float: left
-    padding: 0 20px
-
-    font-size: 12pt
+.login
+  height: 40px
+  background: $blue
+  border: none
+  +clickable
+
+  &:hover
+    background: $blue-dark