Design a waitlist page

This page outlines how to design a landing page for your waitlist app:
1.​Create a layout​
2.​Add and configure introduction components​
3.​Add and configure the waitlist Form​
Create a layout
Before you start adding components and logic to your application, design a layout for your app:
1.Open your application and navigate to the Design view.
2.Select the background and navigate to the Styles tab's Layout section to configure the following settings:
Mode: Column
Alignment: Center
Spacing: 10
This ensures any components placed in your application are vertically arranged, center aligned, and evenly spaced out.
Add and configure introduction components
To add and configure components for your application's Intro space:
1.Drag-and-drop a Container component into the application and name it Intro. This container holds all the components for your introduction space.
2.Select Intro and open Styles > Size to configure the following settings:
Max W: 1000
Height: Hug contents
This ensures the Intro section does not become distorted when users enlarge the window.
3.Open the Layout menu and configure the following settings:
Mode: Row
Alignment: Center
This ensures the components in the Intro container appear side-by-side.
4.Drag-and-drop the following components into Intro:
Container
Image
5.Select the Container and name it Intro text. This holds the Text components for your introduction space.
6.Drag-and-drop three Text components into Intro text and name them each:
tagline
sign up
description
7.Select all the Text components and open Styles > Padding to set the Padding to 10. This adds space between the text and the component borders
8.Double-click the tagline component to change the text to your product tagline.
9.(Optional) Open Styles > Font Styles to change the Size to 35 and the Font Variant to 500.
10.Double-click the sign up component to configure it as a prompt for users to sign up.
11.(Optional) Open Styles > Background to set the color to black.
12.(Optional) Open Styles > Font Styles to set the font color to white.
13.(Optional) Open Styles > Border and set the corner radius to 15.
14.Double-click the description component to input a description of your product.
15.Select the Image component and open the State menu.
16.Click the image icon, then the plus icon to upload an image for your page.
17.Open Styles > Size and set Max W to 450.
Your app should look similar to this:
Add and configure the waitlist form
To add and configure the waitlist Form:
1.Open the Libraries panel and drag-and-drop a Container below the Introduction component. Name it User info.
2.Open the Libraries panel and drag-and-drop a Form component into User info.
3.Open the Libraries panel and drag-and-drop the following components into the Form:
(2) Text
(2) Text Input
Button
The Text components are labels for the input spaces. Position the Text and Text Input components in alternating order with the button at the bottom.
4.Select all the Text Input components and click Styles > Size to set the Min W to 500.
5.Double-click each Text component to set the following labels for each one:
Name
Role
Email address
6.Select each Text Input component and rename them to match the text labels. This is useful for locating the correct components when you build your application logic.
7.Double-click the Button's text to change the text label to Submit.
8.Click the State icon above the button and set its type to submit. This submits form data when the button is clicked.
9.(Optional) Select the Button component and configure the following settings in the Styles tab:
Background: Black.
Corner Radius: 15.
10.(Optional) Select the Text in the Button component and select Styles > Font Styles to set the color to white.
Your app should look similar to this:
Congratulations, you just finished designing your waitlist application! To connect your application to an external database, continue to Configure a POST request.