Update frontpage styling and content

app/assets/javascripts/application.js.erb.coffee

@@ -1,6 +1,7 @@
 #= require jquery
 #= require jquery_ujs
 #= require jquery.turbolinks
+#= require jquery.arctic_scroll
 #= require turbolinks
 #= require bootstrap
 #= require twemoji
@@ -72,6 +73,7 @@ _ready = ->
     particleground document.getElementById('particles'),
       dotColor: bodyColor
       lineColor: bodyColor
+      density: 23000
 
   if twemoji?
     twemoji.parse document.body,
@@ -84,6 +86,8 @@ _ready = ->
           else
             ''.concat(options.base, options.size, '/', icon, options.ext)
 
+  $('.arctic_scroll').arctic_scroll speed: 500
+
 
 $(document).ready _ready
 $(document).on 'page:load', _ready

app/assets/stylesheets/base.css.scss

@@ -162,6 +162,92 @@ body {
   border-bottom-right-radius: 2px;
 }
 
+.frontpage {
+  margin-top: -50px;
+  height: 100vh;
+  display: table;
+}
+
+.frontpage-scroll {
+  display: block;
+  position: absolute;
+  bottom: 0;
+  margin: 0 auto;
+  padding: 20px;
+  text-align: center;
+  z-index: 1000;
+  font-size: 32px;
+  width: 100%;
+}
+
+.frontpage-content {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.frontpage-features {
+  padding-top: 20px;
+  padding-bottom: 10px;
+}
+
+.features-heading {
+  margin-bottom: 20px;
+}
+
+.frontpage-fluid {
+  background-color: darken($navbar-inverse-bg, 10%);
+  color: #fff;
+
+  a {
+    color: #fff;
+    font-weight: bold;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  p {
+    margin: 20px;
+    text-align: center;
+  }
+}
+
+.frontpage-heading {
+  margin-top: 0px;
+}
+
+#content {
+  padding-bottom: 30px;
+}
+
+#register {
+  padding: 20px;
+}
+
+.register-now {
+  margin: 10px;
+}
+
+.btn-register {
+  opacity: 1 !important;
+  background: transparent;
+  color: #fff;
+  border: 4px #fff solid;
+  border-radius: 4px;
+  transition: background-color .25s ease-in-out;
+
+  &:hover {
+    background-color: #fff;
+    color: darken($navbar-inverse-bg, 10%) !important;
+    transition: background-color .25s ease-in-out;
+  }
+}
+
+.lead {
+  margin-bottom: 3px;
+}
+
 .particle-jumbotron {
   padding: 0px;
   overflow: hidden;
@@ -190,6 +276,15 @@ body {
   display: block;
 }
 
+.colored-icon:before {
+  color: $brand-primary;
+}
+
+.colored-icon {
+  padding-left: 3px;
+  padding-right: 5px;
+}
+
 .heading-showcase {
   margin-top: 5px;
 }
@@ -201,3 +296,10 @@ body {
 .discover {
   padding-top: 20px;
 }
+
+.row-eq-height {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display:         flex;
+}

app/views/static/front.html.haml

@@ -1,32 +1,116 @@
 - provide(:title, "#{APP_CONFIG['site_name']}")
-.jumbotron.j2-jumbo.text-center.particle-jumbotron
+.jumbotron.j2-jumbo.text-center.particle-jumbotron.frontpage
+  .frontpage-scroll
+    %a.arctic_scroll{href: "#content", data: {offset: "-80"} }
+      %i.fa.fa-chevron-down
   #particles
-  .particle-content
+  .particle-content.frontpage-content
     .container
       = render 'layouts/messages'
       %h1= APP_CONFIG['site_name']
       %p= t 'views.front.subtitle'
       %p
-        %a.btn.btn-primary.btn-lg{href: url_for(new_user_registration_path)}
+        %a.btn.btn-register.btn-lg{href: url_for(new_user_registration_path)}
           Register now
       %small
         Already a member?
         = link_to 'Sign in', new_user_session_path
-.container-fluid
+.container-fluid#content
-  .row.text-center
+  .container.text-center
-    .col-md-4.col-sm-4.col-xs-12
+    %h1.frontpage-heading= "What is #{APP_CONFIG['site_name']}?"
-      .icon-showcase
+    %p.lead
-        %i.fa.fa-comments
+      A
-      %h3.heading-showcase= t 'views.front.ask.title'
+      %abbr{title: "Question and Answer"} Q/A
-      %p= t('views.front.ask.desc', app_title: APP_CONFIG['site_name'])
+      based social network
-    .col-md-4.col-sm-4.col-xs-12
+    %p Most of the people already know how these sorts of networks already work. You have a profile and other users (or even anonymous people without accounts) can ask you any question to find out more about you, so can you do the same with others. Finding friends with the same interests, people that share your opinion (and people that probably don't), you can find everything here!
-      .icon-showcase
+    %p.lead
-        %i.fa.fa-users
+      But what makes
-      %h3.heading-showcase= t 'views.front.follow.title'
+      = APP_CONFIG['site_name']
-      %p= t 'views.front.follow.desc'
+      special?
-    .col-md-4.col-sm-4.col-xs-12
+    %p
-      .icon-showcase
+      = APP_CONFIG['site_name']
-        %i.fa.fa-share-square-o
+      tries to take aspects from other popular or now gone platforms and combine them to get the best result possible. Also, we take in the ideas and feedback of our community so we can build a service that's even closer to being exactly the service people want to use!
-      %h3.heading-showcase= t 'views.front.share.title'
+
-      %p= t 'views.front.share.desc'
+  .container.frontpage-features
+    %h2.features-heading.text-center Awesome Features
+    .row
+      .col-md-4.col-sm-4.col-xs-12
+        %h3.heading-showcase
+          %i.fa.fa-fw.fa-comments.colored-icon
+          Discussion
+        %p= "With #{APP_CONFIG['site_name']}, you can ask and answer questions from other users as well as receive anonymous questions. Want to know something? Keep the conversation alive with interactive comments."
+      .col-md-4.col-sm-4.col-xs-12
+        %h3.heading-showcase
+          %i.fa.fa-fw.fa-user-plus.colored-icon
+          Following
+        %p
+          Following users allows you to get a personalized feed of all people you want to know more about. You can also send a question to all your followers at once!
+      .col-md-4.col-sm-4.col-xs-12
+        %h3.heading-showcase
+          %i.fa.fa-fw.fa-share-square-o.colored-icon
+          Sharing
+        %p
+          Want to share your answer to a question so that more people read it? With a simple click on the answer button, your answer is shared wherever you want!
+    .row
+      .col-md-4.col-sm-4.col-xs-12
+        %h3.heading-showcase
+          %i.fa.fa-fw.fa-users.colored-icon
+          Groups
+        %p
+          Want to ask a question to a specific set of people? No problem! Set up unique groups of users and send them questions apart from everyone else.
+      .col-md-4.col-sm-4.col-xs-12
+        %h3.heading-showcase
+          %i.fa.fa-fw.fa-image.colored-icon
+          Images
+        %p
+          Express yourself with images and upload an avatar and a header of your liking. And soon you'll be able to attach images to answers and questions as well!
+      .col-md-4.col-sm-4.col-xs-12
+        %h3.heading-showcase
+          %i.fa.fa-fw.fa-paint-brush.colored-icon
+          Themes
+        %p
+          Don't like the default purple or don't like light interfaces in general? On
+          = APP_CONFIG['site_name']
+          you can change every color aspect of the site with Themes!
+    .row
+      .col-md-4.col-sm-4.col-xs-12
+        %h3.heading-showcase
+          %i.fa.fa-fw.fa-globe.colored-icon
+          Open Source
+        %p
+          You heard it right!
+          = APP_CONFIG['site_name']
+          and all of it's core components are open source! Everyone can help and improve the service!
+      .col-md-4.col-sm-4.col-xs-12
+        %h3.heading-showcase
+          %i.fa.fa-fw.fa-eye-slash.colored-icon
+          No Ads
+        %p
+          We don't like them ourselves, really.
+          = APP_CONFIG['site_name']
+          just runs with community funding over
+          %a{href: "http://patreon.com/retrospring"} Patreon
+          which is way better than displaying annoying stuff.
+      .col-md-4.col-sm-4.col-xs-12
+        %h3.heading-showcase
+          %i.fa.fa-fw.fa-user-secret.colored-icon
+          Your Data is yours
+        %p
+          Today the most precious things on the internet is your data.
+          = APP_CONFIG['site_name']
+          doesn't sell any data that is collected. It remains encrypted on our servers!
+.container-fluid.frontpage-fluid
+  %p
+    Any questions? Ask us on
+    %a{href: "https://twitter.com/retrospringnet"} Twitter
+    or visit one of the administrator profiles you can find on the
+    %a{href: about_path} About page!
+.container.text-center#register
+  %h2 What are you waiting for?
+  %p
+    Registering and using the site is free forever and takes less than 5 minutes!
+  %p
+    %a.btn.btn-primary.btn-lg.register-now{href: url_for(new_user_registration_path)}
+      Register now
+
 = render "shared/links"

vendor/assets/javascripts/jquery.arctic_scroll.js

@@ -0,0 +1,36 @@
+(function ($) {
+    $.fn.arctic_scroll = function (options) {
+
+        var defaults = {
+            elem: $(this),
+            speed: 500,
+            scroll_selector: 'html,body'
+        };
+        
+        var options = $.extend(defaults, options),
+            to_scroll = options.scroll_selector,
+            ua = $.browser;
+        /*
+        if ( ua.msie && ua.version.slice(0,1) == "8" ) {
+            to_scroll = window;
+        } else if ( ua.msie && ua.version.slice(0,1) == "7" ) {
+            to_scroll = window;
+        }
+        */
+        options.elem.click(function(event){     
+            event.preventDefault();
+            var offset = ($(this).attr('data-offset')) ? $(this).attr('data-offset') : false,
+                position = ($(this).attr('data-position')) ? $(this).attr('data-position') : false;         
+            if (offset) {
+                var toMove = parseInt(offset);
+                $(options.scroll_selector).stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, options.speed);
+            } else if (position) {
+                var toMove = parseInt(position);
+                $(options.scroll_selector).stop(true, false).animate({scrollTop: toMove }, options.speed);
+            } else {
+                $(options.scroll_selector).stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, options.speed);
+            }
+        });
+
+    };
+})(jQuery);