From 7aea29d0b22f7e5932c9b147611fe02373bb9645 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Sun, 27 Aug 2017 22:33:41 +0200
Subject: Add content sections to homepage

---
 src/components/home/ContactSection.js | 50 ++++++++++++++++++++---------------
 1 file changed, 29 insertions(+), 21 deletions(-)

(limited to 'src/components/home/ContactSection.js')

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 = () => (
-    <ContentSection name="contact">
-        <h1>Contact</h1>
+    <ContentSection name="contact" title="Contact">
+        <div className="row justify-content-center">
+            <div className="col-4">
+                <a href="https://github.com/atlarge-research/opendc">
+                    <FontAwesome name="github" size="3x"/>
+                    <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"/>
+                    <div className="w-100"/>
+                    opendc@atlarge-research.com
+                </Mailto>
+            </div>
+        </div>
         <div className="row">
-            <img src="img/tudelfticon.png" className="col-lg-2 col-md-2 col-sm-3 col-xs-6
-                    col-lg-offset-4 col-md-offset-4 col-sm-offset-3 col-xs-offset-3 tudelft-icon" alt="TU Delft Logo"/>
-            <div className="col-lg-4 col-md-5 col-sm-6 col-xs-10
-                col-lg-offset-0 col-md-offset-0 col-sm-offset-0 col-xs-offset-1 text-left">
-                <div className="row vcenter">
-                    <img src="img/email-icon.png" className="col-lg-2 col-md-2 col-sm-2 col-xs-2" alt="Email Icon"/>
-                    <div className="info-points col-lg-10 col-md-10 col-sm-10 col-xs-10">
-                        <a href="mailto:opendc@atlarge-research.com">opendc@atlarge-research.com</a>
-                    </div>
-                </div>
-                <div className="row vcenter">
-                    <img src="img/github-icon.png" className="col-lg-2 col-md-2 col-sm-2 col-xs-2" alt="Github Icon"/>
-                    <div className="info-points col-lg-10 col-md-10 col-sm-10 col-xs-10">
-                        <a href="https://github.com/atlarge-research/opendc">atlarge-research/opendc</a>
-                    </div>
-                </div>
+            <div className="col text-center">
+                <img src="img/tudelft-icon.png" className="img-fluid tudelft-icon" alt="TU Delft"/>
             </div>
         </div>
-        <div className="atlarge-footer row">
-            A project by the <a href="http://atlarge-research.com"><strong>@Large Research Group</strong></a>.
+        <div className="row">
+            <div className="col text-center">
+                A project by the &nbsp;
+                <a href="http://atlarge.science" target="_blank" rel="noopener noreferrer">
+                    <strong>@Large Research Group</strong>
+                </a>.
+            </div>
         </div>
     </ContentSection>
 );
-- 
cgit v1.2.3