Now, let's think about how to implement the UI of this home page. It is better to start with a layout diagram, the same way we did when creating the register page. Figure 11.6 shows the layout of the home page:

As you can see, we use an ellipsis between .board elements to represent that there could be zero or multiple .board elements, similar to the vertical ellipsis between .boards-section elements.

For the .page-header element, we will need to put it in a Vue component, called PageHeader.vue, so that we can share it with other pages. For the .boards-section element, we can create a Vue component, for example, BoardsSection.vue, and use a list to repeat it. However, this is not what we are going to do, because this element is not used anywhere else besides the home page. There is no real benefit of keeping it in a separate component.

Figure 11.7 shows the how the boards menu and the profile menu look:

For these pop up windows and the menus, we won't create layout diagrams, because the layout of these elements is relatively easy to figure out.