added background colour, jumbotron, nicer format

src/App.css

@@ -1,12 +1,13 @@
 .App {
   text-align: center;
-  background-color: #FCFCFC;
-
+  background-color: #F3EFE9;
+  font-family: 'Roboto';
+  /* background-color: beige */
 }
 
 .App-logo {
   /* animation: App-logo-spin infinite 20s linear; */
-  height: 78.2px;
+  height: 9.5vh;
 
 }
 

src/components/Footer.js

@@ -13,14 +13,14 @@ export default class Footer extends Component {
       //   </div>
       // </footer>
       <Container style={FooterStyle}>
-        <a href="#CTA">Back to top</a>
+        <a href="#top">Back to top</a>
 
         <Row>
           {" "}
           <Col>
             {" "}
             <p>
-              © 2017 Company, Inc. | <a href="#">Privacy</a> |{" "}
+            Copyright ©2018, Innovation Drive, Inc. - All rights reserved | <a href="#">Privacy</a> |{" "}
               <a href="#">Terms</a>{" "}
             </p>{" "}
           </Col>

src/components/Jumbotron.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { Jumbotron, Button } from "reactstrap";
+import ModalExample from "../components/PopUpSignUp";
+
+const MainJumbotron = props => {
+  return (
+    <div>
+      <Jumbotron className="JumbotronStyle">
+        <h1 className="display-3">Invention Pad</h1>
+        <p className="lead">
+          We take you on a journey to create your physical product idea into a
+          reality and commercialise it, all with you keeping your IP.
+        </p>
+        <hr className="my-2" />
+        <p>
+          Don't live a life of regret seeing your probably shitty idea go to
+          market whilst you sat on your laurels.
+        </p>
+        <p className="lead">
+          <ModalExample />
+        </p>
+      </Jumbotron>
+    </div>
+  );
+};
+
+
+
+
+export default MainJumbotron;

src/components/Navbar.js

@@ -29,7 +29,7 @@ export default class HeadNavbar extends Component {
   }
   render() {
     return (
-      <div>
+      <div id="top">
         <Navbar className="navbar clearfix" light expand="md">
           <NavbarBrand href="/">
           <img src={logo} className="App-logo" alt="logo" />

src/components/PopUpSignUp.js

@@ -21,7 +21,7 @@ class ModalExample extends React.Component {
   render() {
     return (
       <div>
-        <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}Continue</Button>
+        <Button color="primary" onClick={this.toggle}>{this.props.buttonLabel}Make idea a reality!</Button>
         <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
           {/* <ModalHeader toggle={this.toggle}>Free Video Consultation</ModalHeader> */}
           <ModalBody>

src/pages/Homepage/index.css

@@ -10,15 +10,10 @@
   background-position: center center;
 }
 
-.firstContainer {
-  /* background-image: url("../kidRocket.jpg"); */
-  /* background-size: cover; */
-  /* /* max-width: 100%; */
-  /* height: 100%; */
-  /* background-repeat: no-repeat;
-      background-size: contain; */
-  /* background-repeat: no-repeat;
-      background-size: 100% 90%; */
+
+
+.InventionStyle {
+  text-align: center;
 }
 
 .responsive {
@@ -35,3 +30,10 @@
 
 }
 
+.JumbotronStyle {
+  /* background-image: url("../../images/kidRocket.jpg"); */
+  /* background-size: cover; */
+  /* background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%); */
+/* background-color: beige */
+background: none;
+}

src/pages/Homepage/index.js

@@ -5,6 +5,7 @@ import styles from "./index.css";
 // import "./AboveTheFold.css";
 import HeadNavbar from "../../components/Navbar.js";
 import ModalExample from "../../components/PopUpSignUp.js";
+import MainJumbotron from "../../components/Jumbotron";
 // /Users/omar/Desktop/innovationDrive/innovation-drive/src/components/Form.js
 
 export default class Homepage extends Component {
@@ -12,30 +13,37 @@ export default class Homepage extends Component {
     return (
       <div className="backgroundContainer">
         <HeadNavbar />
-        <Container />
+        <Container>
+          <MainJumbotron />
+        </Container>
 
         <Container>
           {/* <Row> <img src={require('../kidRocket.jpg')} /> </Row> */}
-
-          <Row className="firstContainer">
-            <Col xs="6" sm="4">
-            {/* THIS IS A POP UP BOOTRAP MODAL, with a CTA to click on */}
-            <h3> End to end product dev </h3>
-             <ModalExample />
+          <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="6" sm="4">
-
+            <Col xs="12" sm="4">
+              <p> Rapid Prototyping </p>
             </Col>
-            <Col lg="12" sm="4">
-              {/* <EmailForm /> */}
+            <Col xs="12" sm="4">
+            <p>Manufacturing </p>
             </Col>
           </Row>
         </Container>
         <Container>
-          <h1>What Customers Say About Us</h1>
+          <h1>Customer Journey</h1>
           {/* ADD BOOTSRAP CAROUSEL HERE */}
         </Container>
+        <Container>
+          <h3>The Invention Process</h3>
+          {/* ADD BOOTSRAP CAROUSEL HERE */}
+        </Container>
+        <Container />
       </div>
     );
   }