app/views/pages/index.html.erb
<% content_for(:page_title, 'Gamified Fundraising') %>
<!-- Header -->
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" >Gotcha! Pay It Forward Intro Video Coming Soon.</h4>
</div>
<div class="modal-body">
<iframe width="100%" height="360px" src="//www.youtube.com/embed/dQw4w9WgXcQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="intro-message">
<h1>Challenge Friends, Raise Millions</h1>
<h3>A Ponzi Scheme for Social Good</h3>
<hr class="intro-divider">
<!-- Modal -->
<ul class="list-inline intro-social-buttons">
<li>
<button class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"><i class="fa fa-eye"></i> <span class="network-name"> Watch the Video</span></button>
<br><br>
<%= link_to charities_path, class: 'btn btn-default btn-lg' do %>
<i class="fa fa-money"></i> <span class="network-name"> Get Started!</span>
<% end %>
<br><br>
<i class="fa fa-angle-double-down"></i> <span class="network-name"> or scroll down to learn more</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
<!-- Page Content -->
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Introducing SoViFu<br>(Social Viral Fundraising)</h2>
<p class="lead">Pay It Forward raises money for charity the same way Gangnam Style reached 2 billion views. We've created a fundraising model for the internet age, bringing true viral growth to raising money for social good. All it takes is you and a few friends. </p>
<p class="lead">And their friends, and their friends, and their friends...</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<%= image_tag 'sovifu.png', class: 'img-responsive' %>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Powered by Ponzi<sup><small> TM</small></sup></h2>
<p class="lead">We've turned ponzi logic on its head to do good.</p>
<p class="lead">You pledge a donation to charity. You challenge your friends to match it. As the chain grows, more and more money is pledged. If enough friends meet your challenge, you don't have to pay!</p>
</div>
<div class="col-lg-5 col-sm-pull-6 col-sm-6">
<%= image_tag 'viral.png', class: 'img-responsive' %>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-b -->
<!-- /.content-section-b -->
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-12">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">How It Works</h2>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="panel panel-warning">
<div class="panel-heading">
<h2>CHOOSE</h2>
</div>
<div class="panel-body">
<p class="lead">Choose your favorite charity from our list, and a pledge amount. Remember your friends will have to match it so choose wisely.</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-danger">
<div class="panel-heading">
<h2>CHALLENGE</h2>
</div>
<div class="panel-body">
<p class="lead">Challenge your friends to meet your pledge, dollar for dollar. If they accept and meet your challenge, you don't have to pay a dime. If they don't, you pay up.</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-info">
<div class="panel-heading">
<h2>???</h2>
</div>
<div class="panel-body">
<p class="lead">The Choose/Challenge cycle continues over and over and over, with each person challenged becoming the challenger. The network grows and grows until...</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-success">
<div class="panel-heading">
<h2>PROFIT</h2>
</div>
<div class="panel-body">
<p class="lead">Thanks to everyone's collaboration we will be able to raise millions of dollars for awesome charities to make the world a better place.</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-b -->
<!-- /.content-section-a -->
<div class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Follow the Money</h2>
<p class="lead">Where does the money go? After hard costs, 95% of all donations go to the charity of your choice. 5% goes back into running the company.</p>
<p class="lead">We're not non-profit, but we act like it.</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<%= image_tag 'handsup.png', class: 'img-responsive' %>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="banner">
<div class="container">
<div class="row">
<div class="col-lg-6" style="text-align: right;">
<h2>Ready to roll?</h2>
</div>
<div class="col-lg-6">
<a href="choose.html" class="btn btn-default btn-lg"><i class="fa fa-money"></i> <span class="network-name"> Get Started!</span></a>
</ul>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.banner -->
<script type="text/javascript">
$(document).ready(function() {
$('.panel').responsiveEqualHeightGrid();
});
$("#myModal, .close").click(function() {
$("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});
</script>