WIP: new layout for frontpage

app/views/static/front.haml

@@ -1,9 +1,5 @@
 - provide(:title, APP_CONFIG['site_name'])
-.jumbotron.jumbotron--particles.jumbotron--frontpage
+.jumbotron
-  .jumbotron__scroller
-    %a{ href: '#content' }
-      %i.fa.fa-chevron-down
-  .jumbotron__particles#particles
   .jumbotron__content
     .container
       = render 'layouts/messages'
@@ -15,78 +11,72 @@
       %small
         Already a member?
         = link_to 'Sign in', new_user_session_path
-.container.text-center#content
+  %svg{:viewbox => "0 0 1440 320", :xmlns => "http://www.w3.org/2000/svg"}
-  %h1
+    %path{:d => "M0,160L80,186.7C160,213,320,267,480,250.7C640,235,800,149,960,128C1120,107,1280,149,1360,170.7L1440,192L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z", :fill => "var(--primary)", "fill-opacity" => "1"}
-    What is #{APP_CONFIG['site_name']}?
+.container
-  %p.lead
+  .row.my-5
-    A
+    .col-sm-6
-    %abbr{ title: 'Question and Answer' } Q/A
+      %h2.mb-4 Receive and ask questions
-    based social network
-  %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!
-  %p.lead
-    But what makes
-    = APP_CONFIG['site_name']
-    special?
-  %p
-    = APP_CONFIG['site_name']
-    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!
-
-
-  %h2 Awesome Features
-  .row
-    .col-md-4.col-sm-4.col-xs-12
-      %h3
-        %i.fa.fa-fw.fa-comments.text-primary
-        Discussion
       %p 
-        With
+        After registering on
         = APP_CONFIG['site_name']
-        you can ask and answer questions from other users as well as receive anonymous questions.
+        share your unique link to your profile and receive questions in your inbox to answer
-        Want to know something? Keep the conversation alive with interactive comments."
+        them right away. 
-    .col-md-4.col-sm-4.col-xs-12
-      %h3
-        %i.fa.fa-fw.fa-user-plus.text-primary
-        Following
       %p 
-        Following users allows you to get a personalized feed of all people you want to know more about.
+        You can of course also use your account to ask anyone else on the site
-        You can also send a question to all your followers at once!
+        questions, and once you accumulated followers you can send out questions to all of them
-    .col-md-4.col-sm-4.col-xs-12
+        at once.
-      %h3
+    .col-sm-6
-        %i.fa.fa-fw.fa-share-square-o.text-primary
+      %i.fa.fa-envelope
-        Sharing
+
+  .row.my-5
+    .col-sm-6
+      %i.fa.fa-comments
+    .col-sm-6
+      %h2.mb-4 Keep the discussion going
       %p
-        Want to share your answer to a question so that more people read it?
+        Someone answered your question and maybe not everything is cleared up? Use comments!
-        With a simple click on the answer button, your answer is shared wherever you want!
+        On
-  .row
-    .col-md-4.col-sm-4.col-xs-12
-      %h3
-        %i.fa.fa-fw.fa-list.text-primary
-        Lists
-      %p
-        Want to keep an oversight of things?  Organise users in Lists to create timelines of their answers.
-    .col-md-4.col-sm-4.col-xs-12
-      %h3
-        %i.fa.fa-fw.fa-image.text-primary
-        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
-        %i.fa.fa-fw.fa-paint-brush.text-primary
-        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!
+        you can leave comments on answers to keep the discussion going.
-  .row
+      %p
-    .col-md-4.col-sm-4.col-xs-12
+        Don't need to say anything, but still like the answer? Leave a smile (our form of likes) on an answer!
-      %h3
+
+  .row.my-5
+    .col-sm-6
+      %h2.mb-4 Share your answers
+      %p
+        Want your followers on another platform to see your
+        = APP_CONFIG['site_name']
+        answers? You can configure automatic sharing to your favorite platforms easily.
+      %p.text-muted
+        Not sure if it's a favorite, but at the moment only
+        %b Twitter
+        is supported.
+    .col-sm-6
+      %i.fa.fa-share
+
+  .row.my-5
+    .col-sm-6
+      %i.fa.fa-paint-brush
+    .col-sm-6
+      %h2.mb-4 Customize your experience
+      %p
+        Make your
+        = APP_CONFIG['site_name']
+        profile your own with the ability to set a custom profile picture and header image.
+      %p
+        Going a step further, you can customize all colors of
+        = APP_CONFIG['site_name']
+        to your own liking. Don't like purple? Make it blue, red or green!
+      %p
+        For a quick demonstration, you can try this out here with a few presets:
+
+.container.text-center
+  %h2.mb-4 But wait, there's more!
+  .row.my-5
+    .col-sm-4
+      %h3.mb-3
         %i.fa.fa-fw.fa-globe.text-primary
         Open Source
       %p
@@ -94,18 +84,15 @@
         = 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
+    .col-sm-4
-      %h3
+      %h3.mb-3
         %i.fa.fa-fw.fa-eye-slash.text-primary
         No Ads
       %p
-        We don't like them ourselves, really.
+        We don't like them ourselves, really. They make websites slow and are
-        = APP_CONFIG['site_name']
+        (for the most part) annoying. So there's none!
-        just runs with community funding over
+    .col-sm-4
-        %a{ href: 'https://patreon.com/retrospring' } Patreon
+      %h3.mb-3
-        which is way better than displaying annoying stuff.
-    .col-md-4.col-sm-4.col-xs-12
-      %h3
         %i.fa.fa-fw.fa-user-secret.text-primary
         Your Data is yours
       %p
@@ -113,12 +100,6 @@
         = APP_CONFIG['site_name']
         doesn't sell any data that is collected. It remains encrypted on our servers!
 
-  .card
-    .card-body
-      %p
-        Any questions? Ask us on
-        %a{ href: 'https://twitter.com/retrospring' } Twitter
-
   %h2 What are you waiting for?
   %p
     Registering takes less than 5 minutes!