Splitting mockups into components
Under the 05-pages folder inside storybook/stories, you can find a set of pages that we need to style on our website. All those pages already exist in the demo website; our job as frontend developers is to identify how they have been implemented and how to provide our custom HTML and CSS.
The home page
The home page, like any other page of the website, has a header and a footer.
On the header, we’ll find the website logo, the main menu, and the user menu.
On the footer, there is the name of the site, two sets of links that come from the Follow us and the Legal menus, a copyright notice, and some social media icons.
The main content of the page is composed of three components:
- A slider
- A set of three cards
- A list of media items, displayed in two columns
Figure 4.7 – The home page
Here are the components used on the home page :
Header(withLogo,Menu,MenuItem, and...
