Merge pull request #117 from raziraz/master

Features page and updated heros

app/views/public/about_us.blade.php

@@ -1,18 +1,14 @@
 @extends('public.header')
 
 @section('content')
-  <section class="hero background hero3" data-speed="2" data-type="background">
+  <section class="hero background hero-about" data-speed="2" data-type="background">
-  <div class="caption-side"></div>
+ <div class="container">
-  <div class="container">
+    <div class="row">
-    <div class="row" style="margin:0;">
+          <h1><img src="{{ asset('images/icon-about.png') }}"><span class="thin">About</span> Invoice Ninja</h1>
-      <div class="caption-wrap">
-        <div class="caption">
-          <h1>About <span style="color:#ecd816"> InvoiceNinja</span></h1>
-            </div>
-          </div>
         </div>
       </div>
     </section>
+    </section>
 
  <section class="about center">
   <div class="container">
@@ -23,23 +19,20 @@
         customers. With Invoice Ninja, you can easily build and send beautiful invoices 
         from any device that has access to the web. Your clients can print your invoices, 
         download them as pdf files, and even pay you online from within the system. </p>
-        &nbsp;
-       <h2>Team Ninja</h2>
-        <p>Invoice Ninja is managed by a team of seasoned web workers. We 
-        launched in early 2014 and have been thrilled by the enthusiastic response we’ve 
-        received from our growing community of users.</p>
-      </div>
     </div>
   </div>
 </section>
 
-<section class="team white-bg center">
+<section class="team center">
   <div class="container">
       <div class="row">
       <div class="col-md-8 col-md-offset-2">
-
+<h2>Team Ninja</h2>
+        <p>Invoice Ninja is managed by a team of seasoned web workers. We 
+        launched in early 2014 and have been thrilled by the enthusiastic response we’ve 
+        received from our growing community of users.</p>
+      </div>
           </div>
-           </div>
     <div class="row">
       <div class="col-md-3">
           <img src="images/shalomstark.jpg" alt="Shalom Stark" class="img-circle">

app/views/public/contact_us.blade.php

@@ -53,9 +53,11 @@ var contactForm = {
 };
 </script>
 
-<section class="hero background hero4 center" data-speed="2" data-type="background">
+<section class="hero background hero-contact center" data-speed="2" data-type="background">
-  <div class="container">
+<div class="container">
-          <h1>Contact<span style="color:#ecd816"> us</span></h1>
+    <div class="row">
+          <h1><img src="{{ asset('images/icon-contact.png') }}">Contact <span class="thin">us</span></h1>
+        </div>
       </div>
     </section>
 

app/views/public/features.blade.php

@@ -1,7 +1,7 @@
 @extends('public.header')
 
 @section('content')
-<section class="hero background hero5 center" data-speed="2" data-type="background">
+<section class="hero background hero-features center" data-speed="2" data-type="background">
   <div class="container">
     <div class="row">
           <h1><img src="{{ asset('images/icon-features.png') }}"><span class="thin">THE</span> FEATURES</h1>
@@ -12,7 +12,8 @@
  <section class="features features1">
   <div class="container">
     <div class="row">
-      <div class="col-md-5">
+      <div class="col-md-5 valign">
+            
           <div class="headline">
         <div class="icon open"><span class="img-wrap"><img src="{{ asset('images/icon-opensource.png') }}"></span></div><h2>Open Source Platform</h2>
               </div>
@@ -21,6 +22,7 @@
 </p>
           <p>We firmly believe that being an open source product helps everyone involved. We’re looking forward to seeing what the developers out there can do to take Invoice Ninja into new realms of usefulness.</p>
       
+  
     </div>
         <div class="col-md-7">
              <img src="{{ asset('images/features1.jpg') }}">
@@ -36,7 +38,8 @@
               <div class="col-md-7">
                 <img src="{{ asset('images/devices-2.png') }}">
               </div>
-                <div class="col-md-5">
+                <div class="col-md-5 valign">
+                   
                     <div class="headline">
                <div class="icon free"><span class="img-wrap"><img src="{{ asset('images/icon-free2.png') }}"></span></div><h2>FREE. Forever.</h2>
                         </div>
@@ -45,35 +48,72 @@
 </p>
           <p>We firmly believe that being an open source product helps everyone involved. We’re looking forward to seeing what the developers out there can do to take Invoice Ninja into new realms of usefulness.</p>
               </div>
+            
             </div>
           </div>
         </section>
- <section class="features features1">
+ <section class="features features3">
   <div class="container">
     <div class="row">
       <div class="col-md-5">
+    
           <div class="headline">
-        <div class="icon open"><span class="img-wrap"><img src="{{ asset('images/icon-opensource.png') }}"></span></div><h2>Open Source Platform</h2>
+        <div class="icon secure"><span class="img-wrap"><img src="{{ asset('images/icon-secure.png') }}"></span></div><h2>Secure & Private</h2>
               </div>
-       <p class="first">Set the code free! Here at Invoice Ninja, we’re all about being non-evil, and providing full code transparency is a central manifestation of this value.</p>
+       <p class="first">Invoice Ninja has been built from the ground up to keep your data safe. Only you have access to your login & accounting details, & we will never share your transaction data to any third party.</p>
-          <p>Our users started seeing the benefits of open source within days of our launch, when we rolled out v1.0.2, which included some key code improvements that our friends on GitHub sent our way.
+          <p>Our website operates with 256-bit encryption, which is even more secure than most banking websites. Invoice Ninja uses the TLS 1.0 cryptographic protocol, AES_256_CBC string encryption, SHA1 message authentication and DHE_RSA key exchanges. We feel safe here and have invested heavily in measures to ensure that you do too.</p>
-</p>
-          <p>We firmly believe that being an open source product helps everyone involved. We’re looking forward to seeing what the developers out there can do to take Invoice Ninja into new realms of usefulness.</p>
       
     </div>
-        <div class="col-md-7">
+        <div class="col-md-7 valign">
-             <img src="{{ asset('images/features1.jpg') }}">
+             <img src="{{ asset('images/laptopwicon.jpg') }}">
         </div>
     </div>
   </div>
 </section>
-  <section class="upper-footer white-bg">
+<section class="features features4">
+  <div class="container">
+    <div class="row">
+        <div class="col-md-7">
+             <img src="{{ asset('images/features4.jpg') }}">
+        </div>
+        <div class="col-md-5 valign">
+          <div class="headline">
+        <div class="icon pdf"><span class="img-wrap"><img src="{{ asset('images/icon-pdf.png') }}"></span></div><h2>Live .PDF View</h2>
+              </div>
+       <p class="first">With Invoice Ninja, we’ve done away with the need for cumbersome multi-click invoice previewing after each save.</p>
+          <p>When you enter the details of your customer and/or invoice in our editor, you can instantly see the results in the pdf preview pane below. Want to see what your invoice would look like in a different layout style? The live pdf can show you four beautiful preset styles in real time too.
+</p><p><i>Just create, save, send, and you’re done!</i></p>
+      
+    </div>
+    </div>
+  </div>
+</section>
+<section class="features features5">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-5 valign">
+          <div class="headline">
+        <div class="icon pay"><span class="img-wrap"><img src="{{ asset('images/icon-payment.png') }}"></span></div><h2>Online Payments</h2>
+              </div>
+       <p class="first">Invoice Ninja seamlessly integrates with all of the top internet payment processors and gateways so you can get paid for your work quickly and easily.</p>
+          <p>Invoices crated with our tools aren’t just for bookkeeping purposes - they bring in the Benjamins. We also make it super easy to choose the right gateway for the specific needs of your business and are happy to help you to get started working with the gateway of your choice. What’s more, we’re constantly working on rolling out additional gateway integrations, so if you don’t see the one you use here, just let us know, and there’s a good chance we’ll add it for you. </p>
+    </div>
+        <div class="col-md-7">
+             <img src="{{ asset('images/features5.jpg') }}">
+        </div>
+    </div>
+  </div>
+</section>
+  <section class="upper-footer features center">
    <div class="container">
     <div class="row">
-      <div class="col-md-3 center-block">
+        <div class="col-md-4">
+        <h2 class="thin">Like what you see?</h2>
+            </div>
+      <div class="col-md-4">
         <a href="#">
           <div class="cta">
-            <h2 onclick="return getStarted()">Invoice Now <span>+</span></h2>
+            <h2 onclick="return getStarted()">Get started today!</h2>
           </div>
         </a>
       </div>

app/views/public/header.blade.php

@@ -6,8 +6,8 @@
 <!--
 <link href="{{ asset('vendor/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/> 
 <link href="{{ asset('css/bootstrap.splash.css') }}" rel="stylesheet" type="text/css"/> 
--->
+<link href="{{ asset('css/splash.css') }}" rel="stylesheet" type="text/css"/>  
-<link href="{{ asset('css/splash.css') }}" rel="stylesheet" type="text/css"/>    
+-->  
 
 <!--
 <link href="{{ asset('images/apple-touch-icon-114x114-precomposed.png') }}" rel="apple-touch-icon-precomposed" sizes="114x114">
@@ -15,23 +15,27 @@
 <link href="{{ asset('images/apple-touch-icon-57x57-precomposed.png') }}" rel="apple-touch-icon-precomposed">
 <!-- <script src="{{ asset('js/simpleexpand.js') }}" type="text/javascript"></script> -->
 
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+<script src="{{ asset('js/valign.js') }}" type="text/javascript"></script>
+
 <style>
 .hero {
     background-image: url({{ asset('/images/hero-bg-1.jpg') }});
 }
-.hero2 {
+.hero-about {
-    background-image: url({{ asset('/images/hero-bg-2.jpg') }});
+    background-image: url({{ asset('/images/hero-bg-3.jpg.jpg') }});
 }
-.hero3 {
+.hero-plans {
-    background-image: url({{ asset('/images/hero-bg-3.jpg') }});
+    background-image: url({{ asset('/images/hero-bg-plans.jpg') }});
 }
-.hero4 {
+.hero-contact {
-    background-image: url({{ asset('/images/hero-bg-4.jpg') }});
+    background-image: url({{ asset('/images/hero-bg-contact.jpg') }});
 }
-.hero5 {
+.hero-features {
     background-image: url({{ asset('/images/hero-bg-3.jpg') }});
 }
 </style>
+
 @stop
 
 @section('body')
@@ -51,7 +55,6 @@
 {{ Form::hidden('guest_key') }}
 {{ Form::close() }}
 
-
 <script>
   if (isStorageSupported()) {
     $('[name="guest_key"]').val(localStorage.getItem('guest_key'));          
@@ -170,7 +173,14 @@
 </div>
 </footer>
 
-<!-- <script src="{{ asset('/js/retina-1.1.0.min.js') }}" type="text/javascript"></script> -->
+<script type="text/javascript">
+jQuery(document).ready(function($) { 
+	$('.valign').vAlign();
+});
+</script>
+
+<script src="{{ asset('/js/retina-1.1.0.min.js') }}" type="text/javascript"></script>
+
 <!--
 <script type="text/javascript">
     $('.expander').simpleexpand();
@@ -178,4 +188,6 @@
 -->
 
 
+
+
 @stop

app/views/public/plans.blade.php

@@ -2,15 +2,10 @@
 
 @section('content')
 
-  <section class="hero background hero3" data-speed="2" data-type="background">
+  <section class="hero background hero-plans" data-speed="2" data-type="background">
-  <div class="caption-side"></div>
+ <div class="container">
-  <div class="container">
+    <div class="row">
-    <div class="row" style="margin:0;">
+          <h1><img src="{{ asset('images/icon-plans.png') }}"><span class="thin">The</span> plans</h1>
-      <div class="caption-wrap">
-        <div class="caption">
-          <h1>The <span style="color:#ecd816"> Plans</span></h1>
-            </div>
-          </div>
         </div>
       </div>
     </section>

app/views/public/splash.blade.php

@@ -8,26 +8,35 @@
   <div class="caption-side"></div>
 
   <div class="container">
-    <div class="row">
+      
-          <h1>THE <span style="color:#2299c0">SIMPLE</span> &amp;
+        <div class="container">
-            <span style="color:#edd71e">FREE</span> WAY TO<br>INVOICE
+            <div class="row" style="margin:0;">
-            CLIENTS</h1>
+                <div class="caption-wrap">
-            <p>It's that easy. Stop spending time on
+                    <div class="caption">
-              complicated and expensive invoicing.<br>
+                        <h1>THE <span style="color:#2299c0">SIMPLE</span> &amp;
-              No fuss, just get started and <span style=
+                        <span style="color:#edd71e">FREE</span> WAY TO INVOICE
-              "color:#2299c0">get paid.</span></p>
+                        CLIENTS</h1>
+                        <p>It's just that easy. Stop spending time on
+                        complicated and expensive invoicing.<br>
+                        No fuss, just get started and <span style=
+                        "color:#2299c0">get paid.</span></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+      
+    <div class="container">
+            <div class="row">
+                <div class="col-md-3 center-block">
+                    <a href="#">
+                    <div class="cta">
+                        <h2 id="startButton" onclick="return getStarted()">Invoice Now <span>+</span></h2>
+                    </div>
+					</a>
+                </div>
             </div>
-          </div>
-      <div class="row">
-          <div class="col-md-3 center-block">
-            <a href="#">
-              <div class="cta">
-                <h2 id="startButton" onclick="return getStarted()">Invoice Now <span>+</span></h2>
-              </div>
-            </a>
-          </div>
         </div>
-      </div>
 
   
     </section>

public/js/valign.js

@@ -0,0 +1,12 @@
+(function ($) {
+$.fn.vAlign = function() {
+	return this.each(function(i){
+        $(this).children().wrapAll('<div class="nitinh-vAlign" style="position:relative;"></div>');
+        var div = $(this).children('div.nitinh-vAlign');
+        var ph = $(this).innerHeight();
+        var dh = div.height();
+        var mh = (ph - dh) / 2;
+        div.css('top', mh);
+	});
+};
+})(jQuery);