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.webp', class: 'hero-image' %>
</div>
<div class="container">
<div class="section audience-section">
<div class="row">
<div class="col s12 m6">
<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 m6">
<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>
</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.webp", 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.webp", 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 />
—
<%= t('marketing.landing_page.quote.attribution') %>
</h5>
</div>
<%= image_tag 'landing/screenshot.webp', 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>