app/views/main/for_roleplayers.html.erb
<style>
body {
overflow-x: hidden;
}
</style>
<div id="index-banner" class="hero">
<div class="section no-pad-bot">
<div class="container">
<h1 class="header center blue-text light">
Notebook.ai for roleplayers
</h1>
<div class="row center">
<h5 class="header col s12 light">
Worldbuilding for all kinds of campaigns.
</h5>
</div>
<div class="row center">
<%= link_to 'Get started for free',
new_user_registration_path,
class: 'btn-large waves-effect waves-light blue lighten-1' %>
<br />
<br />
Create your campaign, then share it with your players.
</div>
<br />
<br />
</div>
</div>
<div class="hero-container">
<%= image_tag 'landing/planet-header.webp', class: 'hero-image' %>
</div>
</div>
<div class="container">
<div class="section">
<div class="row">
<div class="col s12">
<div>
<h4>What is Notebook.ai?</h4>
<p class="light">
Most creatives have at least one old notebook lying around somewhere, full of old plots, interesting characters, monsters,
enchanting locations, or a myriad of other margin-scribbled thoughts. Others have piles of old "plot idea"
documents in their favorite cloud storage. Others still have their brilliant, rich worlds fermenting in their heads.
</p>
<p class="light">
<strong>
Notebook.ai is a worldbuilding tool that organizes, saves, and helps in fully fleshing out your fictional worlds, your way.
</strong>
</p>
<p class="light">
Your digital notebook takes full advantage of being just that — digital. Instead of fitting notes in the margins of
pages past, you'll always have space to expand every idea. Instead of reading backward in your notes to remember who gave your character a
legendary sword, every little detail about them is organized and just a click away. You don't need to flip around
the pages in your old notebook to jump from a character to their birthplace to other characters born there; every "link" between
your ideas is a real link, and lets you click to jump from one to the next.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col s7">
<div>
<h4>How do I use it?</h4>
<p class="light">
It's actually really easy. Just sign up and create something — anything — and you're doing it right.
</p>
<p class="light">
Most users start by creating a universe to hold everything they create afterwards. You can call it your campaign's title,
"My Universe", or whatever you want. You'll be prompted to enter a description and a few other questions, but everything's
entirely optional.
</p>
<p class="light">
Once you have a universe, try creating a character or two for your main characters. You'll notice the process of creating
a notebook page is exactly the same regardless of what type of page you're creating. You click create, you're presented with a bunch of
optional fields to fill out about it, and you're done. You can create a location for where your adventure takes place, and
items for any relevant objects or trinkets in your plot.
</p>
<p class="light">
Once you've got the basics, just expand outward for your campaign! Right now, there are nine different page types you can
create in Notebook.ai.
</p>
</div>
</div>
<div class="col s4 offset-s1">
<%= image_tag 'screenshots/dashboard.webp' %>
</div>
</div>
</div>
</div>
<div class="container">
<div class="section">
<div class="row">
<% Rails.application.config.content_types[:all_non_universe].each do |content_type| %>
<div class="col l4 m4 s12">
<%= render partial: 'cards/intros/content_type_intro', locals: { content_type: content_type } %>
</div>
<% end %>
</div>
</div>
</div>
</div>
<div class="container">
<div class="section">
<div class="row">
<div class="col s6">
<div>
<h4>Separate your worlds with Universes</h4>
<p class="light">
In addition to the page types detailed above, you can also create <strong>Universes</strong>.
</p>
<p class="light">
You can think of a universe as a bucket of time or space: a literal universe, a world, a country, a time period, even just the park down the street — your universe contains everything related
to the plot you're building, and lets you focus entirely on just what's relevant right now, even when you plan multiple campaigns or worlds in Notebook.ai.
</p>
<p class="light">
When you create a character, a location, or anything else within Notebook.ai, you'll be asked what universe it belongs to. When you visit that universe's page in your notebook later, you'll see everything inside it from one convenient place.
</p>
<div class="tip card-panel blue lighten-5 light">
Tip: Once you've created a universe on Notebook.ai, you'll see a new dropdown in the top-left corner of every page. Selecting a universe from it will "lock" your notebook to that universe: you'll only see content from that universe, and anything new you create will automatically be added to it. You can unlock or switch universes at any time.
</div>
</div>
</div>
<div class="col s5 offset-s1">
<%= image_tag 'screenshots/universe.webp', class: 'left' %>
</div>
</div>
<div class="row">
<div class="col s5">
<%= image_tag 'screenshots/sharing.webp', class: 'right' %>
</div>
<div class="col s6 offset-s1">
<div>
<h4>Share your campaign with players with easy privacy rules</h4>
<p class="light">
By default, every notebook page you create is private, for your eyes only, and completely owned by you.
</p>
<p class="light">
However, if you're sharing a world or campaign with your players, you may want to give them access to the world they're playing
in. We offer two different ways to share pages with players that should make it easy to use Notebook.ai with friends.
</p>
<p class="light">
Every Notebook.ai page has a "share" button that, when clicked, gives you the option to toggle privacy for that page or the
privacy of the universe it belongs to. You're given the URL to that page to share, and others can see what you see (but not
edit!) by visiting the shareable URL. As long as either the page they're visiting <em>or</em> the universe it belongs to is
public, they'll be able to see the page.
</p>
<p class="light">
You can also choose to share your entire universe at once, which will make it <em>and</em> each page within it visible to your
players from a single, simple switch (that you can flip either way at any time!). Doing so instantly creates a miniature wiki
for your universe, which allows viewers to browse between linked content and jump from page to page within your world.
</p>
<p class="light">
If you decide to make a page or universe private later, you can simply toggle the same switch and your pages become immediately
inaccessible to anyone other than yourself — even if they still have the URL.
</p>
<div class="tip card-panel blue lighten-5 light">
Tip: Some GMs create separate universes for "treasure troves" of information (like bestiaries and reference material) they'd like to share with their players halfway through a campaign. This allows sharing your entire universe with players from the beginning, and then sharing a second universe whenever the players have earned it.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s6">
<div>
<h4>Keep your players engrossed with a rich world of consistent details</h4>
<p class="light">
Having an in-depth reference while campaigning lets you quickly look up even the smallest of details when you need them and
keep the flow of gameplay uninterrupted. You'll never again have to flip backward to find out what reward Simon promised, or what
city you said Elise was from. Everything you need is organized and at your fingertips.
</p>
<p class="light">
If you're not the type to build your world out completely before playing, Notebook.ai can also be used during an active campaign
for the same kind of references. Each time you introduce a new character, simply create a character page for them (it's fast!).
When you describe anything about them, you can jot it down in its rightful place and you can then refer back to it later.
</p>
<p class="light">
And, of course, if the default fields don't cover every little detail of your world, you can always create new categories
and fields on any content type, like "biggest weakness" on characters or "yet-to-be-discovered treasures" for locations.
It's <em>your</em> world — track anything you want!
</p>
<div class="tip card-panel blue lighten-5 light">
Tip: When you create a custom field for any page type, it's immediately available for all other pages of the same time. For
example, creating a "worn accessories" field on Characters will add the field to <em>all</em> characters — both existing and
not yet created.
</div>
</div>
</div>
<div class="col s5 offset-s1">
<%= image_tag 'screenshots/character.webp', class: 'left' %>
</div>
</div>
<div class="row">
<div class="col s5">
<%= image_tag 'screenshots/gallery.webp', class: 'right' %>
</div>
<div class="col s6 offset-s1">
<div>
<h4>Upload images for inspiration or reference</h4>
<p class="light">
Whether you're in the initial idea stage or further along and looking to save reference material, Notebook.ai allows image
uploads to any notebook pages you create.
</p>
<p class="light">
You'll notice that any images you upload are featured across the site, from your dashboard to individual notebook pages.
In addition to a Gallery tab on content that shows off every image uploaded to it, you'll also see slideshows banners
at the top of your notebook pages highlighting the images you upload — and you may even see a character peeking
back at you from your dashboard from time to time!
</p>
<p class="light">
Free users start with 50MB of storage space that can be used to upload any size of image. Premium users are boosted an additional
10GB of storage space. You can delete any image at any time to reclaim and reuse its space.
</p>
<div class="tip card-panel blue lighten-5 light">
Tip: Uploading images is a great way to save the maps of your world. They're highlighted at the top of their Location page,
and you can click to expand them to their full, original size at any time.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s6">
<div>
<h4>Build family trees and organization hierarchies with ease</h4>
<p class="light">
Because Notebook.ai is <em>smart</em>, we help out whenever we can when you link two pages together.
</p>
<p class="light">
Family trees are a great example of this. If you created a small family of three — say, Alice and Bob and their son
Carl — you can link them together with each character's Family tab. The fields there allow you to select from other
characters you've created in that universe and set relationships, like father, mother, sibling, spouse, or child.
</p>
<p class="light">
When you're editing Alice and say Bob's her spouse and Carl's her son, we automatically edit Bob and Carl's pages also.
For Bob, we know (and save) that Alice is his spouse; and for Carl, we automatically detect what gender Alice is and note that
Alice is his mother. It all happens automatically, so your family trees almost build themselves.
</p>
<p class="light">
You'll see similar "deep linking" when creating Locations or Groups. Creating sub-groups will automatically create parent groups, alliances and rivalships will automatically save to all groups involved, and nesting locations within each other will automatically link back to the parent location as well.
</p>
<div class="tip card-panel blue lighten-5 light">
Tip: This linking happens automatically, and you can always click through linked pages (because they are, after all, links!) to
verify that everything is linked properly.
</div>
</div>
</div>
<div class="col s5 offset-s1">
<%= image_tag 'screenshots/family-tree.webp', class: 'left' %>
</div>
</div>
</div>
</div>
<div class="container">
<div class="section">
<div class="card-panel blue white-text hoverable" style="height: 160px">
<div class="row">
<div class="col s9">
<h1 style="font-size: 26px; display: inline">
<%= link_to 'Start worldbuilding right now.', new_user_registration_path, class: 'white-text' %>
</h1>
<h5 style="font-size: 16px;">No card needed. Upgrade or downgrade seamlessly any time.</h5>
</div>
<div class="col s3 valign-wrapper" style="height: 130px;">
<div class="valign">
<%= link_to 'Claim your notebook', new_user_registration_path, class: 'btn white blue-text btn-large waves-effect waves-light' %>
<div class="white-text center" style="margin-top: 5px;">
It takes 20 seconds to sign up.
</div>
</div>
</div>
</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">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">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">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">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">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>
</div>
</div>
<div class="container">
<div class="section">
<div class="row">
<div class="col s12">
<div>
<h4>How much does it cost?</h4>
<div class="row">
<div class="col s7">
<p class="light">
<strong>Creating core notebook pages (universes, characters, locations, and items) is free</strong> and doesn't require
any payment information to start creating your novel's world immediately upon signup. Free users, however,
are restricted to five universes to get started with.
</p>
<p class="light">
We believe this trifecta of <em>people, places, and things</em> covers most worlds, but serious worldbuilders often opt
to pay for a Premium membership, which unlocks six additional ways to worldbuild — namely creatures, races,
religions, groups, magic, and languages.
</p>
<p class="light">
<strong>Premium memberships are $9.00, billed monthly, and allow you to create unlimited amounts of any type of content.</strong>
Additionally, a Premium subscription also increases your image upload storage from 50MB to 10GB.
</p>
</div>
<div class="col s4 offset-s1">
<% Rails.application.config.content_types[:all].each_with_index do |content_type, i| %>
<i class="material-icons <%= content_type.text_color %> tooltipped medium" data-delay="100" data-tooltip="<%= User.new.can_create?(content_type) ? 'All' : 'Premium' %> users can create unlimited <%= content_type.name.pluralize %>.">
<%= content_type.icon %>
</i>
<%= '<br />'.html_safe if (i + 1) % 6 == 0 %>
<% end %>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div>
<h4>How does it compare to other worldbuilding software?</h4>
<div class="row">
<div class="col s3">
<p class="light">
<a href='https://medium.com/indent-labs/introducing-notebook-ai-f06d8d3d8e77' target="_blank">We launched Notebook.ai last
October</a> and we've been iterating fast based on the feedback of thousands of users excited to have a smart tool for
their worldbuilding. While we focused primarily on authors to begin with, many users have told us we're a fantastic solution
for managing campaigns and keeping players up to date.
</p>
<p class="light">
Other campaign management software tends to focus more on the gameplay experience rather deep worldbuilding, but we've
compiled a feature comparison chart comparing to the most popular worldbuilding and campaign management software available
so you can decide which is best for you.
</p>
</div>
<div class="col s9">
<table class="highlight comparison-table">
<tr>
<th style="width: 160px;"></th>
<th>Notebook.ai Free</th>
<th>Obsidian Portal</th>
<th>Hero Lab</th>
<th>RealmWorks</th>
<th>Notebook.ai Premium</th>
</tr>
<tr>
<th>Create universes</th>
<td>Up to 5</td>
<td>Unlimited</td>
<td>-</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<th>Create characters</th>
<td><i class="material-icons green-text">check</i></td>
<td><i class="material-icons green-text">check</i></td>
<td><i class="material-icons green-text">check</i></td>
<td><i class="material-icons green-text">check</i></td>
<td><i class="material-icons green-text">check</i></td>
</tr>
<tr>
<th>Create locations</th>
<td><i class="material-icons green-text">check</i></td>
<td><i class="material-icons green-text">check</i></td>
<td>-</td>
<td><i class="material-icons green-text">check</i></td>
<td><i class="material-icons green-text">check</i></td>
</tr>
<tr>
<th>Create items</th>
<td><i class="material-icons green-text">check</i></td>
<td>-</td>
<td><i class="material-icons green-text">check</i></td>
<td><i class="material-icons green-text">check</i></td>
<td><i class="material-icons green-text">check</i></td>
</tr>
<tr>
<th>Create creatures</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td><i class="material-icons green-text">check</i></td>
<td><i class="material-icons green-text">check</i></td>
</tr>
<tr>
<th>Create groups</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td><i class="material-icons green-text">check</i></td>
<td><i class="material-icons green-text">check</i></td>
</tr>
<tr>
<th>Create races</th>
<td>-</td>
<td>-</td>
<td><i class="material-icons green-text">check</i></td>
<td><i class="material-icons green-text">check</i></td>
<td><i class="material-icons green-text">check</i></td>
</tr>
<tr>
<th>Create religions</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td><i class="material-icons green-text">check</i></td>
<td><i class="material-icons green-text">check</i></td>
</tr>
<tr>
<th>Create magic</th>
<td>-</td>
<td>-</td>
<td><i class="material-icons green-text">check</i></td>
<td><i class="material-icons green-text">check</i></td>
<td><i class="material-icons green-text">check</i></td>
</tr>
<tr>
<th>Create languages</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td><i class="material-icons green-text">check</i></td>
<td><i class="material-icons green-text">check</i></td>
</tr>
<tr>
<th>Customize templates</th>
<td><i class="material-icons green-text">check</i></td>
<td>-</td>
<td>-</td>
<td><i class="material-icons green-text">check</i></td>
<td><i class="material-icons green-text">check</i></td>
</tr>
<tr>
<th>Online access</th>
<td><i class="material-icons green-text">check</i></td>
<td><i class="material-icons green-text">check</i></td>
<td>-</td>
<td>-</td>
<td><i class="material-icons green-text">check</i></td>
</tr>
<tr>
<th>Price</th>
<td>Free</td>
<td>Free</td>
<td>$29.99</td>
<td>$49.99</td>
<td>$9/month</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="section">
<div class="row">
<div class="col s12">
<div>
<h4>Who owns the ideas I store in Notebook.ai?</h4>
<p class="light">
<strong>You do</strong>, 100%. We've written more about this <%= link_to 'in our privacy policy', privacy_policy_path %>.
</p>
<p class="light">
Additionally, all content is private by default and only accessible by you. When you click the "share" link on any content,
you're given the option to mark either that individual page or the universe it lives in as "public" or "private". A public universe
allows viewers to click around and see every page in that universe, while a public page in a private universe allows only that
page to be viewed. You can mark anything private again at any time and it will be instantly applied.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="row">
<h4>What do users think about Notebook.ai?</h4>
<div class="col s12 m6 l6">
<div class="card-panel grey lighten-5 z-depth-1">
<div class="row valign-wrapper">
<div class="col s2">
<%= image_tag 'logos/book-small.webp', class: 'responsive-img' %>
</div>
<div class="col s10">
<div class="black-text flow-text">
"Thank you for this amazing program. It's just what I, and hundreds of others, need to help flesh out their world and keep our ridiculous notes straight."
</div> — Faustyna, happy user
</div>
</div>
</div>
</div>
<div class="col s12 m6 l6">
<div class="card-panel grey lighten-5 z-depth-1">
<div class="row valign-wrapper">
<div class="col s2">
<%= image_tag 'logos/book-small.webp', class: 'responsive-img' %>
</div>
<div class="col s10">
<div class="black-text flow-text">
"This is one of those products I didn't realize I desperately wanted till I interacted with it. It all works very slick, very modern."
</div> — JonBanes, happy user
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m6 l6">
<div class="card-panel grey lighten-5 z-depth-1">
<div class="row valign-wrapper">
<div class="col s2">
<%= image_tag 'logos/book-small.webp', class: 'responsive-img' %>
</div>
<div class="col s10">
<div class="black-text flow-text">
"This is amazing. I have so many text documents sitting in various folders and files compiling all my info, so thank you so much for making a place I can keep everything online and in one place. This looks amazing and I'm so glad to see it grow and expand."
</div> — cephalopodcat, happy user
</div>
</div>
</div>
</div>
<div class="col s12 m6 l6">
<div class="card-panel grey lighten-5 z-depth-1">
<div class="row valign-wrapper">
<div class="col s2">
<%= image_tag 'logos/book-small.webp', class: 'responsive-img' %>
</div>
<div class="col s10">
<div class="black-text flow-text">
"I just want to say I love you. I have spent the last week or so compiling notes from three different notebooks into this program, and it's been a few days and there's already tons of new things that are awesome."
</div> — Dr_Toast, happy user
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 center">
<div class="card-panel grey lighten-5 z-depth-1">
<div class="row valign-wrapper">
<div class="col s2">
<%= image_tag 'logos/book-small.webp', class: 'responsive-img' %>
</div>
<div class="col s10">
<div class="black-text flow-text">
"Where the hell has this been my whole life?"
</div> — politesniper, happy user
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 center">
<div><%= image_tag 'logos/both-small.webp' %></div>
<%= link_to 'Start worldbuilding now', new_user_registration_path, class: 'btn blue btn-large waves-effect waves-light ' %>
</div>
</div>
</div>
<div class="hero valign-wrapper">
<div class="container center">
<h5 class="header light">
<strong>I started building Notebook.ai to replace dozens of my own physical notebooks full of my characters and fictional worlds.</strong>
<br />
<br />
<strong>It's incredibly humbling to see that it's been so helpful to so many other brilliant worldbuilders from around the world.</strong>
<br />
<br />
—
Andrew Brown, Author,
Notebook.ai creator
</h5>
</div>
<div class="hero-container">
<%= image_tag 'landing/screenshot.webp', class: 'hero-image'%>
</div>
</div>
</div>