Front page renovation has begun.

joeblas · Nov 22, 2017 · 79d3a4c · 79d3a4c
1 parent 65542ca
commit 79d3a4c
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
   }