<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' %>
  <% if policy(ContractTemplate).new? %>
    <%= link_to t(".actions.create_template"), [:new, @project, :contract_template], 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_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 class="fa-ul ml-5">
            <%= content_tag(:li, fa_icon("check li", text: t('.list_items.all_releases_available'))) %>
            <%= content_tag(:li, fa_icon("check li", text: t('.list_items.manage_large_audience'))) %>
            <%= content_tag(:li, fa_icon("check li", text: t('.list_items.add_tags_and_notes'))) %>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>