<div class="d-flex flex-row">
  <div class="d-flex flex-column">
    <%= product_wordmark :task_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(TaskRequest).new? %>
    <%= link_to t(".actions.create_task_request"), [:new, @project, :task_request], 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">
            <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/444718363" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
          </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.enter_task_request' %></li>
            <li><%= t '.list_items.state_deadline' %></li>
            <li><%= t '.list_items.enter_number_of_hours' %></li>
            <li><%= t '.list_items.virtual_assistant_delivers_task' %></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.reduces_need_for_full_time_staff'))) %>
            <%= content_tag(:li, fa_icon("check li", text: t('.list_items.reduces_workload'))) %>
            <%= content_tag(:li, fa_icon("check li", text: t('.list_items.spend_per_task'))) %>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
