tinyforms/app/views/home/index.html.erb

<div id="wrapper" class="has-text-centered-mobile">

  <!-- Hero -->
  <section id="hero" class="hero is-medium">
      <div class="hero-body">
          <div class="container">
              <h1 class="is-size-1 is-size-3-mobile">
                the form backend for designers and developers
              </h1>
              <p class="">
                Link your online forms to <span class="google-sheets">Google Sheets</span> or <span class="airtable">Airtable</span> and receive form submissions in your favorite spreadsheet tool.
              </p>
              <p class="call-to-action">
                <%= link_to "Signup", signup_url, class: 'button is-rounded is-primary has-text-white a-menu' %>
                or try our <%= link_to "Live demo", demo_url %>
              </p>
          </div>
      </div>
  </section>


  <section class="section has-white-mustard-gradient">
    <div class="container">
      <div class="columns">
        <div class="column">
          <div class="box">
            <article class="media">
              <div class="media-left">
                <h1 class="title">1.</h1>
              </div>
              <div class="media-content">
                <div class="content">
                  <h3 class="subtitle">Create a new form</h3>
                  <p>
                    tinyforms will automatically create and link a connected Google Sheets document for you.
                  </p>
                </div>
              </div>
            </article>
          </div>
        </div>

        <div class="column">
          <div class="box">
            <article class="media">
              <div class="media-left">
                <h1 class="title">2.</h1>
              </div>
              <div class="media-content">
                <div class="content">
                  <h3 class="subtitle">Point your online form to our server</h3>
                  <p>
                    Simply configure your form to POST to your tinyforms URL.
                  </p>
                </div>
              </div>
            </article>
          </div>
        </div>

        <div class="column">
          <div class="box">
            <article class="media">
              <div class="media-left">
                <h1 class="title">3.</h1>
              </div>
              <div class="media-content">
                <div class="content">
                  <h3 class="subtitle">Done!</h3>
                  <p>
                    tinyforms will automatically append each submission to your Google Sheets or Airtable document.
                  </p>
                </div>
              </div>
            </article>
          </div>
        </div>

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


  <section id="features" class="section has-mustard-bg  has-text-white">
    <div class="container">
      <div class="columns">
        <div class="column">
          <h3 class="is-size-3">
            Full design control over your forms
          </h3>
          <p class="paragraph">
            Create beautiful online forms without any restrictions.<br>Tinyforms stays completely in the background.
          </p>
          <p>
            Do you need help creating your forms? We'll help you!
          </p>
        </div>

        <div class="column">
          <h3 class="is-size-3">
            Full Google Sheets and Airtable flexibility
          </h3>
          <p class="paragraph">
            Use all your favorite Google Sheets and Airtable features. E.g. share the document with your coworkers or use field formulas.<br>
          </p>
        </div>
      </div>
      <div class="columns">
        <div class="column">
          <h3 class="is-size-3">
            Full design control over your forms
          </h3>
          <p class="paragraph">
            Create beautiful online forms without any restrictions.<br>Tinyforms stays completely in the background.
          </p>
          <p>
            Do you need help creating your forms? We'll help you!
          </p>
        </div>

        <div class="column">
          <h3 class="is-size-3">
            Full Google Sheets and Airtable flexibility
          </h3>
          <p class="paragraph">
            Use all your favorite Google Sheets and Airtable features. E.g. share the document with your coworkers or use field formulas.<br>
          </p>
        </div>
      </div>
    </div>
  </section>


        <section id="newsletter" class="section">
            <div class="container">
                <h3 class="is-size-3">
                    Newsletter or Call to Action</h3>
                <p class="">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                </p>
                <div class="field newsletter-field">
                    <div class="control">
                        <input class="input newsletter-input" type="text" placeholder="mail@example.com">
                    </div>
                </div>
                <button class="btn has-mustard-bg has-text-white is-size-7 a-menu">
                    sign up now
                </button>
            </div>
        </section>
        <!-- END Newsletter -->
        <!-- Footer -->
        <section id="footer" class="section has-blue-bg">
            <div class="container has-text-centered">
                <a href="" class="is-size-4 social-link">
                    <i class="fab fa-twitter"></i>
                </a>
                <a href="" class="is-size-4 social-link">
                    <i class="fab fa-github"></i>
                </a>
                <a href="" class="is-size-4 social-link">
                    <i class="fab fa-dev"></i>
                </a>
                <p class="has-text-white is-size-7">
                    Built with <i class="fas fa-heart"></i> and <a href="">Bulma</a>, by <a href="">@hellobetkowski</a>
                </p>
            </div>
        </section>
    </div>