redesign landing & fix footer

app/views/main/index.html.erb

@@ -6,17 +6,37 @@
   <% end %>
 <% end %>
 
-<div class="background landing-section">
-  <div class="d-flex align-items-center" style="height: 100%;">
-    <div class="container text-center">
-      <h1 id="main-text" class="font-weight-400 responsive-header"><%= t("landing.welcome") %></h1>
-      <h4 class="text-muted"><%= t("landing.about") %></h4>
-
-      <%= link_to "https://youtu.be/Hso8yLzkqj8", class: "d-inline-block p-3", target: "_blank" do %>
+<div class="container">
+  <div class="row pb-8">
+    <div class="col-md-8 col-sm-12">
+      <p id="main-text" class="font-weight-400 display-4"><%= t("landing.welcome").html_safe %></p>
+      <p class="text-muted h4" style="line-height: 22px;"><%= t("landing.about", href: link_to(t("bigbluebutton"), "http://bigbluebutton.org/", target: "_blank", class: "text-blue")).html_safe %></p>
+      <br>
+      <%= link_to "https://youtu.be/Hso8yLzkqj8", target: "_blank" do %>
         <h4><%= t("landing.video") %> <i class="far fa-play-circle"></i></h4>
       <% end %>
     </div>
+    <div class="col-md-4 col-sm-12 img-cycle text-center">
+      <%= image_tag("landing/world.png", class: "active") %>
+      <%= image_tag("landing/bbb.png") %>
+      <%= image_tag("landing/mobile.png") %>
+    </div>
   </div>
+  <%= render "shared/features" %>
 </div>
 
-<%= render "shared/features" %>
+<script>
+var cycleImages = function(){
+  var images = $('.img-cycle img');
+  var now = images.filter(':visible');
+  var next = now.next().length ? now.next() : images.first();
+  var speed = 1500;
+
+  now.fadeOut(speed);
+  next.fadeIn(speed);
+}
+
+$(function() {
+  setInterval(cycleImages, 5000);
+});
+</script>