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

<div id="index-banner" class="hero">
    <div class="section no-pad-bot">
      <div class="container">
        <h1 class="header center blue-text text-lighten-2 light bordered-text">
          <%= t('marketing.landing_page.promo_header') %>
        </h1>
        <div class="row center bordered-text">
          <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 hoverable' %>
          <br />
          <br />
          <div class="bordered-text">
            <%= t('marketing.landing_page.promo_subtext') %>
          </div>
        </div>
        <br />
        <br />
      </div>
    </div>
    <%= image_tag 'landing/planet-header.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">
            <div class="h2-size blue-text"><i class="material-icons">create</i></div>
            <h3 class="h5-size"><%= t('marketing.landing_page.cta.writers.header') %></h3>
            <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">
            <div class="h2-size blue-text"><i class="material-icons">gavel</i></div>
            <h3 class="h5-size"><%= t('marketing.landing_page.cta.roleplayers.header') %></h3>
            <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">
            <div class="h2-size blue-text"><i class="material-icons">brush</i></div>
            <h3 class="h5-size"><%= t('marketing.landing_page.cta.designers.header') %></h3>
            <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 perks-section">
      <h2 class="h5-size">Create rich worlds with your free worldbuilding notebook</h2>
      <div class="row">
        <div class="col s12 m12 l12">
          With a free account, you'll have access to the core building blocks of fictional universes (characters, locations, and items), personalized writing prompts set 
          in your world, unlimited document storage, access to a thriving <%= link_to 'community', thredded_path %> of other worldbuilders, and more.
        </div>
      </div>
      <div class="row">
        <div class="col l3 m6 s12">
          <%= render partial: 'cards/intros/content_type_intro', locals: { content_type: Universe } %>
        </div>
        <div class="col l3 m6 s12">
          <%= render partial: 'cards/intros/content_type_intro', locals: { content_type: Character } %>
        </div>
        <div class="col l3 m6 s12">
          <%= render partial: 'cards/intros/content_type_intro', locals: { content_type: Location } %>
        </div>
        <div class="col l3 m6 s12">
          <%= render partial: 'cards/intros/content_type_intro', locals: { content_type: Item } %>
        </div>
      </div>

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

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

        <div class="col s12 m4">
          <div class="icon-block center">
            <div class="h2-size orange-text"><i class="material-icons">list</i></div>
            <h3 class="h6-size"><%= t('marketing.landing_page.benefits.organization.title') %></h3>
            <p class="light">
              <%= t('marketing.landing_page.benefits.organization.text') %>
            </p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col s12 m4">
          <div class="icon-block center">
            <div class="h2-size orange-text"><i class="material-icons">group</i></div>
            <h3 class="h6-size"><%= t('marketing.landing_page.benefits.sharing.title') %></h3>
            <p class="light">
              <%= t('marketing.landing_page.benefits.sharing.text') %>
            </p>
          </div>
        </div>

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

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

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

  <div class="container">
    <div class="section perks-section">
      <h2 class="h5-size">Write smarter with integrated novel-writing software</h2>
      <div class="row">
        <div class="col s12 m12 l12">
          Cross-reference notebook pages and documents you write to build a rich network of connections that makes your world feel
          like a wiki that manages itself.
        </div>
      </div>

      <div class="row">
        <div class="col s12 m4">
          <div class="icon-block center">
            <div class="h2-size teal-text"><i class="material-icons">bubble_chart</i></div>
            <h3 class="h6-size"><%= t('marketing.landing_page.benefits.creativity.title') %></h3>
            <p class="light">
              <%= t('marketing.landing_page.benefits.creativity.text') %>
            </p>
          </div>
        </div>

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

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

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

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

  <div class="container">
    <div class="section">
      <div class="row">
        <div class="col s12">
          <h2 class="h5-size">Go the extra mile with premium notebook pages</h2>
          <p>
            Notebook.ai's free tier was intentionally designed to be enough for most worlds, but if you want to support the site and
            take your worldbuilding to a new level, a premium subscription is available that unlocks
            <%= Rails.application.config.content_types[:premium].count %> additional page templates to use. Each template is customizable and
            comes with its own set of writing prompts.
          </p>
        </div>
      </div>

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

        <div class="col l3 m6 s12">
          <div class="card hoverable" style="min-height: 330px;">
            <div class="card-image">
              <%= image_tag "card-headers/timelines.jpg", height: 300, width: 300, style: 'object-fit: cover' %>
              <h3 class="card-title bordered-text">Create timelines</h3>
            </div>
            <div class="card-content fixed-card-content">
              <p>
                <%= t("content_descriptions.timeline") %>
              </p>
            </div>
          </div>
        </div>

        <div class="col l3 m6 s12">
          <div class="card hoverable" style="min-height: 330px;">
            <div class="card-image">
              <%= image_tag "card-headers/pagecollections.jpg", height: 300, width: 300, style: 'object-fit: cover' %>
              <h3 class="card-title bordered-text">Create collections</h3>
            </div>
            <div class="card-content fixed-card-content">
              <p>
                <%= t("content_descriptions.pagecollection") %>
              </p>
            </div>
          </div>
        </div>
      </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;">
    <h2 class="h3-size header center blue-text"><%= t('marketing.landing_page.pricing.title') %></h2>
    <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.text_color %>">
                            <%= 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">
                    <%= 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') %> or cheaper
                    </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| %>
                      <%= link_to send("#{content_type.name.downcase}_worldbuilding_info_path"), class: 'content-type-container' do %>
                        <i class="material-icons <%= content_type.text_color %> medium">
                          <%= content_type.icon %>
                        </i>
                        <div class="black-text">
                          <%= content_type.name.pluralize %>
                        </div>
                      <% end %>
                    <% end %>
                    <span class="content-type-container">
                      <i class="material-icons <%= Timeline.text_color %> medium">
                        <%= Timeline.icon %>
                      </i><br />
                      <%= Timeline.name.pluralize %>
                    </span>
                    <span class="content-type-container">
                      <i class="material-icons <%= PageCollection.text_color %> medium">
                        <%= PageCollection.icon %>
                      </i><br />
                      Collections
                    </span>
                    <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>