1
0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2024-11-08 20:22:42 +01:00

Merge pull request #117 from raziraz/master

Features page and updated heros
This commit is contained in:
Hillel Coren 2014-05-06 21:23:18 +03:00
commit e2b2fcde99
26 changed files with 936 additions and 32462 deletions

View File

@ -1,18 +1,14 @@
@extends('public.header')
@section('content')
<section class="hero background hero3" data-speed="2" data-type="background">
<div class="caption-side"></div>
<div class="container">
<div class="row" style="margin:0;">
<div class="caption-wrap">
<div class="caption">
<h1>About <span style="color:#ecd816"> InvoiceNinja</span></h1>
</div>
</div>
<section class="hero background hero-about" data-speed="2" data-type="background">
<div class="container">
<div class="row">
<h1><img src="{{ asset('images/icon-about.png') }}"><span class="thin">About</span> Invoice Ninja</h1>
</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 weve
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 weve
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">

View File

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

View File

@ -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. Were 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. Were 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, were all about being non-evil, and providing full code transparency is a central manifestation of this value.</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>
<p>We firmly believe that being an open source product helps everyone involved. Were looking forward to seeing what the developers out there can do to take Invoice Ninja into new realms of usefulness.</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 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>
</div>
<div class="col-md-7">
<img src="{{ asset('images/features1.jpg') }}">
<div class="col-md-7 valign">
<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, weve 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 youre 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 arent 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. Whats more, were constantly working on rolling out additional gateway integrations, so if you dont see the one you use here, just let us know, and theres a good chance well 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>

View File

@ -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 {
background-image: url({{ asset('/images/hero-bg-2.jpg') }});
.hero-about {
background-image: url({{ asset('/images/hero-bg-3.jpg.jpg') }});
}
.hero3 {
background-image: url({{ asset('/images/hero-bg-3.jpg') }});
.hero-plans {
background-image: url({{ asset('/images/hero-bg-plans.jpg') }});
}
.hero4 {
background-image: url({{ asset('/images/hero-bg-4.jpg') }});
.hero-contact {
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

View File

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

View File

@ -8,26 +8,35 @@
<div class="caption-side"></div>
<div class="container">
<div class="row">
<h1>THE <span style="color:#2299c0">SIMPLE</span> &amp;
<span style="color:#edd71e">FREE</span> WAY TO<br>INVOICE
CLIENTS</h1>
<p>It's 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 class="container">
<div class="row" style="margin:0;">
<div class="caption-wrap">
<div class="caption">
<h1>THE <span style="color:#2299c0">SIMPLE</span> &amp;
<span style="color:#edd71e">FREE</span> WAY TO INVOICE
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>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 82 KiB

BIN
public/images/features5.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 132 KiB

After

Width:  |  Height:  |  Size: 185 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

12
public/js/valign.js Normal file
View File

@ -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);