From 7aea29d0b22f7e5932c9b147611fe02373bb9645 Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Sun, 27 Aug 2017 22:33:41 +0200 Subject: Add content sections to homepage --- src/components/home/ContactSection.js | 50 +++++++++++++++++------------- src/components/home/ContactSection.sass | 15 +++++++++ src/components/home/ContentSection.js | 7 ++--- src/components/home/ContentSection.sass | 22 ++----------- src/components/home/JumbotronHeader.js | 17 ++++++++++ src/components/home/JumbotronHeader.sass | 16 ++++++++++ src/components/home/ModelingSection.js | 19 ++++++++++++ src/components/home/ScreenshotSection.js | 23 ++++++++++++++ src/components/home/ScreenshotSection.sass | 5 +++ src/components/home/SimulationSection.js | 19 ++++++++++++ src/components/home/StakeholderSection.js | 26 ++++++++++++++++ src/components/home/TeamSection.js | 34 ++++++++++++++++++++ src/components/home/TechnologiesSection.js | 32 +++++++++++++++++++ 13 files changed, 240 insertions(+), 45 deletions(-) create mode 100644 src/components/home/ContactSection.sass create mode 100644 src/components/home/JumbotronHeader.js create mode 100644 src/components/home/JumbotronHeader.sass create mode 100644 src/components/home/ModelingSection.js create mode 100644 src/components/home/ScreenshotSection.js create mode 100644 src/components/home/ScreenshotSection.sass create mode 100644 src/components/home/SimulationSection.js create mode 100644 src/components/home/StakeholderSection.js create mode 100644 src/components/home/TeamSection.js create mode 100644 src/components/home/TechnologiesSection.js (limited to 'src/components/home') 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 = () => ( - -

Contact

+ +
+
+ + + +
+ + +
+ opendc@atlarge-research.com + +
+
- TU Delft Logo - -
- A project by the @Large Research Group. +
+
+ A project by the   + + @Large Research Group + . +
); 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}) => (
-
- {children} -
+

{title}

+ {children}
); 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 = () => ( +
+
+
+

OpenDC

+

+ Collaborative Datacenter Simulation and Exploration for Everybody +

+
+
+
+); + +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 = () => ( + +

Collaboratively...

+
    +
  • Model DC layout, and room locations and types
    • +
  • Place racks in rooms and nodes in racks
    • +
  • Add real-world CPU, GPU, memory, storage and network units to each node
    • +
  • Select from diverse scheduling policies
    • +
+ +); + +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}) => ( + +
+
+ {children} +
+
+ {caption}/ +
+ {caption} +
+
+
+ +); + +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 = () => ( + +

Working with OpenDC:

+
    +
  • Seamlessly switch between construction and simulation modes
    • +
  • Choose one of several predefined workloads (Big Data, Bag of Tasks, Hadoop, etc.)
    • +
  • Play, pause, and skip around the informative simulation timeline
    • +
  • Visualize and demo live
    • +
+ +); + +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}) => ( +
+ {title}/ +
+

{title}

+

{subtitle}

+
+
+); + +const StakeholderSection = () => ( + +
+ + + + + +
+ +); + +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}) => ( +
+ {name}/ +
+

{name}

+
+ {description} +
+
+
+); + +const TeamSection = () => ( + +
+ + + + +
+ +); + +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 = () => ( + +
    +
  • +   + Browser   + JavaScript, React, Redux, HTML5 Canvas +
    • +
  • +   + Server   + Python, Flask, FlaskSocketIO, OpenAPI +
    • +
  • +   + Database   + MariaDB +
    • +
  • +   + Simulator   + Kotlin +
    • +
+ +); + +export default TechnologiesSection; -- cgit v1.2.3