From 32074e230c89740c57afb722c7180fa37634b3a6 Mon Sep 17 00:00:00 2001
From: YOUR NAME <YOUR@EMAIL.com>
Date: Sun, 24 Jun 2018 18:46:32 +1000
Subject: [PATCH] added cards, looks good on mobile

---
 src/components/Decks.js     | 72 +++++++++++++++++++++++++++++++++++++
 src/pages/Homepage/index.js | 67 ++++++++++++++++++----------------
 2 files changed, 108 insertions(+), 31 deletions(-)
 create mode 100644 src/components/Decks.js

diff --git a/src/components/Decks.js b/src/components/Decks.js
new file mode 100644
index 0000000..cdce61e
--- /dev/null
+++ b/src/components/Decks.js
@@ -0,0 +1,72 @@
+import React from "react";
+import {
+  Card,
+  Button,
+  CardImg,
+  CardTitle,
+  CardText,
+  CardDeck,
+  CardSubtitle,
+  CardBody
+} from "reactstrap";
+
+const InventionProcessDeck = props => {
+  return (
+    <CardDeck>
+      <Card>
+        <CardImg
+          top
+          width="100%"
+          src="https://i.pinimg.com/736x/9b/94/33/9b94336802fcc7d8c4ca92f7a8d49814.jpg"
+          alt="Card image cap"
+        />
+        <CardBody>
+          <CardTitle>Product Design</CardTitle>
+          <CardSubtitle>Card subtitle</CardSubtitle>
+          <CardText>
+            This is a wider card with supporting text below as a natural lead-in
+            to additional content. This content is a little bit longer.
+          </CardText>
+          <Button>Button</Button>
+        </CardBody>
+      </Card>
+      <Card>
+        <CardImg
+          top
+          width="100%"
+          src="https://i.pinimg.com/736x/72/47/b6/7247b66abf6ef7ae84eb6fd7b9bf2273--d-prints-d-models.jpg"
+          alt="Card image cap"
+        />
+        <CardBody>
+          <CardTitle>Rapid Prototyping</CardTitle>
+          <CardSubtitle>Card subtitle</CardSubtitle>
+          <CardText>
+            This card has supporting text below as a natural lead-in to
+            additional content.
+          </CardText>
+          <Button>Button</Button>
+        </CardBody>
+      </Card>
+      <Card>
+        <CardImg
+          top
+          width="100%"
+          src="https://i.pinimg.com/736x/02/d7/48/02d748ba33a49896a43341e69f788d17--process-engineering-manufacturing-engineering.jpg"
+          alt="Card image cap"
+        />
+        <CardBody>
+          <CardTitle>Manufacturing</CardTitle>
+          <CardSubtitle>Card subtitle</CardSubtitle>
+          <CardText>
+            This is a wider card with supporting text below as a natural lead-in
+            to additional content. This card has even longer content than the
+            first to show that equal height action.
+          </CardText>
+          <Button>Button</Button>
+        </CardBody>
+      </Card>
+    </CardDeck>
+  );
+};
+
+export default InventionProcessDeck;
diff --git a/src/pages/Homepage/index.js b/src/pages/Homepage/index.js
index 8cdba18..ae1d226 100644
--- a/src/pages/Homepage/index.js
+++ b/src/pages/Homepage/index.js
@@ -6,44 +6,49 @@ import styles from "./index.css";
 import HeadNavbar from "../../components/Navbar.js";
 import ModalExample from "../../components/PopUpSignUp.js";
 import MainJumbotron from "../../components/Jumbotron";
+import InventionProcessDeck from "../../components/Decks";
 // /Users/omar/Desktop/innovationDrive/innovation-drive/src/components/Form.js
 
 export default class Homepage extends Component {
   render() {
     return (
-      <div className="backgroundContainer">
-        <HeadNavbar />
-        <Container>
-          <MainJumbotron />
-        </Container>
+      <div>
+        <div className="backgroundContainer">
+          <HeadNavbar />
+          <Container>
+            <MainJumbotron />
+          </Container>
 
-        <Container>
-          {/* <Row> <img src={require('../kidRocket.jpg')} /> </Row> */}
-          <h3>The Invention Process</h3>
-          <Row className="">
-            {/* ADD BOOTSRAP CARDS HERE */}
-            <Col xs="12" sm="4">
-              <p>Product Design</p>
-              {/* ADD BOOTSRAP CARD HERE */}
-            </Col>
+          <Container>
+            {/* <Row> <img src={require('../kidRocket.jpg')} /> </Row> */}
+            <h3>The Invention Process</h3>
+            <Row className="">
+              {/* ADD BOOTSRAP CARDS HERE */}
+              <Col xs="12" sm="4">
+                <p>Product Design</p>
+                {/* ADD BOOTSRAP CARD HERE */}
+              </Col>
 
-            <Col xs="12" sm="4">
-              <p> Rapid Prototyping </p>
-            </Col>
-            <Col xs="12" sm="4">
-            <p>Manufacturing </p>
-            </Col>
-          </Row>
-        </Container>
-        <Container>
-          <h1>Customer Journey</h1>
-          {/* ADD BOOTSRAP CAROUSEL HERE */}
-        </Container>
-        <Container>
-          <h3>The Invention Process</h3>
-          {/* ADD BOOTSRAP CAROUSEL HERE */}
-        </Container>
-        <Container />
+              <Col xs="12" sm="4">
+                <p> Rapid Prototyping </p>
+              </Col>
+              <Col xs="12" sm="4">
+                <p>Manufacturing </p>
+              </Col>
+            </Row>
+          </Container>
+          <Container>
+            <h1>Customer Journey</h1>
+            {/* ADD BOOTSRAP CAROUSEL HERE */}
+          </Container>
+          <Container>
+            <h3>The Invention Process</h3>
+            {/* ADD BOOTSRAP CAROUSEL HERE */}
+          </Container>
+          <Container />
+
+        </div>
+        <InventionProcessDeck />
       </div>
     );
   }