From c1549193f2d775d68efe30b3a9c96173f3c60a02 Mon Sep 17 00:00:00 2001
From: Josh <josha5@outlook.com>
Date: Wed, 6 Jun 2018 14:51:32 -0400
Subject: [PATCH] redesign home page

---
 app/assets/stylesheets/application.scss | 10 +++++++
 app/views/main/index.html.erb           | 17 ++++++++----
 app/views/shared/_features.html.erb     | 35 +++++++++----------------
 3 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 2b2c9425..f67f4025 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -70,6 +70,11 @@ a {
   font-size: 26px;
 }
 
+.feature-icon {
+  transform: translateY(-50%);
+  margin-top: 50%;
+}
+
 .main-large {
   font-size: 20px;
 }
@@ -86,6 +91,11 @@ iframe{
   font-size: 25px;
 }
 
+.feature-stamp {
+  width: 100px;
+  height: 100px;
+}
+
 html, body {
   width: 100%;
   height: 100%;
diff --git a/app/views/main/index.html.erb b/app/views/main/index.html.erb
index 80543d93..ef57f4c2 100644
--- a/app/views/main/index.html.erb
+++ b/app/views/main/index.html.erb
@@ -1,13 +1,19 @@
-<div class="container">
+<div class="room-section pb-2 pt-9">
+  <div class="container text-center">
 
-  <h1 id="main-text" class="display-3 text-center text-primary mt-9">Teach Students Online.</h1>
+    <h1 id="main-text" class="display-3 font-weight-400">Welcome to Greenlight.</h1>
+    <h4 class="text-muted">A simple front end for your BigBlueButton Open Source Web Conferencing Server.</h4>
 
-  <hr class="small-rule">
-
-  <%= render "shared/features" %>
+    <%= link_to "https://www.google.com", class: "p-3", target: "_blank" do %>
+      <h4>Watch a tutorial on using Greenlight <i class="fe fe-play-circle"></i></h4>
+    <% end %>
+  </div>
 </div>
 
+<%= render "shared/features" %>
+
 <script>
+/*
 textOptions = [
   "Start your own Meeting.",
   "Collaborate with Friends.",
@@ -27,4 +33,5 @@ var changeText = function(){
 setInterval(function(){
   $('#main-text').fadeOut(1000, changeText)
 }, 7000);
+*/
 </script>
diff --git a/app/views/shared/_features.html.erb b/app/views/shared/_features.html.erb
index 0f15571a..cd9b1f8e 100644
--- a/app/views/shared/_features.html.erb
+++ b/app/views/shared/_features.html.erb
@@ -1,33 +1,24 @@
-<h3 class="text-center text-primary mt-6">Features</h3>
-<hr class="small-rule">
+<h1 class="text-center mt-7">Features</h1>
 
 <div class="container text-center">
-  <div class="row mt-4">
-    <div class="col-4">
-      <i class="fas fa-video fa-6x"></i>
-      <h4 class="mt-5">Manage Recordings</h4>
-    </div>
-    <div class="col-4">
-      <i class="fas fa-users fa-6x"></i>
-      <h4 class="mt-5">Create Meetings</h4>
-    </div>
-    <div class="col-4">
-      <i class="fas fa-history fa-6x"></i>
-      <h4 class="mt-5">Session History</h4>
-    </div>
-  </div>
   <div class="row mt-8">
     <div class="col-4">
-      <i class="fas fa-pencil-alt fa-6x"></i>
-      <h4 class="mt-5">Custom Designs</h4>
+      <span class="stamp feature-stamp bg-cyan">
+        <i class="fas fa-chalkboard-teacher fa-3x feature-icon"></i>
+      </span>
+      <h4 class="mt-5 text-muted">Personalized Rooms</h4>
     </div>
     <div class="col-4">
-      <i class="fas fa-user-cog fa-6x"></i>
-      <h4 class="mt-5">User Mangement</h4>
+      <span class="stamp feature-stamp bg-cyan">
+        <i class="fas fa-film fa-3x feature-icon"></i>
+      </span>
+      <h4 class="mt-5 text-muted">Recording Management</h4>
     </div>
     <div class="col-4">
-      <i class="fas fa-thumbs-up fa-6x"></i>
-      <h4 class="mt-5">Feature Six</h4>
+      <span class="stamp feature-stamp bg-cyan">
+        <i class="fas fa-pencil-alt fa-3x feature-icon"></i>
+      </span>
+      <h4 class="mt-5 text-muted">Custom Designs</h4>
     </div>
   </div>
 </div>