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

<div id="index-banner" class="hero">
    <div class="section no-pad-bot">
      <div class="container">
        <br />
        <br />
        <h1 class="header center blue-text">
          <%= t('marketing.landing_page.promo_header') %>
        </h1>
        <div class="row center">
          <h2 class="header col s12 light">
            <%= t('marketing.landing_page.promo_subheader') %>
          </h2>
        </div>
        <div class="row center">
          <%= link_to t('marketing.landing_page.cta.get_yours'),
                      new_user_registration_path,
                      class: 'btn-large waves-effect waves-light blue lighten-1' %>
          <br />
          <br />
          <%= t('marketing.landing_page.promo_subtext') %>
        </div>
        <br />
        <br />
      </div>
    </div>
    <%= image_tag 'landing/digital-notebook.jpg', class: 'hero-image' %>
  </div>

  <div class="container">
    <div class="section audience-section">
      <div class="row">
        <div class="col s12 m4">
          <div class="icon-block center hoverable">
            <h2 class="blue-text"><i class="material-icons">create</i></h2>
            <h5><%= t('marketing.landing_page.cta.writers.header') %></h5>
            <p class="light">
              <%= t('marketing.landing_page.cta.writers.body') %>
            </p>
            <%= link_to t('marketing.landing_page.cta.writers.button'),
                        writers_landing_path,
                        class: 'btn blue' %>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block center hoverable">
            <h2 class="blue-text"><i class="material-icons">gavel</i></h2>
            <h5><%= t('marketing.landing_page.cta.roleplayers.header') %></h5>
            <p class="light">
              <%= t('marketing.landing_page.cta.roleplayers.body') %>
            </p>
            <%= link_to t('marketing.landing_page.cta.roleplayers.button'),
                        roleplayers_landing_path,
                        class: 'btn blue' %>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block center hoverable">
            <h2 class="blue-text"><i class="material-icons">brush</i></h2>
            <h5><%= t('marketing.landing_page.cta.designers.header') %></h5>
            <p class="light">
              <%= t('marketing.landing_page.cta.designers.body') %>
            </p>
            <%= link_to t('marketing.landing_page.cta.designers.button'),
                        designers_landing_path,
                        class: 'btn blue' %>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="section">
      <div class="row">
        <div class="col l4 m4 s12">
          <%= render partial: 'cards/intros/content_type_intro', locals: { content_type: Character } %>
        </div>
        <div class="col l4 m4 s12">
          <%= render partial: 'cards/intros/content_type_intro', locals: { content_type: Location } %>
        </div>
        <div class="col l4 m4 s12">
          <%= render partial: 'cards/intros/content_type_intro', locals: { content_type: Item } %>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="section perks-section">
      <div class="row">
        <div class="col s12 m4">
          <div class="icon-block center">
            <h2 class="brown-text"><i class="material-icons">bubble_chart</i></h2>
            <h5><%= t('marketing.landing_page.benefits.creativity.title') %></h5>
            <p class="light">
              <%= t('marketing.landing_page.benefits.creativity.text') %>
            </p>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block center">
            <h2 class="brown-text"><i class="material-icons">cloud</i></h2>
            <h5><%= t('marketing.landing_page.benefits.backups.title') %></h5>
            <p class="light">
              <%= t('marketing.landing_page.benefits.backups.text') %>
            </p>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block center">
            <h2 class="brown-text"><i class="material-icons">security</i></h2>
            <h5><%= t('marketing.landing_page.benefits.ads.title') %></h5>
            <p class="light">
              <%= t('marketing.landing_page.benefits.ads.text') %>
            </p>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block center">
            <h2 class="brown-text"><i class="material-icons">face</i></h2>
            <h5><%= t('marketing.landing_page.benefits.characters.title') %></h5>
            <p class="light">
              <%= t('marketing.landing_page.benefits.characters.text') %>
            </p>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block center">
            <h2 class="brown-text"><i class="material-icons">public</i></h2>
            <h5><%= t('marketing.landing_page.benefits.locations.title') %></h5>
            <p class="light">
              <%= t('marketing.landing_page.benefits.locations.text') %>
            </p>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block center">
            <h2 class="brown-text"><i class="material-icons">assignment_turned_in</i></h2>
            <h5><%= t('marketing.landing_page.benefits.continuity.title') %></h5>
            <p class="light">
              <%= t('marketing.landing_page.benefits.continuity.text') %>
            </p>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block center">
            <h2 class="brown-text"><i class="material-icons">search</i></h2>
            <h5><%= t('marketing.landing_page.benefits.search.title') %></h5>
            <p class="light">
              <%= t('marketing.landing_page.benefits.search.text') %>
            </p>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block center">
            <h2 class="brown-text"><i class="material-icons">list</i></h2>
            <h5><%= t('marketing.landing_page.benefits.organization.title') %></h5>
            <p class="light">
              <%= t('marketing.landing_page.benefits.organization.text') %>
            </p>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block center">
            <h2 class="brown-text"><i class="material-icons">settings_ethernet</i></h2>
            <h5><%= t('marketing.landing_page.benefits.growth.title') %></h5>
            <p class="light">
              <%= t('marketing.landing_page.benefits.growth.text') %>
            </p>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block center">
            <h2 class="brown-text"><i class="material-icons">group</i></h2>
            <h5><%= t('marketing.landing_page.benefits.sharing.title') %></h5>
            <p class="light">
              <%= t('marketing.landing_page.benefits.sharing.text') %>
            </p>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block center">
            <h2 class="brown-text"><i class="material-icons">schedule</i></h2>
            <h5><%= t('marketing.landing_page.benefits.speed.title') %></h5>
            <p class="light">
              <%= t('marketing.landing_page.benefits.speed.text') %>
            </p>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block center">
            <h2 class="brown-text"><i class="material-icons">bar_chart</i></h2>
            <h5><%= t('marketing.landing_page.benefits.quality.title') %></h5>
            <p class="light">
              <%= t('marketing.landing_page.benefits.quality.text') %>
            </p>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="container">
    <div class="section">
      <div class="row">
        <% ([Universe] + Rails.application.config.content_types[:premium]).each do |content_type| %>
          <div class="col l4 m6 s12">
            <%= render partial: 'cards/intros/content_type_intro', locals: { content_type: content_type } %>
          </div>
        <% end %>
      </div>
    </div>
  </div>

  <div class="hero valign-wrapper">
    <div class="container center">
      <h5 class="header light">
        <strong>"<%= t('marketing.landing_page.quote.text') %>"</strong>
        <br />
        <br />
        &mdash;
        <%= t('marketing.landing_page.quote.attribution') %>
      </h5>
    </div>
    <%= image_tag 'landing/screenshot.jpg', class: 'hero-image'%>
  </div>

  <div class="container" style="margin-top: 50px; margin-bottom: 75px;">
    <h3 class="header center blue-text"><%= t('marketing.landing_page.pricing.title') %></h3>
    <div class="row center" style="clear: both">
      <div class="card-panel green white-text" width="200px;">
        <%= t('marketing.landing_page.pricing.subtitle') %>
        <%= link_to t('marketing.landing_page.pricing.cta.link'),
                    new_user_registration_path,
                    class: 'light-blue-text text-lighten-4' %>
      </div>
    </div>
    <div class="row">
        <div class="col s12 m6">
            <div class="card card-avatar center">
                <div class="center brown-text"><br /><i class="material-icons" style="font-size: 250%">class</i></div>
                <div class="card-content">
                    <span class="card-title activator">
                      <%= t('marketing.landing_page.pricing.starter_plan.title') %>
                      <br />
                      <small><em><a class="red-text text-darken-1">
                        <%= t('marketing.landing_page.pricing.free') %>
                      </a></em></small>
                    </span>
                    <ul class="plan-features">
                      <% Rails.application.config.content_types[:free].each do |content_type| %>
                        <li>
                          <i class="material-icons <%= content_type.color %>-text">
                            <%= content_type.icon %>
                          </i>
                          <%= t("marketing.landing_page.pricing.starter_plan.#{content_type.name.downcase.pluralize}_html") %>
                        </li>
                      <% end %>
                      <li>
                        <i class="material-icons black-text">cloud_upload</i>
                        <%= t('marketing.landing_page.pricing.starter_plan.upload_html') %>
                      </li>
                    </ul>
                    <div class="row center">
                      <%= link_to t('marketing.landing_page.pricing.cta.button'),
                                  new_user_registration_path,
                                  class: 'btn-large waves-effect waves-light white black-text' %>
                    </div>
                </div>
            </div>
        </div>
        <div class="col s12 m6">
            <div class="card card-avatar">
                <div class="center brown-text">
                  <br />
                  <i class="material-icons" style="font-size: 250%">book</i>
                </div>
                <div class="card-content center">
                    <span class="card-title activator">
                      <%= t('marketing.landing_page.pricing.premium_plan.title') %>
                      <br />
                      <small><em class="red-text text-darken-1">
                        <%= t('marketing.landing_page.pricing.premium_plan.price') %>
                      </em></small>
                    </span>
                    <div class="row plan-features">
                      <div>Create <strong>unlimited</strong>...</div>
                      <% Rails.application.config.content_types[:all].each_with_index do |content_type, i| %>
                        <span class="content-type-container">
                          <i class="material-icons <%= content_type.color %>-text medium">
                            <%= content_type.icon %>
                          </i><br />
                          <%= content_type.name.pluralize %>
                        </span>
                        <% if (i + 1) % 5 == 0 && i != 0 %>
                          <br />
                        <% end %>
                      <% end %>
                      <div>
                        and...
                      </div>
                      <div>
                        <i class="material-icons black-text">cloud_upload</i>
                        <%= t('marketing.landing_page.pricing.premium_plan.upload_html') %>
                      </div>
                    </div>
                    <div class="row center">
                      <%= link_to t('marketing.landing_page.pricing.cta.button'),
                                  new_user_registration_path,
                                  class: 'btn-large waves-effect waves-light blue lighten-1' %>
                    </div>

                </div>
            </div>
        </div>
    </div>
  </div>