From 79d3a4c9cc88f10ce2a7e719de7aec468ee69de5 Mon Sep 17 00:00:00 2001
From: Joe Gallegos <joebgallegos@gmail.com>
Date: Tue, 21 Nov 2017 21:08:38 -0700
Subject: [PATCH] Front page renovation has begun.

---
 imports/ui/pages/Index/Index.js         | 32 +++++++++++++++++++++++--
 imports/ui/pages/Index/Index.scss       |  8 +++++--
 imports/ui/pages/Invoices/Invoices.js   |  2 +-
 imports/ui/pages/Invoices/Invoices.scss |  6 ++---
 4 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/imports/ui/pages/Index/Index.js b/imports/ui/pages/Index/Index.js
index ffdc86f..074ec2a 100644
--- a/imports/ui/pages/Index/Index.js
+++ b/imports/ui/pages/Index/Index.js
@@ -1,11 +1,39 @@
 import React from 'react';
-import { Button, Image } from 'react-bootstrap';
+import { Button, Image, Row, Col, Jumbotron } from 'react-bootstrap';
+import { LinkContainer } from 'react-router-bootstrap';
+
+
 
 import './Index.scss';
+import { bootstrapUtils } from 'react-bootstrap/lib/utils';
+
+bootstrapUtils.addStyle(Jumbotron, 'custom');
+
 
 const Index = () => (
+  <div>
+ <style type="text/css">{`
+ .jumbotron-custom {
+     background-color: white;
+     color: #01597F;
+ }
+ `}</style>
+  <Row>
+    <Col md="6" sm="12" lg="6">
+      <Jumbotron bsStyle="custom">
+        <h2>Invoicing Made Simple</h2>
+        <p>CloudControl makes creating, sending, and managing invoices so much easier. It's so easy to work. Say goodbye to huge filing cabinets and hello to the cloud. Best of all, it's cheap.</p>
+       <LinkContainer to="/signup"> 
+        <Button href="" bsStyle="success" bsSize="large">Get Started for Free</Button> 
+      </LinkContainer>
+      </Jumbotron>
+    </Col>
+    <Col md="6" sm="12" lg="6">
+      <Image responsive="true" className="col-md-offset-3" src="https://i.imgur.com/hcyPRbP.jpg"/>
+    </Col>
+    </Row>
   <div className="Index">
-    <Image responsive="true" className="col-md-offset-3" src="https://i.imgur.com/hcyPRbP.jpg"/>
+  </div>
   </div>
 );
 
diff --git a/imports/ui/pages/Index/Index.scss b/imports/ui/pages/Index/Index.scss
index ebac7e6..6d681f3 100644
--- a/imports/ui/pages/Index/Index.scss
+++ b/imports/ui/pages/Index/Index.scss
@@ -8,9 +8,13 @@
   border-radius: 3px;
   color: #fff;
 
+  .jumbotron-custom {
+    background-color: white;
+  }
+
   img {
-    width: 600px;
-    height: auto;
+    max-width:100%;
+    height: 20vh;
   }
 
   h1 {
diff --git a/imports/ui/pages/Invoices/Invoices.js b/imports/ui/pages/Invoices/Invoices.js
index 7339ec0..af6273c 100644
--- a/imports/ui/pages/Invoices/Invoices.js
+++ b/imports/ui/pages/Invoices/Invoices.js
@@ -26,7 +26,7 @@ const Invoices = ({ loading, invoices, match, history }) => (!loading ? (
   <div className="Invoices">
     <div className="page-header clearfix">
       <h4 className="pull-left">Invoices</h4>
-      <Link className="btn btn-success pull-right" to={`${match.url}/new`}>New Invoice</Link>
+      <Link className="btn btn-info pull-right" to={`${match.url}/new`}>New Invoice</Link>
     </div>
     {invoices.length ? <Table hover responsive>
       <thead>
diff --git a/imports/ui/pages/Invoices/Invoices.scss b/imports/ui/pages/Invoices/Invoices.scss
index 22ca295..0122938 100644
--- a/imports/ui/pages/Invoices/Invoices.scss
+++ b/imports/ui/pages/Invoices/Invoices.scss
@@ -5,17 +5,17 @@
     cursor: pointer;
   }
 
-  .btn-success {
+  .btn-info {
     background-color: $success;
     border: $success;
     
   }
 
-  .btn-success:hover {
+  .btn-info:hover {
     background-color: #01597F;
   }
 
-  .btn-success:active:hover, .btn-success:active:focus {
+  .btn-info:active:hover, .btn-info:active:focus {
     background-color: #012C40;
   }