MustWin · tenji240 · Apr 3, 2017 · Apr 3, 2017 · Apr 3, 2017 · Apr 3, 2017
diff --git a/web/config.json b/web/config.json
@@ -11,9 +11,14 @@
 
 	"bundles": {
 		"/css/all.css": [
+      "/css/bootstrap.min.css",
 			"/css/materialize.css",
-			"/css/style.css"
+			"/css/style.css",
+      "/css/mobile.css"
 		],
+    "/js/bootstrap.min.js": [
+      "/js/lib/bootstrap.min.js"
+    ],
 		"/js/client.js": [
 			"/js/contracts.js",
 			"/js/load_deps.js",
@@ -43,7 +48,10 @@
 			"/js/client/capabilities.js",
 			"/js/withdraw/withdraw_form.js",
 			"/js/withdraw_base.js"
-		]
+		],
+    "/js/main.js": [
+      "/js/main.js"
+    ]
 
 	}
 }
diff --git a/web/contents/shared.json b/web/contents/shared.json
@@ -1,6 +1,6 @@
 {
 	"site-title": "TinyPay",
-	"footer-text": "Copyright 2016 MustWin LLC, all rights reserved",
+	"footer-text": "Copyright 2017 Lovable Tech LLC, all rights reserved",
 	"navbar": [
 		{ "label": "Home", "href": "/" },
     { "label": "How it works", "href": "/howitworks" },

diff --git a/web/templates/_footer.handlebars b/web/templates/_footer.handlebars
@@ -1,11 +1,16 @@
 
 			</div> <!-- id="full-height" -->
-			<footer class="page-footer orange">
-				<p>{{{footer-text}}}</p>
+			<footer class="">
+				<p><a href="http://lovable.tech/">{{{footer-text}}}</a></p>
 			</footer>
 
 			<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 			<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
+      <script type="text/javascript">
+        $(document).ready(function(){
+          $('.nav-mobile-btn').sideNav();
+        });
+      </script>
 		</body>
 
 </html>
diff --git a/web/templates/_header.handlebars b/web/templates/_header.handlebars
@@ -9,6 +9,8 @@
 			<title>{{{site-title}}}</title>
 			<meta name="description" content="">
 			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+      <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+      <link rel="icon" href="favicon.ico" type="image/x-icon">
 
 			<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
 
@@ -20,20 +22,20 @@
 
     <body>
 			<header>
-        <nav class="light-blue lighten-1" role="navigation">
-          <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">{{site-title}}</a>
+        <nav class="nav-theme" role="navigation">
+          <div class="nav-wrapper container"><a id="logo-container" href="/" class="brand-logo"><i class="material-icons">attach_money</i>{{site-title}}</a>
             <ul class="right hide-on-med-and-down">
               {{#each navbar}}
       					<li><a href="{{{href}}}">{{label}}</a>
       				{{/each}}
             </ul>
 
+            <a href="#" data-activates="nav-mobile" class="button-collapse nav-mobile-btn"><i class="material-icons">menu</i></a>
             <ul id="nav-mobile" class="side-nav">
               {{#each navbar}}
       					<li><a href="{{{href}}}">{{label}}</a>
       				{{/each}}
             </ul>
-            <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
           </div>
         </nav>
 			</header>

diff --git a/web/templates/css/bootstrap.min.css b/web/templates/css/bootstrap.min.css
diff --git a/web/templates/css/mobile.css b/web/templates/css/mobile.css
@@ -0,0 +1,26 @@
+/* iPhone 6+ and below */
+@media screen and (max-width: 500px) {
+  .hero-bg {
+    height: 500px;
+  }
+
+  .hero-bg .container {
+    margin: 15% auto 0;
+  }
+
+  .nav-mobile-btn {
+    color: #000;
+  }
+
+  #how-it-works {
+    margin-top: 15%;
+  }
+
+  #sidenav-overlay {
+    z-index: 99;
+  }
+
+  footer p {
+    text-align: center;
+  }
+}
diff --git a/web/templates/css/style.css b/web/templates/css/style.css
@@ -6,14 +6,23 @@
  * Made By MaterializeCSS.com
  */
 
+ html, body {
+   height: 100%;
+ }
+
 body {
-  font-family: 'Raleway', sans-serif;
+  font-family: 'Open Sans', sans-serif;
   color: #2d2d2d;
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-family: 'Karla', sans-serif;
-  color: #3e5673 !important;
+  color: #3e5673;
+  letter-spacing: -2px;
+}
+
+p {
+  font-size: 16px;
 }
 
 .icon-block {
@@ -24,7 +33,21 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 #min-height {
-  min-height: 500px;
+  min-height: 50%;
+  overflow: scroll;
+}
+
+#min-height:after {
+  content: "";
+  display: block;
+}
+
+footer, #min-height:after {
+  height: 60px;
+}
+
+blockquote {
+  border-left-color: #3e5673;
 }
 
 .progress {
@@ -43,19 +66,61 @@ h1, h2, h3, h4, h5, h6 {
   width: 100%;
 }
 
+.vertical-center {
+  margin-top: 15%;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+nav {
+  position: fixed;
+  top: 0;
+  z-index: 100;
+}
+
+.nav-theme {
+  background-color: white;
+  color: black;
+}
+
+.nav-theme .brand-logo {
+  color: black;
+}
+
+nav ul li a, nav ul li a:hover {
+  color: black;
+}
+
+nav ul li a:hover {
+  border-bottom: 2px solid black;
+}
+
+footer {
+  position: fixed;
+  bottom: 0;
+  z-index: 100;
+  background: white;
+  box-shadow: 0px -5px 5px 1px rgba(204,204,204,0.5);
+  width: 100%;
+}
+
+.marg-15 {
+  margin-top: 70px;
+}
+
 footer.page-footer {
-  margin-top: 20px;
   padding-top: 0;
-  background-color: #ee6e73;
-  position: absolute;
   width: 100%;
+  z-index: 100;
 }
 
 footer p {
-  color: rgba(255, 255, 255, 0.8);
+  color: black;
   font-weight: 300;
   margin: 0;
-  padding: 24px;
+  padding: 20px 24px;
   font-size: 13px;
   text-align: right;
 }
@@ -69,27 +134,29 @@ h1.header {
   margin: 2.1rem 0 1rem 0
 }
 
-.light-blue.lighten-1 {
-  /*background-color: #1ec4d6 !important;*/
-  background-color: #3e5673 !important;
+.index-title {
+  min-height: 50px;
+}
+.navy-text {
+  color: #3e5673;
 }
 
-.light-blue-text {
-  color: #3e5673 !important;
+.magenta {
+  background-color: #f66;
 }
 
-.orange {
-  background-color: #3e5673 !important;
+.magenta-font {
+  color: #f66;
 }
 
 .btn-large.orange, .btn {
-  background-color: #f66 !important;
-
+  background-color: #f66;
 }
 
-.orange-text {
-  color: #f66 !important;
+.navy {
+  background-color: #3e5673;
 }
+
 .icon-block .material-icons {
   font-size: 60px;
   width: 60px;
@@ -98,7 +165,7 @@ h1.header {
   text-align: center;
 }
 .tinypay-btn {
-  background-color: #f66 !important;
+  background-color: #3e5673;
   padding: 8px 10px 8px 8px;
   line-height: 20px;
 }
@@ -109,6 +176,30 @@ h3 {
   margin-top: 26px;
 }
 pre {
-  background-color: #ddd;
-  padding: 10px 0 10px 0;  
+  background-color: #fefefe;
+  padding: 15px;
+}
+i.large {
+  font-size: 2.92rem;
+}
+
+.hero-bg {
+  height: 900px;
+  background: url(/img/bg.jpg) no-repeat bottom center;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+.btn-large:hover a:hover {
+  color: white;
+}
+
+.hero-bg .container {
+  margin-top: 15%;
+}
+
+.hero-bg h1, .hero-bg h5 {
+  color: black;
 }
diff --git a/web/templates/demo/index.handlebars b/web/templates/demo/index.handlebars
@@ -1,19 +1,21 @@
 {{> header }}
-  <div class="container">
+  <div class="container vertical-center">
 
     <div class="row">
       <h3>Imagine finding a great piece of content</h3>
-      <p>Often sites will pose a paywall like this, now you can collect funds immediately to open the paywall</p>
+      <p>Often sites will pose a paywall like this, now you can collect funds immediately to open the paywall.</p>
     </div>
 
     <div class="row">
-      <div class="col s10 push-s1">
+      <div class="col l10 push-s1">
         <article>
           <section>
-            {{{article_intro}}}
+            <blockquote>
+              {{{article_intro}}}
+            </blockquote>
           </section>
 
-          <div id="CTA"><p>Like the intro? Pay with micropay to reveal the rest of the article.</p>
+          <div id="CTA"><p>Like the intro? Pay with <a href="/signup">tinypay</a> to reveal the rest of the article.</p>
             <div id="tinypay-button"></div>
           </div>
 

diff --git a/web/templates/favicon.ico b/web/templates/favicon.ico
diff --git a/web/templates/img/bg.jpg b/web/templates/img/bg.jpg