diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/home/ContactSection.js | 4 | ||||
| -rw-r--r-- | src/components/home/IntroSection.js | 38 | ||||
| -rw-r--r-- | src/components/home/StakeholderSection.js | 9 | ||||
| -rw-r--r-- | src/components/navigation/Navbar.js | 46 |
4 files changed, 74 insertions, 23 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> |