Officelite coming soon site with React, styled-component, and Joi.

It was the first time for me to build multi-background web site. The approach I took was to build the whole contents except background, then encapsulate them in the <ContentsWrapper> element, then put it into entire content container <Container> which has background element <Background > with "absolute" position like below. I'm appreciate if there are any good approaches to build multi-color background.

<Container style={{ height: "total height of <ContentsWrapper>" }}> <Background /> // contains top BG and bottom BG

// put the content onto Container which has background

<ContentsWrapper style={{position: "absolute", top: "0", right: "0"}} >...contains whole content </ContentsWrapper> </Container>

Finally, for signup page, I decided to give boolean attribute "signup" to elements which have similar style between homepage and signup page in order to make my code DRY, but it resulted in repetitive use of "signup={signup}" for elements, also I end up putting so much "${props => props.signup ? signupStyle : homepageStyle}" for styled components.

I decided to take this approach because I didn't want to make similar components and I felt that Context API is a bit exaggerating because the "signup" prop drilling was just few levels down.

If there are any questions or unclear points, feel free to ask.

Thank you for reading :)