Add content sections to homepage

5 files changed, 44 insertions, 14 deletions

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/>