Complete homepage transfer

5 files changed, 90 insertions, 25 deletions

diff --git a/src/components/home/ContactSection.js b/src/components/home/ContactSection.js
index c8494c4d..1ec5e9c7 100644
--- a/src/components/home/ContactSection.js
+++ b/src/components/home/ContactSection.js
@@ -9,14 +9,14 @@ const ContactSection = () => (
         <div className="row justify-content-center">
             <div className="col-4">
                 <a href="https://github.com/atlarge-research/opendc">
-                    <FontAwesome name="github" size="3x"/>
+                    <FontAwesome name="github" size="3x" className="mb-2"/>
                     <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"/>
+                    <FontAwesome name="envelope" size="3x" className="mb-2"/>
                     <div className="w-100"/>
                     opendc@atlarge-research.com
                 </Mailto>
diff --git a/src/components/home/IntroSection.js b/src/components/home/IntroSection.js
new file mode 100644
index 00000000..246786f2
--- /dev/null
+++ b/src/components/home/IntroSection.js
@@ -0,0 +1,38 @@
+import React from "react";
+
+const IntroSection = () => (
+    <section id="intro" className="intro-section">
+        <div className="container pt-5 pb-3">
+            <div className="row justify-content-center">
+                <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+                    <h4>The datacenter (DC) industry...</h4>
+                    <ul>
+                        <li>Is worth over $15 bn, and growing</li>
+                        <li>Has many hard-to-grasp concepts</li>
+                        <li>Needs to become accessible to many</li>
+                    </ul>
+                </div>
+                <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+                    <img src="img/datacenter-drawing.png"
+                         className="col-12 img-fluid"
+                         alt="Schematic top-down view of a datacenter"/>
+                    <p className="col-12 figure-caption text-center">
+                        <a href="http://www.dolphinhosts.co.uk/wp-content/uploads/2013/07/data-centers.gif">
+                            Image source
+                        </a>
+                    </p>
+                </div>
+                <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+                    <h4>OpenDC provides...</h4>
+                    <ul>
+                        <li>Collaborative online DC modeling</li>
+                        <li>Diverse and effective DC simulation</li>
+                        <li>Exploratory DC performance feedback</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+);
+
+export default IntroSection;
diff --git a/src/components/home/StakeholderSection.js b/src/components/home/StakeholderSection.js
index 47f0d9bb..ddfe4f7c 100644
--- a/src/components/home/StakeholderSection.js
+++ b/src/components/home/StakeholderSection.js
@@ -2,10 +2,11 @@ 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>
+    <div className="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6">
+        <img src={"img/stakeholders/" + name + ".png"}
+             className="col-xl-3 col-lg-4 col-md-4 col-sm-4 col-4 img-fluid" alt={title}/>
+        <div className="text-center mt-2">
+            <h4>{title}</h4>
             <p>{subtitle}</p>
         </div>
     </div>
diff --git a/src/components/navigation/Navbar.js b/src/components/navigation/Navbar.js
index c0c8c006..e621b1e4 100644
--- a/src/components/navigation/Navbar.js
+++ b/src/components/navigation/Navbar.js
@@ -8,6 +8,7 @@ import ProfileName from "../../containers/auth/ProfileName";
 import "./Navbar.css";
 
 export const NavItem = withRouter(props => <NavItemWithoutRoute {...props}/>);
+export const LoggedInSection = withRouter(props => <LoggedInSectionWithoutRoute {...props}/>);
 
 const NavItemWithoutRoute = ({route, location, children}) => (
     <li className={classNames("nav-item", location.pathname === route ? "active" : undefined)}>
@@ -15,6 +16,33 @@ const NavItemWithoutRoute = ({route, location, children}) => (
     </li>
 );
 
+const LoggedInSectionWithoutRoute = ({location}) => (
+        <ul className="navbar-nav auth-links">
+            {userIsLoggedIn() ?
+                [
+                    location.pathname === "/" ?
+                        <NavItem route="/simulations" key="simulations">
+                            <Link className="nav-link" title="My Simulations" to="/simulations">
+                                My Simulations
+                            </Link>
+                        </NavItem> :
+                        <NavItem route="/profile" key="profile">
+                            <Link className="nav-link" title="My Profile" to="/profile">
+                                <ProfileName/>
+                            </Link>
+                        </NavItem>,
+                    <NavItem route="logout" key="logout">
+                        <Logout/>
+                    </NavItem>
+                ] :
+                <NavItem route="login">
+                    <Login visible={true}/>
+                </NavItem>
+            }
+        </ul>
+    )
+;
+
 const Navbar = ({children}) => (
     <nav className="navbar fixed-top navbar-expand-lg navbar-light bg-faded" id="navbar">
         <div className="container">
@@ -31,23 +59,7 @@ const Navbar = ({children}) => (
                 <ul className="navbar-nav mr-auto">
                     {children}
                 </ul>
-                <ul className="navbar-nav">
-                    {userIsLoggedIn() ?
-                        [
-                            <NavItem route="/profile">
-                                <Link className="username nav-link" title="My Profile" to="/profile">
-                                    <ProfileName/>
-                                </Link>
-                            </NavItem>,
-                            <NavItem route="logout">
-                                <Logout/>
-                            </NavItem>
-                        ] :
-                        <NavItem route="login">
-                            <Login visible={true}/>
-                        </NavItem>
-                    }
-                </ul>
+                <LoggedInSection/>
             </div>
         </div>
     </nav>
diff --git a/src/pages/Home.js b/src/pages/Home.js
index c315b73e..4f3e2cc0 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import ContactSection from "../components/home/ContactSection";
+import IntroSection from "../components/home/IntroSection";
 import JumbotronHeader from "../components/home/JumbotronHeader";
 import ModelingSection from "../components/home/ModelingSection";
 import SimulationSection from "../components/home/SimulationSection";
@@ -12,15 +13,28 @@ import "./Home.css";
 
 class Home extends React.Component {
     componentDidMount() {
-        jQuery("body-wrapper").scrollspy({target: "#navbar"});
+        const scrollOffset = 60;
+        jQuery("#navbar").find("li a").click(function (e) {
+            if (jQuery(e.target).parent(".auth-links")) {
+                return;
+            }
+            e.preventDefault();
+            jQuery(jQuery(this).attr('href'))[0].scrollIntoView();
+            window.scrollBy(0, -scrollOffset);
+        });
+        jQuery("body").scrollspy({
+            target: "#navbar",
+            offset: scrollOffset
+        });
     }
 
     render() {
         return (
             <div>
                 <HomeNavbar/>
-                <div className="body-wrapper page-container" data-spy="scroll" data-target="#navbar">
+                <div className="body-wrapper page-container">
                     <JumbotronHeader/>
+                    <IntroSection/>
                     <StakeholderSection/>
                     <ModelingSection/>
                     <SimulationSection/>