add splash page for directME

app/controllers/broadcasts_controller.rb

@@ -5,6 +5,7 @@ class BroadcastsController < ApplicationController
   before_action :build_broadcast, only: [:new, :create]
   before_action :set_broadcast, only: [:show, :destroy, :update]
   before_action :set_multi_view_broadcasts, only: [:show]
+  before_action :show_splash_screen, only: :index
 
   def index
     @broadcasts = filtered_broadcasts.order_by_recent.paginate(page: params[:page])
@@ -49,6 +50,10 @@ class BroadcastsController < ApplicationController
 
   private
 
+  def show_splash_screen
+    render :splash if broadcasts.count.zero?
+  end
+
   def broadcast_params
     params.require(:broadcast).permit(:name, files: [])
   end

app/helpers/wordmark_helper.rb

@@ -13,10 +13,13 @@ module WordmarkHelper
     css += options[:class].to_s
 
     content_tag(:div, class: css) do
-      safe_join [
+      elements = [
         content_tag(:span, t("shared.#{product_name}")),
         content_tag(:span, t("shared.me"))
       ]
+      prefix = options[:prefix]
+      elements.unshift content_tag(:span, "#{prefix} ") unless prefix.blank?
+      safe_join elements
     end
   end
 end

app/views/broadcasts/splash.html.erb

@@ -0,0 +1,59 @@
+<div class="d-flex flex-row">
+  <div class="d-flex flex-column">
+    <%= product_wordmark :direct_me, prefix: t('.headings.welcome'), class: "h2" %>
+    <p class="text-muted"><%= t '.headings.subtitle' %>
+  </div>
+
+  <%= link_to t(".actions.book_demo"), 'https://meetings.hubspot.com/bray2', class: "btn btn-primary border align-self-center h-50 ml-auto mr-2 pb-2", target: '_blank' %>
+  <% if policy(Broadcast).new? %>
+    <%= link_to t(".actions.create_stream"), [:new, @project, :broadcast], class: "btn btn-success border align-self-center h-50 pb-2" %>
+  <% end %>
+</div>
+
+<hr>
+
+<div class="pt-2">
+  <div class="row">
+    <div class="col">
+      <div class="card-body p-0">
+        <div class="embed-responsive embed-responsive-16by9">
+          <div class="embed-responsive-item">
+            <table class="w-100 h-100 bg-secondary">
+              <tbody>
+              <tr>
+                <td class="text-center align-middle text-white">
+                  Video tutorial will be available soon
+                </td>
+              </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col">
+      <div class="row">
+        <div class="col">
+          <h3><%= t '.headings.how_it_works' %></h3>
+          <ol>
+            <li><%= t '.list_items.create_stream' %></li>
+            <li><%= t '.list_items.share_stream' %></li>
+            <li><%= t '.list_items.launch_video_conference' %></li>
+            <li><%= t '.list_items.share_files' %></li>
+          </ol>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <h3><%= t '.headings.benefits' %></h3>
+          <ul class="fa-ul ml-5">
+            <%= content_tag(:li, fa_icon("check li", text: t('.list_items.stream_from_mobile_app'))) %>
+            <%= content_tag(:li, fa_icon("check li", text: t('.list_items.direct_shoots_anywhere'))) %>
+            <%= content_tag(:li, fa_icon("check li", text: t('.list_items.share_live_stream'))) %>
+            <%= content_tag(:li, fa_icon("check li", text: t('.list_items.stream_multiple_cameras'))) %>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>