notebook/app/views/data/index.html.erb

<%
  # Style decisions to move to CSS later
  card_height = 160
  icon_yoffset = -1.5
  icon_xoffset = -5
  icon_fsize  = 13
%>

<div class="data-vault row">
  <div class="col s12">
    <h4 class="grey-text">
      Welcome to your personal Data Vault
    </h4>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to usage_path, class: 'black-text' do %>
      <div class="hoverable card green lighten-4">
        <div class="card-content">
          <i class="material-icons right green-text text-darken-5">insert_chart</i>
          <div class="card-title">Your usage overview</div>
          <p>
            See how you've used Notebook.ai.
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to year_in_review_path, class: 'black-text' do %>
      <div class="hoverable card blue lighten-5">
        <div class="card-content">
          <i class="material-icons right blue-text text-darken-5">date_range</i>
          <div class="card-title">Year in review</div>
          <p>
            See your activity on Notebook.ai broken down per year!
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to archive_path, class: 'black-text' do %>
      <div class="hoverable card grey lighten-4">
        <div class="card-content">
          <i class="material-icons right grey-text text-darken-1">archive</i>
          <div class="card-title">Visit your archives</div>
          <p>
            Archive notebook pages to hide them without deleting them.
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to recently_deleted_content_path, class: 'black-text' do %>
      <div class="hoverable card red lighten-4">
        <div class="card-content">
          <i class="material-icons right red-text text-darken-5">delete</i>
          <div class="card-title">Recycle bin</div>
          <p>
            Recover pages you've recently deleted for a short period of time.
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to notebook_export_path, class: 'black-text' do %>
      <div class="hoverable card brown lighten-3">
        <div class="card-content">
          <i class="material-icons right brown-text text-darken-5">file_download</i>
          <div class="card-title">Export your data</div>
          <p>
            Export your entire notebook in several formats.
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to referrals_path, class: 'black-text' do %>
      <div class="hoverable card orange lighten-4">
        <div class="card-content">
          <i class="material-icons right orange-text text-darken-5">favorite</i>
          <div class="card-title">Referrals</div>
          <p>
            Get your referral code, browse potential rewards, and invite your friends!
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to data_documents_path, class: 'black-text' do %>
      <div class="hoverable card <%= Document.color %> lighten-4">
        <div class="card-content">
          <i class="material-icons right <%= Document.text_color %> text-darken-5"><%= Document.icon %></i>
          <div class="card-title">Document statistics</div>
          <p>
            See how you're writing in documents.
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to discussions_path, class: 'black-text' do %>
      <div class="hoverable card blue lighten-4">
        <div class="card-content">
          <i class="material-icons right blue-text text-darken-5">forum</i>
          <div class="card-title">Discussion activity</div>
          <p>
            See your activity on the discussion boards.
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to uploads_path, class: 'black-text' do %>
      <div class="hoverable card amber lighten-4">
        <div class="card-content">
          <i class="material-icons right amber-text text-darken-5">file_upload</i>
          <div class="card-title">Image uploads</div>
          <p>
            Browse all of your image uploads in one place.
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to collaboration_path, class: 'black-text' do %>
      <div class="hoverable card purple lighten-4">
        <div class="card-content">
          <i class="material-icons right purple-text text-darken-5"><%= Universe.icon %></i>
          <div class="card-title">Collaboration</div>
          <p>
            Learn more about collaborating on Notebook.ai and track which universes are shared with others.
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to privacy_policy_path, class: 'black-text' do %>
      <div class="hoverable card blue lighten-3">
        <div class="card-content">
          <i class="material-icons right blue-text text-darken-5">verified_user</i>
          <div class="card-title">Privacy policy</div>
          <p>
            Read our privacy policy.
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <div class="col s12 m12 l6">
    <%= link_to edit_user_registration_path, class: 'black-text' do %>
      <div class="hoverable card grey lighten-4">
        <div class="card-content">
          <i class="material-icons right grey-text text-darken-1">settings</i>
          <div class="card-title">Account settings</div>
          <p>
            All other account settings here!
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <%# this could actually be a cool s12 banner if we flesh out the help center with guides and stuff %>
  <div class="col s12 m12 l12">
    <%= link_to help_center_path, class: 'black-text' do %>
      <div class="hoverable card pink lighten-4">
        <div class="card-content">
          <i class="material-icons right pink-text text-darken-5">help</i>
          <div class="card-title">Help center</div>
          <p>
            Learn more about using Notebook.ai and how to get help, request new features, and report bugs.
          </p>
        </div>
      </div>
    <% end %>
  </div>

</div>