indentlabs/notebook

View on GitHub
app/views/main/for_writers.html.erb

Summary

Maintainability
Test Coverage
<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 writers
      </h1>
      <div class="row center">
        <h5 class="header col s12 light">
          Worldbuilding for stories, novels, plays, and poems.
        </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 hoverable' %>
        <br />
        <br />
        Novel planning software that's fun and effective.
      </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 writers have at least one old notebook lying around somewhere, full of old story ideas, interesting characters,
            enchanting locations, or a myriad of other margin-scribbled thoughts. Some writers have piles of old "story 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 world, your way.
            </strong>
          </p>
          <p class="light">
            Your digital notebook takes full advantage of being just that &mdash; 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 story to find out how old you
            said that one character was, 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 &mdash; anything &mdash; 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 novel'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 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 story takes place, and
            items for any relevant objects or trinkets in your story.
          </p>
          <p class="light">
            Once you've got the basics, just expand outward for your story! Right now, there are <%= Rails.application.config.content_types[:all_non_universe].count %> different page types you can
            create in Notebook.ai: <%= Rails.application.config.content_types[:all_non_universe].map { |t| t.name.downcase.pluralize }.to_sentence %>.
          </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 l3 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 &mdash; 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 stories 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/quick-reference.webp', class: 'right' %>
      </div>
      <div class="col s6 offset-s1">
        <div>
          <h4>Build your world piece by piece with personalized writing prompts</h4>
          <p class="light">
            After you've created a few pages in Notebook.ai, you'll start to see the magic happening. On your dashboard, for example,
            you'll now have a new card asking questions about what you've created so far.
          </p>
          <p class="light">
            If you've created a character, it might ask where that character was born. If you've created a city, it might ask how many
            people live there. If you've created a creature, it might ask how it hunts for food. It's a fun, bite-sized way to start
            thinking about your ideas from new angles and flesh out your world more fully.
          </p>
          <p class="light">
            When you write an answer, it is automatically saved to that character &mdash; or location, or creature, or anything else it
            asked about &mdash; and you can see your answer alongside any other information you've saved on that content's notebook page.
          </p>
          <div class="tip card-panel blue lighten-5 light">
            Tip: Every question card will also have a "quick reference" tab, which shows you other information about your characters and
            other ideas that might help when answering the question. This reference is generated automatically from everything Notebook.ai knows
            about your universe.
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col s6">
        <div>
          <h4>Keep your readers engrossed with a rich world of consistent details</h4>
          <p class="light">
            Having an in-depth reference while writing lets you quickly look up even the smallest of details when you need them and then
            keep writing uninterrupted. You'll never again have to read backward to find out what shirt color Simon was wearing, 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 writing, Notebook.ai can also be used while writing for the
            same kind of reference. 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 "tallest skyscraper" for locations. It's <em>your</em>
            world &mdash; track anything you want!
          </p>

          <div class="tip card-panel blue lighten-5 light">
            Tip: After you've built your universe, you can share it (or any individual pages in it) with others to get
            feedback. This can avoid embarassing mistakes that can manifest later in your writing like, "Why couldn't Harry Potter see Thestrals until book five?" or "Why didn’t the fellowship of the ring just get the eagles to fly the ring to Mount Doom?"
          </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 &mdash; 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 &mdash; say, Alice and Bob and their son
            Carl &mdash; 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">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">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>

    <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><%= 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">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>

  </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 <strong><%= Rails.application.config.content_types[:premium].count %></strong> additional ways to worldbuild &mdash;
                namely <%= Rails.application.config.content_types[:premium].map { |ct| ct.name.downcase.pluralize }.to_sentence %>.
              </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">
                Until <a href='https://medium.com/indent-labs/introducing-notebook-ai-f06d8d3d8e77' target="_blank">we launched Notebook.ai last October</a>,
                worldbuilding was almost exclusively done with unstructured solutions like spreadsheets and personal wikis &mdash; or the good ol'
                pen & paper.
              </p>
              <p class="light">
                However, we've been pleased to see other worldbuilding software crop up since our launch and we pride ourselves in providing the best
                worldbuilding software available to writers worldwide.
              </p>
            </div>
            <div class="col s9">
              <table class="highlight comparison-table">
                <tr>
                  <th style="width: 160px;"></th>
                  <th>Notebook.ai Free</th>
                  <th>One Stop Worldbuilding</th>
                  <th>Notebook.ai Premium</th>
                </tr>
                <tr>
                  <th>Create universes</th>
                  <td>Up to 5</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>
                </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><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>
                </tr>
                <tr>
                  <th>Create creatures</th>
                  <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><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>
                </tr>
                <tr>
                  <th>Create religions</th>
                  <td>-</td>
                  <td>-</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>
                </tr>
                <tr>
                  <th>Create languages</th>
                  <td>-</td>
                  <td>-</td>
                  <td><i class="material-icons green-text">check</i></td>
                </tr>
                <tr>
                  <th>Create countries</th>
                  <td>-</td>
                  <td>-</td>
                  <td><i class="material-icons green-text">check</i></td>
                </tr>
                <tr>
                  <th>Create deities</th>
                  <td>-</td>
                  <td>-</td>
                  <td><i class="material-icons green-text">check</i></td>
                </tr>
                <tr>
                  <th>Create floras</th>
                  <td>-</td>
                  <td>-</td>
                  <td><i class="material-icons green-text">check</i></td>
                </tr>
                <tr>
                  <th>Create governments</th>
                  <td>-</td>
                  <td>-</td>
                  <td><i class="material-icons green-text">check</i></td>
                </tr>
                <tr>
                  <th>Create landmarks</th>
                  <td>-</td>
                  <td>-</td>
                  <td><i class="material-icons green-text">check</i></td>
                </tr>
                <tr>
                  <th>Create planets</th>
                  <td>-</td>
                  <td>-</td>
                  <td><i class="material-icons green-text">check</i></td>
                </tr>
                <tr>
                  <th>Create religions</th>
                  <td>-</td>
                  <td>-</td>
                  <td><i class="material-icons green-text">check</i></td>
                </tr>
                <tr>
                  <th>Create scenes</th>
                  <td>-</td>
                  <td>-</td>
                  <td><i class="material-icons green-text">check</i></td>
                </tr>
                <tr>
                  <th>Create technologies</th>
                  <td>-</td>
                  <td>-</td>
                  <td><i class="material-icons green-text">check</i></td>
                </tr>
                <tr>
                  <th>Create towns</th>
                  <td>-</td>
                  <td>-</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><i class="material-icons green-text">check</i></td>
                  <td><i class="material-icons green-text">check</i></td>
                </tr>
                <tr>
                  <th>Upload images</th>
                  <td>Up to 50MB</td>
                  <td>-</td>
                  <td>Up to 10GB</td>
                </tr>
                <tr>
                  <th>Price</th>
                  <td>Free</td>
                  <td>$9/month</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 authors 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> &mdash; 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> &mdash; 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> &mdash; 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> &mdash; Dr_Toast, 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">
                    "I want to say thanks! This is my first year doing NaNoWriMo, and I was kind of at a loss of where to start, but this website really helps get things in perspective. I can see that you really put a lot of thought into it. I hope to see it succeed!"
                  </div> &mdash; t5runner, 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">
                    "Where the hell has this been my whole life?"
                  </div> &mdash; politesniper, happy user
                </div>
              </div>
            </div>
          </div>

          <!--
                    "I am constantly returning to characters and zoning out on just filling out information. I hope this keeps growing, I can certainly see myself using it long term."


                    "I have a lot of complicated universes on my plate at the moment, and being able to track everything will come in really handy."

                    "I really do love Notebook.ai, though. It's been so fun to use!!"
                    "I see insane potential for Notebook and it just keeps getting better."
          -->

        </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 authors from around the world.</strong>
        <br />
        <br />
        &mdash;
        Andrew Brown, Author,
        Notebook.ai creator
      </h5>
    </div>
    <div class="hero-container">
      <%= image_tag 'landing/screenshot.webp', class: 'hero-image'%>
    </div>
  </div>
</div>