Landing Pages#

A landing page is typically deployed to the root of a website and clearly shows the purpose of the site. In the case of a SaaS application, the landing page will explain the features of the app and should have a large call to action. The call to action is the thing that you want a prospective customer to do when they visit your landing page.

In this lesson, we'll design a basic landing page that explains our application and provides a call to action button for visitors to register with the application. At this point, we will just create a dummy registration form. In a later module dealing with authorization, we will wire up the registration form with our backend.

A First-Draft Landing Page#

We are going to create the following very simple landing page for now. Later on, we'll add more details, screenshots and sections as we continue to work through the project.

Bulma Columns#

Bulma provides column layouts for classes to organize content in two or more columns:

<!-- Columns are used as a wrapper element to wrap multiple columns -->

<div class="columns">

  <!-- Our left hand column -->

  <div class="column">

    <!-- The content class creates nicely style text -->

    <div class="content">Some nicely formatted content in column 1</div>

  </div>

  <!-- Our right hand column (since we only have two columns) -->

  <div class="column">

    <div class="content">Some more content in column 2</div>

  </div>

</div>