In this lesson, let's explore creating a Waitlist page. So it's always a good idea to have a Waitlist page while you're building out your app because that takes a bit longer and in the meantime marketing needs to start.

So in order to achieve this as easily and quickly as possible, we'll be combining the component library as a starting point with our own custom design. Let's jump in!

Let's open the component library and I can see Marketing under the filters. I'm just going to scroll down to have a look at something that could be used as a starting point for our Waitlist page. And I do want an image, but I actually prefer it to be a column layout like this. So why don't we actually start with this component and then just adapt from a row layout, so left-right, to a column, top-to-bottom.

I'm going to drag this in. Okay, close the component library and then the first thing I'm going to do is have a look on the left-hand side— the elements tree, where we have our page, and then we have our Group hero.

Now, I can see that there are nested containers and elements within our Group hero so I'm going to open it up again and I can see we have an inner group. Within that inner group, we have some more groups. We have group on the left, group on the right, and by creating all of these groups, it gives us the opportunity to micro adjust the layout of each group. This is what we want. So let's have a look!

So this Group left that's column, top-to-bottom. Perfect! Nothing needs to change there and then we have a group on the right which is a row layout. That doesn't matter because there's only one element within here, an image.

Okay, so before I make any huge changes, I'm just clicking through to make sure I understand what's on the page and how it is laid out. I have a better understanding here so I'm going to click on... let's have a look, Group hero, I'm going to click on Group margins. I'm going to go to the layout tab, as I suspect, yes, container layout row. If I want to stack a top-to-bottom, this needs to be a column and, there we go, now it's column.

Now, this image is pulling to the left-hand side and if I click on the image, I don't really have layout options here. But if I click on this parent, the Group right here, I can see that in the layout tab on Group right, the horizontal alignment is on the left. Let's just simply move that to the center. Good stuff!

Okay, now, overall the design is too wide so I want to constrain the width. So I've clicked back on Group margin and I can see that on the layout tab we have a max width of 1137. Let's change this to 640. This looks a lot better.

I also just want to center align all of this text so I'm going to click on this element and I'm going to move it to the center. This text element and remember the text element and the text itself are independent. So the element does span full width of its parent container, but we have left align on the text, so I'm going to change it to the center. While I'm here, I'm going to choose one of my styles maybe it's a three is too small. Let's just have a dig through; two is too small and one. Let's change this to black. Okay, so one is closer to what I want. I'm going to play with this a bit. I'm going to say align in the center, maybe make it a bit bigger just so it reads nicely and then the line spacing going a bit tighter. Naturally, you want tighter line spacing with larger text. Okay, this text down here align in the center. Looking good. And then this button, simply go to the layout tab and align it in the center. Okay, fantastic!

However, I do want to capture someone's email so why don't we put an input just between these two elements. I'm going to go to the visual elements, scroll down, and look for input forms and here we have an input. I'm going to click once and then I'm going to click again in the position that I'd like it to be dropped into. Okay, hugging to the left.

Let's change the layout. Let's move it to the center and let's make it a bit wider, 320. Okay, quite happy with that. Let's change the content format to email because we're capturing an email and let say Email address.

Okay, I want to play with the spacing a little bit more. If I click into Group left, I'm now going to rename this to group bottom or maybe we should call a Group Form. Let's click into the layout tab. So we know that a parent container controls the layout and spacing of its children. Children are the elements within the container—this text, text, text, and so forth. So we can see that we have row gap of 12. If I increase this to say, 24, we now have 24 pixels of equal padding between all of these elements.

Okay, but good design is one that helps a user quickly scan and understand what you're trying to achieve very quickly. So what I'm going to do is this: I'm going to leave product hunt where it is, but I'm going to add a group around these two text elements because they are like-elements, this is the reading part of the form. I'm going to right click and I'm going to say group elements in a column container.

Okay, so now we need to adjust the spacing because the spacing has been removed. We need to choose 12 here. Okay, I'm going to do the same to these two elements because these two elements work together. This is the interactive part of this form. I'm going to highlight both of them, holding down shift, right click group elements in a column container.

Okay, and let's now add 12 pixels here. Now, the width is not sitting well with me so what I'm going to do is I'm going to increase the width of this button. So this is 320 fixed width and I could also make this a fixed width of 320 if I'd like. So now they match much better.

But in actual fact, in responsive design terms, we need to be a little bit careful using a fixed width of anything. Because 320 is the smallest phone size so someone is looking at this form on their phone, they have that small phone they just so happen to have it then there's the elements are fixed width and they're going to be knocking into the size of the screen so we actually want to be using a feature called called max width here, which means that it will fill all of the available space but we can add some padding and margin to make it a bit neater. And I'm going to apply this to the parent. So on the parent, I'm going to say I want a max width of say, 380, and then on these two elements, I'm just going to uncheck fixed width and remove min width. And you can see that it is expanded to fill the parent container which has a width of 380. And do the same with the button, and this is much better. This is a much better design method.

Okay, I also need to uncheck fit width to content because the button is fitting width to the content within which is the text. I wanted to uncheck that so it's fills all available space in the parent. Now, this parent I can see has no padding so we'll still run into the problem of it knocking up against the sides of someone's screen. So I'm simply going to scroll down and add 16 pixels of left, right padding, which means that whatever the phone is, whatever the device are looking at this on, and I'm specifically talking about a mobile device, it's always going to be 16 pixels nice and neat left, right padding. And the buttons are always going to fill that phone left to right. A nice big area for them to enter the email address, but before we jump to too many assumptions we do need to go into the responsive tab to check.

Okay, so let's start at a desktop, so if someone loads it on a desktop this is what they see. Good stuff! Obviously, we can add some more content beneath this. That's for a later lesson.

992 still looking good. 768 still looking good. Here's the test, 320. Let's see what problems we run into. Okay, image scaled down perfectly. This text is far too big so what we're going to do is add a conditional statement to reduce this text size at a particular breakpoint.

I'm going to click on the conditions tab, define a condition. Let me type in page so when the page width is, I'm going to choose a smaller than (<) operator, I'm going to type my breakpoint of 768. If that is true, so they're looking at our designs on a page smaller than 768, and most mobile phone sizes range from 320 to about 580, then I want the font size to be smaller. I'm going to choose 48 here. Across three lines, nice and neat. This is just a design choice. It's not an exact science. Okay, fantastic!

So just pull these handlebars out, we can see the text is getting bigger and then the text is getting conditionally smaller as we go down to mobile phone sizes. Now, of course we do need to change the text here, so I'm going to bring this up and we wanted to align with our actual landing page, so let me scroll back to the landing page. I'm going to copy this text, back to the waitlist page, paste in the text, and there we go.

Now, in terms of making this waitlist page actually capture emails, we will do that in a later lesson.