Made graphical updates to homepage, including restyling the logo, cha…

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 *.log
 .env
+/build

front_end/public/stylesheets/style.css

@@ -1,8 +1,175 @@
 body {
-  padding: 50px;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  margin: auto;
+  font-family: 'Questrial', sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 17px;
 }
 
+h2.title {
+  letter-spacing: 5px;
+  border-radius: 20px;
+  height: 20px;
+  width: 20px;
+  margin-top: 22px;
+}
+
+
 a {
-  color: #00B7FF;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+  color: #4CAF50;
+  font-family: 'Questrial', sans-serif;
+  padding-top: 10px;
+}
+
+.logo {
+  color: #4CAF50;
+  margin-top: 10px;
+  padding: 5px;
+  font-size: 40px;
+}
+
+.nav, h2 {
+  color: rgb(240, 241, 242);
+  padding-left: 5px;
+}
+
+.nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  text-transform: uppercase;
+  background-color: rgb(70, 77, 92);
+  max-width: 100%;
+}
+
+.nav-header-right {
+  margin-top: 15px;
+  padding: 15px;
+}
+
+.nav-header-right, a, button {
+  margin: 6px;
+}
+
+input {
+  padding: 10px;
+  font-size: 14px;
+  border-radius: 10px;
+}
+
+.nav-header-left {
+  display: flex;
+  flex-direction: row;
+  margin-top: 5px;
+  padding: 10px;
+}
+
+
+.spotlight-container-img {
+  z-index: 10;
+  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://www.learnersguild.org/images/photo2.jpg');  height: 700px;
+  max-width: 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.spotlight-message {
+  color: white;
+  font-size: 18px;
+}
+
+.spotlight-header {
+  color: #4CAF50;
+  font-size: 40px;
+  padding-top: 100px;
+  padding-left: 40px;
+  font-weight: 600;
+  letter-spacing: 2px;
+}
+
+button {
+  z-index: -1;
+  background-color: #4CAF50;
+  border: none;
+  border-radius: 10px;
+  padding: 14px;
+  height: 40px;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 14px;
+  font-family: 'Questrial', sans-serif;
+}
+
+.btn-demo{
+  z-index: -1;
+  background-color: #3d4351;
+  border: none;
+  padding: 14px;
+  border-radius: 10px;
+  height: 40px;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 14px;
+  font-family: 'Questrial', sans-serif;
+}
+
+.content {
+  text-align: center;
+  color: black;
+}
+
+.content.h3, .h4 {
+  display: flex;
+  flex-direction: row;
+}
+
+div.feat-1 {
+  background-image: url('/images/1.png');
+  height: 200px;
+  width: 260px;
+  background-repeat: no-repeat;
+  background-position: 60px 50px;
+}
+
+div.feat-2 {
+  background-image: url('/images/2.png');
+  height: 200px;
+  width: 260px;
+  background-repeat: no-repeat;
+  background-position: 60px 50px;
+}
+
+div.feat-3 {
+  background-image: url('/images/3.png');
+  height: 200px;
+  width: 260px;
+  background-repeat: no-repeat;
+  background-position: 60px 50px;
+}
+
+.content-tools {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  text-align: center;
+}
+
+.footer-nav {
+  margin-top: 50px;
+  max-height: 50px;
+  color: rgb(240, 241, 242);
+  background-color: rgb(70, 77, 92);
+}
+
+.footer-nav {
+  color: rgb(240, 241, 242);
+  text-transform: uppercase;
+  display: flex;
 }

frontend/index.js

@@ -0,0 +1 @@
+console.log('browser code here')

package.json

@@ -31,7 +31,6 @@
     "react-router": "^2.6.1"
   },
   "devDependencies": {
-    "mocha": "^3.1.2",
     "babel-cli": "^6.11.4",
     "babel-core": "^6.13.2",
     "babel-preset-es2015": "^6.13.2",

routes/index.js

@@ -3,7 +3,7 @@ const router = express.Router();
 
 /* GET home page. */
 router.get('/', (request, response, next) => {
-  response.render('index', { title: 'Lizardboard' });
+  response.render('index', { title: 'Dragonboard', logo: 'D' });
 });
 
 module.exports = router;

views/footer.pug

@@ -0,0 +1,6 @@
+
+div.footer-nav
+  a(href= '/about') About
+  a(href= '/team') Team
+  a(href= '/contact') Contact
+  a(href= '/login') Login

views/index.pug

@@ -2,8 +2,30 @@ extends layout
 
 block content
 
-  h1=title
+  div.container
 
-  #root
-  script(src="/public/javascripts/index.js")
+    div.spotlight-container
+     div.spotlight-container-img
+      div.spotlight-header LIVE MONITOR DASHBOARD SOFTWARE
+       div.spotlight-message Focus Your Team and Improve Your KPIs
+        div.buttons
+          button.btn.btn-default(type='button') Start Your Free Trial
+          button.btn-demo(type='button') Book A Demo
+      div.spotlight-container-text
 
+    div.content
+     h3 Easy APIs to build dashboards for your next project
+     h4 Quickly see the information important to your team
+
+    div.content-tools
+      div.feat-1
+        a(href='/product') This is Feature 1
+        p Real Time Data Visualiztion
+
+      div.feat-2
+        a(href='/product') This is Feature 2
+        p Real Time Project Updates
+
+      div.feat-3
+        a(href='/product') This is Feature 3
+        p Real Time Sales Goals

views/layout.pug

@@ -1,10 +1,26 @@
 doctype html
 html
   head
-    title= title
     link(href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css')
+    link(href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css')
     link(rel='stylesheet', href='/stylesheets/style.css')
+
+    div.nav
+     div.nav-header-left
+       h1.logo= logo
+       h2.title= title
+
+     div.nav-header-right
+       a(href= '/product') Product
+       a(href= '/login') Login
+       input(type="text", placeholder="Email address")
+       button(type="submit" ) Free Trial
+
   body
     block content
-  script(src="/javascripts/index.js")
 
+    div.footer-nav
+
+    include footer
+    script(src="/javascripts/index.js")
+    script(src="/public/javascripts/index.js")

webpack.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  entry: "./front_end/index.js",
+  output: {
+    path: __dirname + "/public/javascripts",
+    filename: "bundle.js",
+    module: {
+      loaders: [
+        {
+          test: /\.(js|jsx)$/,
+          exclude: /(node_modules|bower_components)/,
+          loader: "babel-loader",
+          query: {
+          }
+        }
+      ]
+    }
+  }
+}