Landing page layout
19 changed files with 583 additions and 25 deletions
BIN
app/assets/images/fluxogram_avalanche.jpg
BIN
app/assets/images/icons/icon_avalanche_64x64.png
BIN
app/assets/images/icons/icon_chat_64x64.png
BIN
app/assets/images/icons/icon_diamond_64x64.png
BIN
app/assets/images/icons/icon_gift_64x64.png
BIN
app/assets/images/icons/icon_mission_64x64.png
BIN
app/assets/images/icons/icon_radar_64x64.png
BIN
app/assets/images/icons/icon_task_64x64.png
BIN
app/assets/images/logo_avalanche.png
BIN
app/assets/images/photo_everest.jpg
BIN
app/assets/images/photo_mission_control.jpg
+ 66
- 0
app/assets/javascripts/start.js
@@ -0,0 +1,66 @@ |
||
| 1 |
+// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable |
|
| 2 |
+function attachHandler(jQuery) {
|
|
| 3 |
+ |
|
| 4 |
+ $(window).on('load',function(){
|
|
| 5 |
+ $('#obscure_header').css('height', ($('#photo_header').height()));
|
|
| 6 |
+ $('#obscure_subscribe').css('height', ($('#photo_subscribe').height()));
|
|
| 7 |
+ $('#myCarousel.carousel.slide').css('height', ($('#photo_header').height()));
|
|
| 8 |
+ }); |
|
| 9 |
+ |
|
| 10 |
+ var mainbottom = $('#myCarousel').offset().top + ($('#myCarousel').height()*2)+100;
|
|
| 11 |
+ |
|
| 12 |
+ // on scroll, |
|
| 13 |
+ $(window).on('scroll',function(){
|
|
| 14 |
+ |
|
| 15 |
+ // we round here to reduce a little workload |
|
| 16 |
+ stop = Math.round($(document).scrollTop()); |
|
| 17 |
+ if (stop > mainbottom) {
|
|
| 18 |
+ $('.navbar-inner').addClass('past-main');
|
|
| 19 |
+ } else {
|
|
| 20 |
+ $('.navbar-inner').removeClass('past-main');
|
|
| 21 |
+ } |
|
| 22 |
+ |
|
| 23 |
+ }); |
|
| 24 |
+ |
|
| 25 |
+ // scroll to 'header' |
|
| 26 |
+ $(".btn-logo").click(function() {
|
|
| 27 |
+ event.preventDefault(); |
|
| 28 |
+ $('html, body').animate({
|
|
| 29 |
+ scrollTop: $("#myCarousel").offset().top
|
|
| 30 |
+ }, 1000); |
|
| 31 |
+ }); |
|
| 32 |
+ |
|
| 33 |
+ // scroll to 'about' |
|
| 34 |
+ $(".btn-about").click(function() {
|
|
| 35 |
+ event.preventDefault(); |
|
| 36 |
+ $('html, body').animate({
|
|
| 37 |
+ scrollTop: ($("#about").offset().top - 150)
|
|
| 38 |
+ }, 1000); |
|
| 39 |
+ }); |
|
| 40 |
+ |
|
| 41 |
+ // scroll to 'features' |
|
| 42 |
+ $(".btn-features").click(function() {
|
|
| 43 |
+ event.preventDefault(); |
|
| 44 |
+ $('html, body').animate({
|
|
| 45 |
+ scrollTop: ($("#features").offset().top - 50)
|
|
| 46 |
+ }, 1000); |
|
| 47 |
+ }); |
|
| 48 |
+ |
|
| 49 |
+ // scroll to 'subscribe' |
|
| 50 |
+ $(".btn-subscribe").click(function() {
|
|
| 51 |
+ event.preventDefault(); |
|
| 52 |
+ $('html, body').animate({
|
|
| 53 |
+ scrollTop: ($("#subscribe").offset().top)
|
|
| 54 |
+ }, 1000); |
|
| 55 |
+ }); |
|
| 56 |
+ |
|
| 57 |
+ $( window ).resize(function(){
|
|
| 58 |
+ $('#obscure_header').css('height', ($('#photo_header').height()));
|
|
| 59 |
+ $('#obscure_subscribe').css('height', ($('#photo_subscribe').height()));
|
|
| 60 |
+ $('#myCarousel.carousel.slide').css('height', ($('#photo_header').height()));
|
|
| 61 |
+ var mainbottom = $('#myCarousel').offset().top + ($('#myCarousel').height()*2)-10;
|
|
| 62 |
+ }); |
|
| 63 |
+}; |
|
| 64 |
+ |
|
| 65 |
+$(document).ready(attachHandler); |
|
| 66 |
+$(document).load(attachHandler); |
+ 0
- 3
app/assets/javascripts/start.js.coffee
@@ -1,3 +0,0 @@ |
||
| 1 |
-# Place all the behaviors and hooks related to the matching controller here. |
|
| 2 |
-# All this logic will automatically be available in application.js. |
|
| 3 |
-# You can use CoffeeScript in this file: http://coffeescript.org/ |
+ 212
- 0
app/assets/stylesheets/start.css.less
@@ -1,3 +1,215 @@ |
||
| 1 | 1 |
// Place all the styles related to the start controller here. |
| 2 | 2 |
// They will automatically be included in application.css. |
| 3 | 3 |
// You can use Less here: http://lesscss.org/ |
| 4 |
+ |
|
| 5 |
+body {
|
|
| 6 |
+ max-width:100%; |
|
| 7 |
+} |
|
| 8 |
+ |
|
| 9 |
+.navbar .nav {
|
|
| 10 |
+ margin-top: 12px; |
|
| 11 |
+} |
|
| 12 |
+ |
|
| 13 |
+.navbar-inner {
|
|
| 14 |
+ background-color: rgba(0, 0, 0,0); |
|
| 15 |
+ color: white; |
|
| 16 |
+ transition: all 0.25s ease; |
|
| 17 |
+ border: none; |
|
| 18 |
+ text-shadow: 0 0 0 #ffffff; |
|
| 19 |
+ max-width:100%; |
|
| 20 |
+ /* make sure to add vendor prefixes here */ |
|
| 21 |
+} |
|
| 22 |
+ |
|
| 23 |
+.navbar .nav > li > a {
|
|
| 24 |
+ text-shadow: 0 0 0 #ffffff; |
|
| 25 |
+ color: white; |
|
| 26 |
+ font-size: 14px; |
|
| 27 |
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; |
|
| 28 |
+ font-variant: 'light'; |
|
| 29 |
+ font-weight: 300; |
|
| 30 |
+ /* 16 * 0.0625 = 1px */ |
|
| 31 |
+ letter-spacing: 0.0625em; |
|
| 32 |
+ text-transform: uppercase; |
|
| 33 |
+} |
|
| 34 |
+ |
|
| 35 |
+.navbar .nav > li > a:hover {
|
|
| 36 |
+ text-shadow: 0 0 0 #ffffff; |
|
| 37 |
+ color: white; |
|
| 38 |
+ //text-decoration: underline; |
|
| 39 |
+} |
|
| 40 |
+ |
|
| 41 |
+.navbar .nav > li > a:focus {
|
|
| 42 |
+ background-color: transparent; |
|
| 43 |
+ color: white; |
|
| 44 |
+ text-decoration: underline; |
|
| 45 |
+} |
|
| 46 |
+ |
|
| 47 |
+.navbar-inner.past-main {
|
|
| 48 |
+ background-color:#202020; |
|
| 49 |
+ color:#444; |
|
| 50 |
+} |
|
| 51 |
+ |
|
| 52 |
+#main {
|
|
| 53 |
+ height:500px; |
|
| 54 |
+ background-color:red; |
|
| 55 |
+} |
|
| 56 |
+ |
|
| 57 |
+#below-main {
|
|
| 58 |
+ height:1000px; |
|
| 59 |
+ background-color:#eee; |
|
| 60 |
+} |
|
| 61 |
+ |
|
| 62 |
+#myCarousel {
|
|
| 63 |
+ background-color: rgba(0, 0, 0, 0.75); |
|
| 64 |
+} |
|
| 65 |
+ |
|
| 66 |
+.obscure {
|
|
| 67 |
+ background-color: rgba(0, 0, 0, 0.5); |
|
| 68 |
+ width: 100%; |
|
| 69 |
+ position: absolute; |
|
| 70 |
+} |
|
| 71 |
+ |
|
| 72 |
+h1.header {
|
|
| 73 |
+ //text-transform: uppercase; |
|
| 74 |
+ color: white; |
|
| 75 |
+ font-size: 48px; |
|
| 76 |
+} |
|
| 77 |
+ |
|
| 78 |
+h2.header {
|
|
| 79 |
+ text-transform: uppercase; |
|
| 80 |
+ color: #202020; |
|
| 81 |
+ font-size: 60px; |
|
| 82 |
+ text-align: center; |
|
| 83 |
+ font-weight: 100; |
|
| 84 |
+ line-height: 70px; |
|
| 85 |
+} |
|
| 86 |
+ |
|
| 87 |
+h4.header {
|
|
| 88 |
+ text-transform: uppercase; |
|
| 89 |
+ color: #202020; |
|
| 90 |
+ text-align: center; |
|
| 91 |
+ font-weight: 100; |
|
| 92 |
+ margin-bottom: 20px; |
|
| 93 |
+ margin-top: 100px; |
|
| 94 |
+} |
|
| 95 |
+ |
|
| 96 |
+p.header {
|
|
| 97 |
+ color: white; |
|
| 98 |
+} |
|
| 99 |
+ |
|
| 100 |
+a:hover > .caret {
|
|
| 101 |
+display: inline-block; |
|
| 102 |
+width: 0; |
|
| 103 |
+height: 0; |
|
| 104 |
+vertical-align: top; |
|
| 105 |
+border-top: 4px solid #000000; |
|
| 106 |
+border-right: 4px solid transparent; |
|
| 107 |
+border-left: 4px solid transparent; |
|
| 108 |
+content: ""; |
|
| 109 |
+margin-top: 8px; |
|
| 110 |
+} |
|
| 111 |
+ |
|
| 112 |
+ |
|
| 113 |
+.thumb {
|
|
| 114 |
+ margin-top: 20px; |
|
| 115 |
+ min-height:100%; |
|
| 116 |
+ background-size: cover; |
|
| 117 |
+ background-repeat: no-repeat; |
|
| 118 |
+ background-position: center center; |
|
| 119 |
+ float: left; |
|
| 120 |
+} |
|
| 121 |
+ |
|
| 122 |
+#design {
|
|
| 123 |
+ background-image: url(thumb_design.jpg); |
|
| 124 |
+ width: 33%; |
|
| 125 |
+} |
|
| 126 |
+ |
|
| 127 |
+#agencia {
|
|
| 128 |
+ background-image: url(thumb_agencia.jpg); |
|
| 129 |
+ width: 34%; |
|
| 130 |
+} |
|
| 131 |
+ |
|
| 132 |
+#editora {
|
|
| 133 |
+ background-image: url(thumb_editora.jpg); |
|
| 134 |
+ width: 33%; |
|
| 135 |
+} |
|
| 136 |
+ |
|
| 137 |
+.maison {
|
|
| 138 |
+ background-image: url(post_maison.jpg); |
|
| 139 |
+ background-size: cover; |
|
| 140 |
+} |
|
| 141 |
+ |
|
| 142 |
+.thumb-text {
|
|
| 143 |
+ text-transform: uppercase; |
|
| 144 |
+ color: white; |
|
| 145 |
+ font-size: 60px; |
|
| 146 |
+ text-align: center; |
|
| 147 |
+ margin-top: 35%; |
|
| 148 |
+ font-weight: bold; |
|
| 149 |
+} |
|
| 150 |
+ |
|
| 151 |
+.lead-big {
|
|
| 152 |
+ font-size: 28px; |
|
| 153 |
+ font-weight: 200; |
|
| 154 |
+ line-height: 38px; |
|
| 155 |
+} |
|
| 156 |
+ |
|
| 157 |
+.sr-only {
|
|
| 158 |
+ visibility: hidden; |
|
| 159 |
+} |
|
| 160 |
+ |
|
| 161 |
+.feature-post-text p {
|
|
| 162 |
+ line-height: 1.2; |
|
| 163 |
+} |
|
| 164 |
+ |
|
| 165 |
+.top-affix {
|
|
| 166 |
+ top: 102px; |
|
| 167 |
+} |
|
| 168 |
+ |
|
| 169 |
+.Absolute-Center {
|
|
| 170 |
+height: 50%; |
|
| 171 |
+width: 50%; |
|
| 172 |
+overflow: auto; |
|
| 173 |
+margin: auto; |
|
| 174 |
+position: absolute; |
|
| 175 |
+top: 0; |
|
| 176 |
+left: 0; |
|
| 177 |
+bottom: 0; |
|
| 178 |
+right: 0; |
|
| 179 |
+} |
|
| 180 |
+ |
|
| 181 |
+.Absolute-Center.is-Responsive {
|
|
| 182 |
+width: 60%; |
|
| 183 |
+height: 60%; |
|
| 184 |
+min-width: 200px; |
|
| 185 |
+max-width: 400px; |
|
| 186 |
+padding: 40px; |
|
| 187 |
+} |
|
| 188 |
+ |
|
| 189 |
+#map {
|
|
| 190 |
+ height: 500px; |
|
| 191 |
+} |
|
| 192 |
+ |
|
| 193 |
+footer.velvet {
|
|
| 194 |
+ margin-top: -30px; |
|
| 195 |
+ height: 150px; |
|
| 196 |
+ //background-color: #202020; |
|
| 197 |
+} |
|
| 198 |
+ |
|
| 199 |
+p.footer {
|
|
| 200 |
+ margin-top: 30px; |
|
| 201 |
+ text-align: center; |
|
| 202 |
+ text-shadow: 0 0 0 #ffffff; |
|
| 203 |
+ color: black; |
|
| 204 |
+ font-size: 14px; |
|
| 205 |
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; |
|
| 206 |
+ font-variant: 'light'; |
|
| 207 |
+ font-weight: 300; |
|
| 208 |
+ letter-spacing: 0.0625em; |
|
| 209 |
+ text-transform: uppercase; |
|
| 210 |
+} |
|
| 211 |
+ |
|
| 212 |
+p.footer a {
|
|
| 213 |
+ color: black; |
|
| 214 |
+ text-transform: underline; |
|
| 215 |
+} |
+ 2
- 0
app/controllers/start_controller.rb
@@ -1,5 +1,7 @@ |
||
| 1 | 1 |
class StartController < ApplicationController |
| 2 | 2 |
|
| 3 |
+ layout 'landing_page' |
|
| 4 |
+ |
|
| 3 | 5 |
def index |
| 4 | 6 |
@blog_posts = BlogPost.order('created_at DESC').take(4)
|
| 5 | 7 |
@subscription = Subscription.new |
+ 90
- 0
app/views/layouts/landing_page.erb
@@ -0,0 +1,90 @@ |
||
| 1 |
+<!DOCTYPE html> |
|
| 2 |
+<html lang="en"> |
|
| 3 |
+ <head> |
|
| 4 |
+ <meta charset="utf-8"> |
|
| 5 |
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> |
|
| 6 |
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
| 7 |
+ <title>Avalanche Network</title> |
|
| 8 |
+ <%= csrf_meta_tags %> |
|
| 9 |
+ |
|
| 10 |
+ <!-- Le HTML5 shim, for IE6-8 support of HTML elements --> |
|
| 11 |
+ <!--[if lt IE 9]> |
|
| 12 |
+ <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script> |
|
| 13 |
+ <![endif]--> |
|
| 14 |
+ |
|
| 15 |
+ <%= stylesheet_link_tag "application", :media => "all" %> |
|
| 16 |
+ |
|
| 17 |
+ <!-- For third-generation iPad with high-resolution Retina display: --> |
|
| 18 |
+ <!-- Size should be 144 x 144 pixels --> |
|
| 19 |
+ <%= favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144' %> |
|
| 20 |
+ |
|
| 21 |
+ <!-- For iPhone with high-resolution Retina display: --> |
|
| 22 |
+ <!-- Size should be 114 x 114 pixels --> |
|
| 23 |
+ <%= favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114' %> |
|
| 24 |
+ |
|
| 25 |
+ <!-- For first- and second-generation iPad: --> |
|
| 26 |
+ <!-- Size should be 72 x 72 pixels --> |
|
| 27 |
+ <%= favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72' %> |
|
| 28 |
+ |
|
| 29 |
+ <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> |
|
| 30 |
+ <!-- Size should be 57 x 57 pixels --> |
|
| 31 |
+ <%= favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png' %> |
|
| 32 |
+ |
|
| 33 |
+ <!-- For all other devices --> |
|
| 34 |
+ <!-- Size should be 32 x 32 pixels --> |
|
| 35 |
+ <%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %> |
|
| 36 |
+ |
|
| 37 |
+ <%= javascript_include_tag "application" %> |
|
| 38 |
+ |
|
| 39 |
+ <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script> |
|
| 40 |
+ <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' /> |
|
| 41 |
+ </head> |
|
| 42 |
+ <body> |
|
| 43 |
+ |
|
| 44 |
+ <div class="navbar navbar-fixed-top"> |
|
| 45 |
+ <div class="navbar-inner"> |
|
| 46 |
+ <div class="container"> |
|
| 47 |
+ <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse"> |
|
| 48 |
+ <span class="icon-bar"></span> |
|
| 49 |
+ <span class="icon-bar"></span> |
|
| 50 |
+ <span class="icon-bar"></span> |
|
| 51 |
+ </a> |
|
| 52 |
+ <a class="btn-logo" href="/"><%= image_tag "logo_avalanche.png", class: 'brand', style: 'width: 250px;' %></a> |
|
| 53 |
+ |
|
| 54 |
+ <div class="container nav-collapse "> |
|
| 55 |
+ <ul class="nav pull-right"> |
|
| 56 |
+ <li><a class="btn-about" href="#about"><%= (t "landing_page.about").html_safe %></a></li> |
|
| 57 |
+ <li><a class="btn-features" href="#features"><%= (t "landing_page.features").html_safe %></a></li> |
|
| 58 |
+ <li><a class="btn-subscribe" href="#subscribe"><%= (t "landing_page.subscribe").html_safe %></a></li> |
|
| 59 |
+ <li><%= link_to (t "registration.sign_in"), new_user_session_path, class: "btn-login" %></li> |
|
| 60 |
+ |
|
| 61 |
+ <% if user_signed_in? %> |
|
| 62 |
+ <% if current_user.admin %> |
|
| 63 |
+ <li><%= link_to ('<i class="fa fa-cogs"></i>').html_safe, admin_dashboard_path %></li>
|
|
| 64 |
+ <% end %> |
|
| 65 |
+ <% end %> |
|
| 66 |
+ <% if user_signed_in? %> |
|
| 67 |
+ <li><%= link_to ('<i class="fa fa-user"></i>').html_safe, edit_user_registration_path %></li>
|
|
| 68 |
+ <li><%= link_to ('<i class="fa fa-sign-out"></i>').html_safe, destroy_user_session_path, method: :delete %></li>
|
|
| 69 |
+ <% else %> |
|
| 70 |
+ <li><% link_to ('<i class="fa fa-sign-in"></i>').html_safe, new_user_session_path %></li>
|
|
| 71 |
+ <li><% link_to (t "nav.signup"), new_user_registration_path %></li> |
|
| 72 |
+ <% end %> |
|
| 73 |
+ |
|
| 74 |
+ </ul> |
|
| 75 |
+ |
|
| 76 |
+ </div><!--/.nav-collapse --> |
|
| 77 |
+ |
|
| 78 |
+ </div> |
|
| 79 |
+ </div> |
|
| 80 |
+ </div> |
|
| 81 |
+ |
|
| 82 |
+ <div> |
|
| 83 |
+ |
|
| 84 |
+ <%= bootstrap_flash %> |
|
| 85 |
+ <%= yield %> |
|
| 86 |
+ |
|
| 87 |
+ |
|
| 88 |
+ |
|
| 89 |
+ </body> |
|
| 90 |
+</html> |
+ 169
- 22
app/views/start/index.html.erb
@@ -1,28 +1,175 @@ |
||
| 1 | 1 |
<% title @config.website_name %> |
| 2 |
-<div class="hero-unit"> |
|
| 3 |
- <h1><%= @config.website_name %></h1> |
|
| 4 |
- <p><%= @config.tagline %></p> |
|
| 2 |
+ |
|
| 3 |
+<!-- Carousel |
|
| 4 |
+================================================== --> |
|
| 5 |
+<div id="myCarousel" class="carousel slide" data-ride="carousel" style="height: 400px"> |
|
| 6 |
+ <div class="carousel-inner" role="listbox"> |
|
| 7 |
+ <div class="item active"> |
|
| 8 |
+ <div id="obscure_header" class="obscure" style="height: 960px;"></div> |
|
| 9 |
+ <%= image_tag "photo_mission_control.jpg", id: 'photo_header', style: 'width: 100%;' %> |
|
| 10 |
+ <div class="container" > |
|
| 11 |
+ <div class="row"> |
|
| 12 |
+ <div class="span12" style="height: 20px;"> |
|
| 13 |
+ <div class="" style="background-color: transparent; position: relative; top: -700px;"> |
|
| 14 |
+ <h1 class="header"><%= (t "landing_page.tagline").html_safe %></h1> |
|
| 15 |
+ <p class="lead header"><%= (t "landing_page.tagline_subtext").html_safe %></p> |
|
| 16 |
+ </div> |
|
| 17 |
+ </div> |
|
| 18 |
+ </div> |
|
| 19 |
+ </div> |
|
| 20 |
+ </div> |
|
| 21 |
+</div><!-- /.carousel --> |
|
| 22 |
+ |
|
| 23 |
+<div id="about" class="container" style="margin-top: 30px;"> |
|
| 24 |
+ <div class="row"> |
|
| 25 |
+ |
|
| 26 |
+ <div class="span6"> |
|
| 27 |
+ <h2 style="margin-bottom: 45px; margin-top: 35px;"><%= (t "landing_page.about_title").html_safe %></h2> |
|
| 28 |
+ <%= (t "landing_page.about_text").html_safe %> |
|
| 29 |
+ |
|
| 30 |
+ </div> |
|
| 31 |
+ <div class="span6"> |
|
| 32 |
+ <%= image_tag "fluxogram_avalanche.jpg", style: 'width: 100%;' %> |
|
| 33 |
+ </div> |
|
| 34 |
+ |
|
| 35 |
+ </div> |
|
| 5 | 36 |
</div> |
| 6 | 37 |
|
| 7 |
-<div class="page-header"> |
|
| 8 |
- <h1><%= t 'blog.latest_posts'%> <%= link_to (t 'blog.more_posts'), blog_path, class: 'btn btn-large pull-right' %></h1> |
|
| 38 |
+<div id="features" class="container" style="margin-top: 60px;"> |
|
| 39 |
+ <div class="row"> |
|
| 40 |
+ |
|
| 41 |
+ <div class="span6"> |
|
| 42 |
+ <h2 style="margin-bottom: 45px; margin-top: 35px;"><%= (t "landing_page.feature_headline_1").html_safe %></h2> |
|
| 43 |
+ <p class="lead"><%= (t "landing_page.feature_text_1").html_safe %></p> |
|
| 44 |
+ |
|
| 45 |
+ </div> |
|
| 46 |
+ <div class="span6"> |
|
| 47 |
+ <h2 style="margin-bottom: 45px; margin-top: 35px;"><%= (t "landing_page.feature_headline_2").html_safe %></h2> |
|
| 48 |
+ <p class="lead"><%= (t "landing_page.feature_text_2").html_safe %></p> |
|
| 49 |
+ </div> |
|
| 50 |
+ |
|
| 51 |
+ </div> |
|
| 52 |
+ <div class="row" style="margin-top: 25px;"> |
|
| 53 |
+ |
|
| 54 |
+ <div class="span6"> |
|
| 55 |
+ <div class="media"> |
|
| 56 |
+ <span class="pull-left" href="#"> |
|
| 57 |
+ <%= image_tag "icons/icon_mission_64x64.png", style: 'width: 64px;' %> |
|
| 58 |
+ </span> |
|
| 59 |
+ <div class="media-body"> |
|
| 60 |
+ <p class="lead"><%= (t "landing_page.feature_1_item_1").html_safe %></p> |
|
| 61 |
+ </div> |
|
| 62 |
+ </div> |
|
| 63 |
+ <div class="media"> |
|
| 64 |
+ <span class="pull-left" href="#"> |
|
| 65 |
+ <%= image_tag "icons/icon_chat_64x64.png", style: 'width: 64px;' %> |
|
| 66 |
+ </span> |
|
| 67 |
+ <div class="media-body"> |
|
| 68 |
+ <p class="lead"><%= (t "landing_page.feature_1_item_2").html_safe %></p> |
|
| 69 |
+ </div> |
|
| 70 |
+ </div> |
|
| 71 |
+ <div class="media"> |
|
| 72 |
+ <span class="pull-left" href="#"> |
|
| 73 |
+ <%= image_tag "icons/icon_task_64x64.png", style: 'width: 64px;' %> |
|
| 74 |
+ </span> |
|
| 75 |
+ <div class="media-body"> |
|
| 76 |
+ <p class="lead"><%= (t "landing_page.feature_1_item_3").html_safe %></p> |
|
| 77 |
+ </div> |
|
| 78 |
+ </div> |
|
| 79 |
+ <div class="media"> |
|
| 80 |
+ <span class="pull-left" href="#"> |
|
| 81 |
+ <%= image_tag "icons/icon_diamond_64x64.png", style: 'width: 64px;' %> |
|
| 82 |
+ </span> |
|
| 83 |
+ <div class="media-body"> |
|
| 84 |
+ <p class="lead"><%= (t "landing_page.feature_1_item_4").html_safe %></p> |
|
| 85 |
+ </div> |
|
| 86 |
+ </div> |
|
| 87 |
+ </div> |
|
| 88 |
+ <div class="span6"> |
|
| 89 |
+ <div class="media"> |
|
| 90 |
+ <span class="pull-left" href="#"> |
|
| 91 |
+ <%= image_tag "icons/icon_mission_64x64.png", style: 'width: 64px;' %> |
|
| 92 |
+ </span> |
|
| 93 |
+ <div class="media-body"> |
|
| 94 |
+ <p class="lead"><%= (t "landing_page.feature_2_item_1").html_safe %></p> |
|
| 95 |
+ </div> |
|
| 96 |
+ </div> |
|
| 97 |
+ <div class="media"> |
|
| 98 |
+ <span class="pull-left" href="#"> |
|
| 99 |
+ <%= image_tag "icons/icon_radar_64x64.png", style: 'width: 64px;' %> |
|
| 100 |
+ </span> |
|
| 101 |
+ <div class="media-body"> |
|
| 102 |
+ <p class="lead"><%= (t "landing_page.feature_2_item_2").html_safe %></p> |
|
| 103 |
+ </div> |
|
| 104 |
+ </div> |
|
| 105 |
+ <div class="media"> |
|
| 106 |
+ <span class="pull-left" href="#"> |
|
| 107 |
+ <%= image_tag "icons/icon_gift_64x64.png", style: 'width: 64px;' %> |
|
| 108 |
+ </span> |
|
| 109 |
+ <div class="media-body"> |
|
| 110 |
+ <p class="lead"><%= (t "landing_page.feature_2_item_3").html_safe %></p> |
|
| 111 |
+ </div> |
|
| 112 |
+ </div> |
|
| 113 |
+ </div> |
|
| 114 |
+ </div> |
|
| 9 | 115 |
</div> |
| 10 | 116 |
|
| 11 |
-<ul class="thumbnails"> |
|
| 12 |
- <% @blog_posts.each do |post| %> |
|
| 13 |
- <li class="span3"> |
|
| 14 |
- <div class="thumbnail" style="height: 300px;"> |
|
| 15 |
- <% if post.image.file != nil %> |
|
| 16 |
- <%= image_tag post.image.thumb.to_s %> |
|
| 17 |
- <% else %> |
|
| 18 |
- <img src="http://placehold.it/300x200" alt=""> |
|
| 19 |
- <% end %> |
|
| 20 |
- <h3><%= link_to post.title, post_path(post) %></h3> |
|
| 21 |
- <p><%= post.description %></p> |
|
| 22 |
- </div> |
|
| 23 |
- </li> |
|
| 24 |
- <% end %> |
|
| 25 |
- <%= render 'layouts/subscribe_to_newsletter' %> |
|
| 26 |
-</ul> |
|
| 27 |
-<br> |
|
| 28 | 117 |
|
| 118 |
+ |
|
| 119 |
+<div id="subscribe" class="carousel slide" data-ride="carousel" style="height: 400px; margin-top: 60px;"> |
|
| 120 |
+ <div class="carousel-inner" role="listbox"> |
|
| 121 |
+ <div class="item active"> |
|
| 122 |
+ <div class="obscure" id="obscure_subscribe" style="height: 970px;"></div> |
|
| 123 |
+ <%= image_tag "photo_everest.jpg", id: 'photo_subscribe', style: 'width: 100%;' %> |
|
| 124 |
+ <div class="container" > |
|
| 125 |
+ <div class="row"> |
|
| 126 |
+ <div class="span12" style="height: 0px;"> |
|
| 127 |
+ <div class="" style="background-color: transparent; position: relative; top: -700px;"> |
|
| 128 |
+ |
|
| 129 |
+ <h1 class="header"><%= (t "landing_page.subscribe_title").html_safe %></h1> |
|
| 130 |
+ <p class="lead header "> |
|
| 131 |
+ <%= (t "landing_page.subscribe_text").html_safe %> |
|
| 132 |
+ </p> |
|
| 133 |
+ <%= bootstrap_form_for(@subscription) do |f| %> |
|
| 134 |
+ <%= f.alert_message "Please fix the errors below."%> |
|
| 135 |
+ <%= f.form_group :email, style: 'margin-top: -35px;' do %> |
|
| 136 |
+ <%= f.text_field :email, hide_label: true, class: 'span4 input-large', required: true, style: 'height: 30px; font-size: 24px;' %> |
|
| 137 |
+ <% end %> |
|
| 138 |
+ <%= f.submit (t 'subscription.submit'), class: 'btn btn-large', id: 'submit_subscription' %> |
|
| 139 |
+ <% end %> |
|
| 140 |
+ </div> |
|
| 141 |
+ </div> |
|
| 142 |
+ </div> |
|
| 143 |
+ </div> |
|
| 144 |
+ </div> |
|
| 145 |
+</div><!-- /.carousel --> |
|
| 146 |
+ |
|
| 147 |
+ |
|
| 148 |
+ |
|
| 149 |
+ |
|
| 150 |
+ |
|
| 151 |
+ |
|
| 152 |
+<div style="margin-top: 0px;"> |
|
| 153 |
+ <footer class="velvet"> |
|
| 154 |
+ <hr style=""> |
|
| 155 |
+ |
|
| 156 |
+ <div class="container nav-collapse"> |
|
| 157 |
+ |
|
| 158 |
+ |
|
| 159 |
+ </div> |
|
| 160 |
+ <div class="container"> |
|
| 161 |
+ <div class="row"> |
|
| 162 |
+ <div class="span12"> |
|
| 163 |
+ <p class="footer"> |
|
| 164 |
+ <a class="btn-about" href="#about"><%= (t "landing_page.about").html_safe %></a> | |
|
| 165 |
+ <a class="btn-features" href="#features"><%= (t "landing_page.features").html_safe %></a> | |
|
| 166 |
+ <a class="btn-subscribe" href="#subscribe"><%= (t "landing_page.subscribe").html_safe %></a>| |
|
| 167 |
+ <%= link_to (t "registration.sign_in"), new_user_session_path, class: "btn-login" %> |
|
| 168 |
+ </p> |
|
| 169 |
+ <hr style="margin-top: 20px; border-top: 1px solid #000000;"> |
|
| 170 |
+ <p class="footer" style="text-align: center;">© Avalanche Network <%= Time.now.year %></p> |
|
| 171 |
+ </div> |
|
| 172 |
+ </div> |
|
| 173 |
+ </div> |
|
| 174 |
+ </footer> |
|
| 175 |
+</div> |
+ 22
- 0
config/locales/landing_page.en.yml
@@ -0,0 +1,22 @@ |
||
| 1 |
+en: |
|
| 2 |
+ landing_page: |
|
| 3 |
+ tagline: 'Mission kickstarting plataform' |
|
| 4 |
+ tagline_subtext: 'Participate and organize complex actions with multiple agents' |
|
| 5 |
+ about_title: 'What is Avalanche Network?' |
|
| 6 |
+ about_text: '<p class="lead">A plataform for crowdsourcing complex actions with multiple agents.</p><p class="lead">A kickstarter where all participants have to execute tasks.</p><p class="lead">Participate in a mission or create your own!</p>' |
|
| 7 |
+ feature_headline_1: 'Participate in a mission' |
|
| 8 |
+ feature_text_1: 'Be part of something bigger. Discover new things. Meet new people or find your frinds and do something together.' |
|
| 9 |
+ feature_headline_2: 'Create a mission' |
|
| 10 |
+ feature_text_2: 'Be a mission operator and orchestrate your network of agents to acomplish great things.' |
|
| 11 |
+ feature_1_item_1: 'Receive mission proposals based on your interests and network' |
|
| 12 |
+ feature_1_item_2: 'Join the conversation with the mission group chat' |
|
| 13 |
+ feature_1_item_3: 'Execute mission steps by answering questions, uploading photos or geo-taging' |
|
| 14 |
+ feature_1_item_4: 'Acomplish all objectives in a mission and get rewarded' |
|
| 15 |
+ feature_2_item_1: 'Create a mission with multiple agents and steps' |
|
| 16 |
+ feature_2_item_2: 'Use the mission control center to get realtime feedback' |
|
| 17 |
+ feature_2_item_3: 'Give rewards to agents that acomplish your missions' |
|
| 18 |
+ subscribe_title: 'Join the avalanche' |
|
| 19 |
+ subscribe_text: 'Currenty we are in close beta. We are giving invites in batches.<br>Please leave your email to get our updates.' |
|
| 20 |
+ about: 'About' |
|
| 21 |
+ features: 'Featues' |
|
| 22 |
+ subscribe: 'Subscribe' |
+ 22
- 0
config/locales/landing_page.pt_BR.yml
@@ -0,0 +1,22 @@ |
||
| 1 |
+pt-BR: |
|
| 2 |
+ landing_page: |
|
| 3 |
+ tagline: 'Plataforma para iniciar missiões' |
|
| 4 |
+ tagline_subtext: 'Participe e organize ações complexas envolvendo várias pessoas' |
|
| 5 |
+ about_title: 'O que é o Avlanche Network?' |
|
| 6 |
+ about_text: '<p class="lead">Uma plataforma para juntar pessoas para executar ações complexas.</p><p class="lead">Um sistema de crowdsourcing onde os participantes tem que executar tarefas em troca de recompensas.</p><p class="lead">Participe de uma missão ou crie uma nova!</p>' |
|
| 7 |
+ feature_headline_1: 'Participe de uma missão' |
|
| 8 |
+ feature_text_1: 'Faça parte de algo maior. Descubra coisas novas. Conheça novas pessoas ou encontre seus amigos e faça algo juntos.' |
|
| 9 |
+ feature_headline_2: 'Crie uma missão' |
|
| 10 |
+ feature_text_2: 'Seja um cordenador de missões e orquestre sua rede de agentes para executar grandes coisas.' |
|
| 11 |
+ feature_1_item_1: 'Receba propostas de missões baseadas no seus interesses e contatos' |
|
| 12 |
+ feature_1_item_2: 'Participe da conversa usando o chat em cada missão' |
|
| 13 |
+ feature_1_item_3: 'Execute passos da missão respondendo perguntas, enviando fotos ou geo-taging' |
|
| 14 |
+ feature_1_item_4: 'Complete todos os objetivos de uma missão e ganhe recompensas' |
|
| 15 |
+ feature_2_item_1: 'Crie uma missão com multiplus agentes e passos' |
|
| 16 |
+ feature_2_item_2: 'Use o painel de controle da missão para ter feedback em tempo real' |
|
| 17 |
+ feature_2_item_3: 'Distribua recompensas para os agentes que cumprirem suas missões' |
|
| 18 |
+ subscribe_title: 'Participe da avalanche' |
|
| 19 |
+ subscribe_text: 'Atualmente estamos em versão beta. Estamos convidando novos usuários aos poucos.<br>Por favor deixe seu email para receber mais informações em breve.' |
|
| 20 |
+ about: 'Sobre' |
|
| 21 |
+ features: 'Características' |
|
| 22 |
+ subscribe: 'Participe' |