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 teal-text text-lighten-2">
          Your digital notebook is here.
        </h1>
        <div class="row center">
          <h5 class="header col s12 light">
            Notebook.ai grows with your ideas and collaborates back with you.
          </h5>
        </div>
        <div class="row center">
          <%= link_to 'Get Yours', new_user_registration_path, class: 'btn-large waves-effect waves-light teal lighten-1' %>
          <br /><br />
          Get <strong>two months free</strong> when you sign up during November<br />
          with promotion code <u>LAUNCHPARTY</u>. No card needed.
        </div>
        <br><br>

      </div>
    </div>
    <div class="hero-container">
      <%= image_tag 'landing/digital-notebook.jpg', class: 'hero-image' %>
    </div>
  </div>

  <div class="container">
    <div class="section">
      <div class="row">
        <div class="col l4 m6 s12">
          <%= render partial: 'cards/intros/content_type_intro', locals: { content_type: Character } %>
        </div>
        <div class="col l4 m6 s12">
          <%= render partial: 'cards/intros/content_type_intro', locals: { content_type: Location } %>
        </div>
        <div class="col l4 m6 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>Promotes creativity</h5>
            <p class="light">
              Your Notebook now asks you questions about your characters and ideas, and your answers are saved too.
            </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>Speeds up writing</h5>
            <p class="light">
              With a universe of information at your fingertips, you can look up anything quickly and keep writing.
            </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>Continuity checks</h5>
            <p class="light">
              When every little fact is stored in one place, you can rest easy knowing you won't accidentally contradict yourself.
            </p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col s12 m4">
          <div class="icon-block center">
            <h2 class="brown-text"><i class="material-icons">face</i></h2>
            <h5>Deeper characters</h5>
            <p class="light">
              Get to know your characters. Track every detail of their thoughts, appearance, and personality.
            </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>Richer worlds</h5>
            <p class="light">
              Immerse yourself in vibrant worlds with tracking available for any kind of locations.
            </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>Legendary items</h5>
            <p class="light">
              Every object has a backstory that can shine as bright as any character &mdash; if you let it.
            </p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col s12 m4">
          <div class="icon-block center">
            <h2 class="brown-text"><i class="material-icons">search</i></h2>
            <h5>Searchable</h5>
            <p class="light">
              Quickly find anything, anywhere. Even that random thought you jotted down at 3am two years ago.
            </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>Organizable</h5>
            <p class="light">
              Focus on one universe at a time and filter everything else out. Reorganize, sort, and write freely.
            </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>Backed up forever</h5>
            <p class="light">
              Never lose a notebook full of priceless ideas again. Notebook.ai is backed up and always available.
            </p>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col s12 m4">
          <div class="icon-block center">
            <h2 class="brown-text"><i class="material-icons">settings_ethernet</i></h2>
            <h5>Grows with you</h5>
            <p class="light">
              Plan as much as you want in your Notebook, for life. The only limits here are your imagination.
            </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>Brainstorm together</h5>
            <p class="light">
              Invite anyone to review any content you decide to share. Sometimes a second set of eyes makes all the difference.
            </p>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block center">
            <h2 class="brown-text"><i class="material-icons">library_books</i></h2>
            <h5>Make it yours</h5>
            <p class="light">
              Plan creatures, magic, scenes, and other page types specific to your ideas, tailored to you.
            </p>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="container">
    <div class="section">
      <div class="row">
        <%
          content_type_pool = [Universe, Scene, Creature, Magic, Group, Language, Race, Religion]
        %>

        <% content_type_pool.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>
    </div>
  </div>

  <div class="hero valign-wrapper">
    <div class="container center">
      <h5 class="header light">
        <strong>"Imagine sliced bread as a notebook. This is even better."</strong>
        <br /><br />
        &mdash; Andrew Brown, Author & CEO
      </h5>
    </div>
    <div class="hero-container">
      <%= image_tag 'landing/screenshot.jpg', class: 'hero-image'%>
    </div>
  </div>

  <div class="container" style="margin-top: 50px; margin-bottom: 75px;">
    <h3 class="header center teal-text">Notebook Pricing</h3>
    <div class="row center" style="clear: both">
      <div class="card-panel green white-text" width="200px;">
        Get your first <strong>two months free</strong> when you sign up during November<br />
        with promotion code <u>LAUNCHPARTY</u>. No card needed.
        <%= link_to 'Get started now.', 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 grey-text text-darken-4">Ethereal<br>
                        <small><em><a class="red-text text-darken-1">Free forever</a></em></small></span>
                    <ul class="plan-features">
                      <li>Plan up to <strong>5</strong> universes</li>
                      <li>Plan <strong>unlimited</strong> characters</li>
                      <li>Plan <strong>unlimited</strong> locations</li>
                      <li>Plan <strong>unlimited</strong> items</li>
                    </ul>
                    <div class="row center">
                      <%= link_to 'Get Started', 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 grey-text text-darken-4">Eternal<br>
                        <small><em class="red-text text-darken-1">$9/month</em></small>
                    </span>
                    <ul class="plan-features">
                      <li>Plan <strong>unlimited</strong> universes</li>
                      <li>Plan <strong>unlimited</strong> characters</li>
                      <li>Plan <strong>unlimited</strong> locations</li>
                      <li>Plan <strong>unlimited</strong> items</li>
                      <li>Plan <strong>unlimited</strong> creatures</li>
                      <li>Plan <strong>unlimited</strong> groups</li>
                      <li>Plan <strong>unlimited</strong> languages</li>
                      <li>Plan <strong>unlimited</strong> magic</li>
                      <li>Plan <strong>unlimited</strong> races</li>
                      <li>Plan <strong>unlimited</strong> religions</li>
                      <li>Plan <strong>unlimited</strong> scenes</li>
                    </ul>
                    <div class="row center">
                      <%= link_to 'Get Started', new_user_registration_path, class: 'btn-large waves-effect waves-light teal lighten-1' %>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>


<footer class="page-footer light-blue darken-1">
  <div class="container">
    <div class="row">
      <div class="col l6 s12">
        <h5 class="white-text">
          Notebook.ai is an open-source project by Indent Labs.
        </h5>
        <p class="grey-text text-lighten-4">
          If you like Notebook.ai, you can thank
          <a href="http://twitter.com/drusepth" class="white-text" target="_new">@drusepth</a>,
          <a href="http://twitter.com/Lord_Cantido" class="white-text" target="_new">@Lord_Cantido</a>, and
          <a href="http://twitter.com/heydonovan" class="white-text" target="_new">@heydonovan</a>. :)
        </p>
      </div>
      <div class="col l4 offset-l2 s12">
        <h5 class="white-text">Get Involved</h5>
        <ul>
          <li><a class="grey-text text-lighten-3" href="http://www.github.com/indentlabs/notebook">Source Code on GitHub</a></li>
          <li><a class="grey-text text-lighten-3" href="https://github.com/indentlabs/notebook/issues">Browse the Roadmap</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer-copyright">
    <div class="container">
    © 2016 Indent Labs, LLC
    <a class="grey-text text-lighten-4 right" href="http://www.indentlabs.com">Indent Labs</a>
    </div>
  </div>
</footer>