From f2de68252a5af08ba73213ae4ea545912ef04690 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Mon, 28 Aug 2017 09:02:38 +0200
Subject: Complete homepage transfer

---
 src/components/home/ContactSection.js     |  4 ++--
 src/components/home/IntroSection.js       | 38 +++++++++++++++++++++++++++++++
 src/components/home/StakeholderSection.js |  9 ++++----
 3 files changed, 45 insertions(+), 6 deletions(-)
 create mode 100644 src/components/home/IntroSection.js

(limited to 'src/components/home')

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>
-- 
cgit v1.2.3