add splash screen for releaseME

app/assets/stylesheets/application.scss

@@ -427,3 +427,12 @@ a[data-behavior=seekable-timecode] {
   width: 308px;
   height:308px;
 }
+
+// Add checkmark before list item
+#checkmark-list > li {
+  list-style: none;
+  margin-left: -1em;
+}
+#checkmark-list > li:before {
+  content: '\2713\0020';
+}

app/controllers/contract_templates_controller.rb

@@ -7,6 +7,7 @@ class ContractTemplatesController < ApplicationController
 
   before_action :set_project, except: [:destroy]
   before_action :set_contract_template, only: [:destroy]
+  before_action :show_splash_screen, only: :index
 
   def index
     @contract_templates = contract_templates.non_archived.order_by_name.paginate(page: params[:page])
@@ -38,6 +39,10 @@ class ContractTemplatesController < ApplicationController
 
   private
 
+  def show_splash_screen
+    render :splash if contract_templates.non_archived.count.zero?
+  end
+
   def set_contract_template
     @contract_template = authorize contract_templates.find(params[:id])
   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/contract_templates/splash.html.erb

@@ -0,0 +1,56 @@
+<div class="d-flex flex-row">
+  <div class="d-flex flex-column">
+    <%= product_wordmark :release_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' %>
+  <%= link_to t(".actions.create_template"), [:new, @project, :contract_template], class: "btn btn-success border align-self-center h-50 pb-2" %>
+</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_releases' %></li>
+            <li><%= t '.list_items.download_mobile_app' %></li>
+            <li><%= t '.list_items.print_QR_code' %></li>
+            <li><%= t '.list_items.releases_automatically_organized' %></li>
+          </ol>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <h3><%= t '.headings.benefits' %></h3>
+          <ul id="checkmark-list">
+            <li><%= t '.list_items.all_releases_available' %></li>
+            <li><%= t '.list_items.manage_large_audience' %></li>
+            <li><%= t '.list_items.add_tags_and_notes' %></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>