landing page (AgileVentures#196)

* Restyling the homepage
* Get background image working, remove footer

Author: mattwr18

src/assets/Footer.css

@@ -1,6 +1,5 @@
 .footer {
   width: 100%;
-  margin-top: 3rem;
   background-color: #2c3e50;
 }
 

src/assets/Homepage.css

@@ -0,0 +1,9 @@
+.landing-page-background {
+  margin: 0px 0px -15px 0px;
+  padding: 0;
+  background-color: rgba(238, 238, 238, 0.4) !important;
+  background: url("../images/landing-page-background.png");
+  background-blend-mode: color;
+  background-size: cover;
+  background-position: center;
+}

src/assets/HomepageModal.css

@@ -0,0 +1,28 @@
+#landing-page-cards {
+  display: flex;
+  flex: 0 0 auto;
+  background: white;
+  text-align: center;
+  width: 100%;
+  margin-bottom: 35px;
+  margin-top: 35px;
+  border-radius: 5px;
+  box-shadow: 0 10px 35px rgba(50,50,93,.1),0 2px 15px rgba(0,0,0,.07);
+}
+
+.card-pic-wrap {
+  border-radius: 5px 0 0 5px;
+  flex: 0 0 auto;
+  position: relative;
+  img {
+    padding: 25px;
+  }
+}
+
+.card-content {
+  padding: 3em 4em 2em;
+}
+
+.card-content p {
+  font-size: 1.3em;
+}

src/components/App.js

@@ -4,7 +4,7 @@ import UserProfile from '../containers/UserProfile'
 import { Route, Switch } from 'react-router-dom'
 import ProjectsList from '../containers/ProjectsList'
 import ProjectInfo from '../containers/ProjectInfo'
-import Homepage from '../components/homepage/Homepage'
+import Homepage from '../components/Homepage'
 import Footer from '../components/Footer'
 import Navbar from './navbar/Navbar'
 import About from '../containers/About'

src/components/Homepage.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react'
+import { Grid, Container } from 'semantic-ui-react'
+import Modal from './HomepageModal'
+import modalContent from '../helpers/modals'
+
+import '../assets/Homepage.css'
+
+export class Homepage extends Component {
+  modals = modalContent.map(item => <Modal key={item.reactId} content={item} />);
+  render () {
+    return (
+      <div className='landing-page-background'>
+        <Container>
+          <Grid columns={2} stackable>
+            <Grid.Column width={12}>
+              {this.modals[0]}
+            </Grid.Column>
+            <Grid.Column width={12} floated='right'>
+              {this.modals[1]}
+            </Grid.Column>
+            <Grid.Column width={12}>
+              {this.modals[2]}
+            </Grid.Column>
+            <Grid.Column width={12} floated='right'>
+              {this.modals[3]}
+            </Grid.Column>
+            <Grid.Column width={12}>
+              {this.modals[4]}
+            </Grid.Column>
+          </Grid>
+        </Container>
+      </div>
+    )
+  }
+}
+
+export default Homepage

src/components/HomepageModal.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Container, Grid, Header } from 'semantic-ui-react'
+import '../assets/HomepageModal.css'
+
+export default ({ content }) => (
+  <Container>
+    <Grid columns={3} id='landing-page-cards' stackable>
+      <Grid.Row>
+        <Grid.Column width={6} className='card-pic-wrap'>
+          <img src={content.image} alt={content.imageAltText} />
+        </Grid.Column>
+        <Grid.Column width={2} />
+        <Grid.Column width={6} className='card-content'>
+          <Header as='h2'>{content.title}</Header>
+          <p>
+            {content.modalText}
+          </p>
+        </Grid.Column>
+      </Grid.Row>
+    </Grid>
+  </Container>
+)

src/components/homepage/Homepage.css

@@ -1,12 +1,12 @@
-import codingWithCat from '../../images/coding-with-cat.svg'
-import realprojects from '../../images/real-projects.svg'
-import runners from '../../images/runners.svg'
-import jobs from '../../images/jobs.svg'
-import scrum from '../../images/scrum.svg'
+import codingWithCat from '../images/coding-with-cat.svg'
+import realprojects from '../images/real-projects.svg'
+import runners from '../images/runners.svg'
+import jobs from '../images/jobs.svg'
+import scrum from '../images/scrum.svg'
 
 const modals = [
   {
-    buttonText: 'You are here!',
+    title: 'Are you ...',
     xsOffset: 1,
     height: '150px',
     reactId: 'here',
@@ -16,7 +16,7 @@ const modals = [
     modalText: 'Tired of toy projects, tutorials and online courses?'
   },
   {
-    buttonText: 'Scrums',
+    title: 'Scrums',
     xsOffset: 10,
     height: '250px',
     reactId: 'scrums',
@@ -27,7 +27,7 @@ const modals = [
     modalText: 'Meet others and plan your work in online hangouts.'
   },
   {
-    buttonText: 'Real Projects',
+    title: 'Real Projects',
     xsOffset: 4,
     height: '250px',
     reactId: 'projects',
@@ -37,7 +37,7 @@ const modals = [
     modalText: 'Satisfy real charity clients around the world.'
   },
   {
-    buttonText: 'Sprints',
+    title: 'Sprints',
     xsOffset: 6,
     height: '600px',
     reactId: 'sprints',
@@ -47,7 +47,7 @@ const modals = [
     modalText: 'Commit to a week long sprint to accelerate your learning.'
   },
   {
-    buttonText: 'Jobs',
+    title: 'Jobs',
     xsOffset: 8,
     height: '920px',
     reactId: 'jobs',