diff options
| author | Georgios Andreadis <g.andreadis@student.tudelft.nl> | 2017-08-28 09:02:38 +0200 |
|---|---|---|
| committer | Georgios Andreadis <g.andreadis@student.tudelft.nl> | 2017-09-23 10:05:46 +0200 |
| commit | f2de68252a5af08ba73213ae4ea545912ef04690 (patch) | |
| tree | 7836560375942765bbf983be2aca133eb6002c11 /src/components/home | |
| parent | 7aea29d0b22f7e5932c9b147611fe02373bb9645 (diff) | |
Complete homepage transfer
Diffstat (limited to 'src/components/home')
| -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 |
3 files changed, 45 insertions, 6 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> |