Add content sections to homepage

35 files changed, 349 insertions, 126 deletions

diff --git a/public/img/portraits/aiosup.png b/public/img/portraits/aiosup.png
new file mode 100644
index 00000000..30de349c
--- /dev/null
+++ b/public/img/portraits/aiosup.png
diff --git a/public/img/portraits/gandreadis.png b/public/img/portraits/gandreadis.png
new file mode 100644
index 00000000..403870fa
--- /dev/null
+++ b/public/img/portraits/gandreadis.png
diff --git a/public/img/portraits/loverweel.png b/public/img/portraits/loverweel.png
new file mode 100644
index 00000000..d12a9e86
--- /dev/null
+++ b/public/img/portraits/loverweel.png
diff --git a/public/img/portraits/mbijman.png b/public/img/portraits/mbijman.png
new file mode 100644
index 00000000..decf9fdd
--- /dev/null
+++ b/public/img/portraits/mbijman.png
diff --git a/public/img/stakeholders/Developer.png b/public/img/stakeholders/Developer.png
new file mode 100644
index 00000000..d2638e6c
--- /dev/null
+++ b/public/img/stakeholders/Developer.png
diff --git a/public/img/stakeholders/Manager.png b/public/img/stakeholders/Manager.png
new file mode 100644
index 00000000..92db7459
--- /dev/null
+++ b/public/img/stakeholders/Manager.png
diff --git a/public/img/stakeholders/Researcher.png b/public/img/stakeholders/Researcher.png
new file mode 100644
index 00000000..d87edd39
--- /dev/null
+++ b/public/img/stakeholders/Researcher.png
diff --git a/public/img/stakeholders/Sales.png b/public/img/stakeholders/Sales.png
new file mode 100644
index 00000000..5b7c3a72
--- /dev/null
+++ b/public/img/stakeholders/Sales.png
diff --git a/public/img/stakeholders/Student.png b/public/img/stakeholders/Student.png
new file mode 100644
index 00000000..a4900303
--- /dev/null
+++ b/public/img/stakeholders/Student.png
diff --git a/public/img/tudelft-icon.png b/public/img/tudelft-icon.png
new file mode 100644
index 00000000..a7a2d56a
--- /dev/null
+++ b/public/img/tudelft-icon.png
diff --git a/public/index.html b/public/index.html
index 065185d3..b5d509cb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,8 +28,8 @@
     <meta name="google-signin-client_id"
           content="311799954046-jv2inpg9nu7m0avcg6gulvkuvfgbtgb4.apps.googleusercontent.com">
 
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
-          integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
+          integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
     <script src="https://use.fontawesome.com/ece66a2e7c.js"></script>
 </head>
@@ -38,14 +38,14 @@
     You need to enable JavaScript to run this app.
 </noscript>
 <div id="root"></div>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"
-        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
         crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
-        integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
+        integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
         crossorigin="anonymous"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
-        integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
+        integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
         crossorigin="anonymous"></script>
 </body>
 </html>
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
diff --git a/src/containers/auth/Login.js b/src/containers/auth/Login.js
index 3bc36a17..be4b07ee 100644
--- a/src/containers/auth/Login.js
+++ b/src/containers/auth/Login.js
@@ -31,8 +31,7 @@ class LoginContainer extends React.Component {
                 clientId="311799954046-jv2inpg9nu7m0avcg6gulvkuvfgbtgb4.apps.googleusercontent.com"
                 onSuccess={this.onAuthResponse.bind(this)}
                 onFailure={this.onAuthResponse.bind(this)}
-                style={{height: "40px"}}
-                className="btn btn-secondary"
+                className="login btn btn-primary"
             >
                 <span className='fa fa-google'/>
                 {' '}
diff --git a/src/index.sass b/src/index.sass
index dcf3f0ee..76383352 100644
--- a/src/index.sass
+++ b/src/index.sass
@@ -5,7 +5,6 @@ html, body, #root
   height: 100%
 
   font-family: Roboto, Helvetica, Verdana, sans-serif
-  overflow: hidden
   background: #eee
 
 .full-height
diff --git a/src/pages/App.js b/src/pages/App.js
index ce6556fb..ade2536d 100644
--- a/src/pages/App.js
+++ b/src/pages/App.js
@@ -4,7 +4,7 @@ import {connect} from "react-redux";
 import {openSimulationSucceeded} from "../actions/simulations";
 import {fetchLatestDatacenter} from "../actions/topology";
 import MapStage from "../components/map/MapStage";
-import Navbar from "../components/navigation/Navbar";
+import AppNavbar from "../components/navigation/AppNavbar";
 
 class AppContainer extends React.Component {
     static propTypes = {
@@ -19,7 +19,7 @@ class AppContainer extends React.Component {
     render() {
         return (
             <div className="page-container full-height">
-                <Navbar/>
+                <AppNavbar/>
                 <div className="full-height">
                     <MapStage/>
                 </div>
diff --git a/src/pages/Home.js b/src/pages/Home.js
index dd5fd492..c315b73e 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,11 +1,36 @@
 import React from 'react';
-import Navbar from "../components/navigation/Navbar";
+import ContactSection from "../components/home/ContactSection";
+import JumbotronHeader from "../components/home/JumbotronHeader";
+import ModelingSection from "../components/home/ModelingSection";
+import SimulationSection from "../components/home/SimulationSection";
+import StakeholderSection from "../components/home/StakeholderSection";
+import TeamSection from "../components/home/TeamSection";
+import TechnologiesSection from "../components/home/TechnologiesSection";
+import HomeNavbar from "../components/navigation/HomeNavbar";
+import jQuery from "../util/jquery";
 import "./Home.css";
 
-const Home = () => (
-    <div className="body-wrapper">
-        <Navbar/>
-    </div>
-);
+class Home extends React.Component {
+    componentDidMount() {
+        jQuery("body-wrapper").scrollspy({target: "#navbar"});
+    }
+
+    render() {
+        return (
+            <div>
+                <HomeNavbar/>
+                <div className="body-wrapper page-container" data-spy="scroll" data-target="#navbar">
+                    <JumbotronHeader/>
+                    <StakeholderSection/>
+                    <ModelingSection/>
+                    <SimulationSection/>
+                    <TechnologiesSection/>
+                    <TeamSection/>
+                    <ContactSection/>
+                </div>
+            </div>
+        );
+    }
+}
 
 export default Home;
diff --git a/src/pages/Home.sass b/src/pages/Home.sass
index 58fbf6b2..9c812db2 100644
--- a/src/pages/Home.sass
+++ b/src/pages/Home.sass
@@ -1,4 +1,9 @@
-// Fix for the white space appearing otherwise on the right of the page, on mobile
 .body-wrapper
-  overflow-x: hidden
+  position: relative
   overflow-y: hidden
+
+.intro-section, .modeling-section, .technologies-section
+  background-color: #fff
+
+.stakeholder-section, .simulation-section, .team-section
+  background-color: #f2f2f2
diff --git a/src/pages/Profile.js b/src/pages/Profile.js
index d4594c9e..4f69b408 100644
--- a/src/pages/Profile.js
+++ b/src/pages/Profile.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import {connect} from "react-redux";
 import {openDeleteProfileModal} from "../actions/profile";
-import Navbar from "../components/navigation/Navbar";
+import AppNavbar from "../components/navigation/AppNavbar";
 import DeleteProfileModal from "../containers/profile/DeleteProfileModal";
 
 const ProfileContainer = ({onDelete}) => (
     <div className="full-height">
-        <Navbar/>
+        <AppNavbar/>
         <div className="container text-page-container full-height">
             <button className="btn btn-danger" onClick={onDelete}>Delete my account on OpenDC</button>
             <p>
diff --git a/src/pages/Simulations.js b/src/pages/Simulations.js
index 6c40516d..52551139 100644
--- a/src/pages/Simulations.js
+++ b/src/pages/Simulations.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {connect} from "react-redux";
 import {addSimulation, openNewSimulationModal} from "../actions/simulations";
 import {fetchAuthorizationsOfCurrentUser} from "../actions/users";
-import Navbar from "../components/navigation/Navbar";
+import AppNavbar from "../components/navigation/AppNavbar";
 import SimulationFilterPanel from "../components/simulations/FilterPanel";
 import NewSimulationButton from "../components/simulations/NewSimulationButton";
 import NewSimulationModal from "../containers/simulations/NewSimulationModal";
@@ -16,7 +16,7 @@ class SimulationsContainer extends React.Component {
     render() {
         return (
             <div className="full-height">
-                <Navbar/>
+                <AppNavbar/>
                 <div className="container text-page-container full-height">
                     <SimulationFilterPanel/>
                     <VisibleSimulationList/>