add home page structure to Help Site

[marcochavezf]

cc @michelle-thompson

Details

This PR only includes the structure for the homepage and fixes the styles for the homepage and hub pages on large screens. The site's content is still WIP, but once the content is done, we're just going to replace the text in the respective HTML or Markdown files and can be done by someone of the resource management team.

Fixed Issues

$ https://github.com/Expensify/Expensify/issues/216731

Tests

0. (you need ruby and bundler installed to do this, more info here)

1. Run:

   cd docs
   bundle install
   bundle exec jekyll serve

2. Navigate to http://localhost:4000/main and verify the structure of the homepage is displayed as in the design document mockups or the screenshots attached at the end.

QA Steps

Go to https://help.expensify.com/main and verify the structure of the homepage is displayed (as in the screenshots)

Screenshots

Web

Big screen:

Mobile Web

[michelle-thompson]

The content on the home screen isn't showing up - is that to be expected?

I noticed that on hover, links are underlined. I think we should stick to similar styling as UseDot, so let's remove the underlining for hover.

[marcochavezf]

The content on the home screen isn't showing up - is that to be expected?

Oh, do you mean just an empty screen? Like this one:

Because currently the Homepage (/main) is empty in https://help.expensify.com/main, and won't show up until this PR is merged (we can only see the changes locally).

I noticed that on hover, links are underlined. I think we should stick to similar styling as UseDot, so let's remove the underlining for hover.

Sounds good! Removing the underling for hover...

[michelle-thompson]

Okay, I can't run locally but I'm curious about the hover over the card - what does that look like?

And one more thing I noticed on mobile - the bolded body text doesn't look like GT America

[marcochavezf]

The underling for hover was removed and looks like this:

Screen.Recording.2022-07-26.at.15.08.43.mov

---

Okay, I can't run locally but I'm curious about the hover over the card - what does that look like?

This is what the hover over a card looks like, it just changes the cursor to pointer:

Screen.Recording.2022-07-26.at.15.11.33.mov

I'm wondering if we add an animation or just leave it as it is, what do you think?

---

And one more thing I noticed on mobile - the bolded body text doesn't look like GT America

Yeah, seems we had a bad font configuration for the bolded text, this is how it looks using the default configuration (the difference is subtle but the bolded text looks a bit smaller):

[michelle-thompson]

For the cards, how about we change the border color upon hover? So for the blue, green, and grey borders, they all darken by 2.5% - I found this in UseDot, I'm assuming that's what it means, hahah.

[michelle-thompson]

As for the mobile font - that looks like medium weight, can we change to bold?

[marcochavezf]

Hi @michelle-thompson, I was playing with the border color upon hover, and I think a good value to notice the color change is 15%, because for 2.5% the difference is hardly noticeable imo, what do you think?

Screen.Recording.2022-07-27.at.12.35.49.mov

This is how it looks with 2.5%:

Screen.Recording.2022-07-27.at.12.36.18.mov

---

As for the mobile font - that looks like medium weight, can we change to bold?

We had another bad configuration hehe. For the bold text we were using font-weight: 600, but now I changed it to font-weight: bold and this is how it looks:

Mobile:

Desktop:

[michelle-thompson]

@marcochavezf 15% and bold weight look great 👍

[marcochavezf]

hi @tgolen! the visual changes are done, the code is ready to be reviewed 👍🏽

[marcochavezf]

I updated the code to use anchors instead of clickable divs, it's ready to be reviewed again!

[marcochavezf]

Updated the remaining clickable divs in the code, it's ready to be reviewed again 😀

changes already addressed

[marcochavezf]

Hi @tgolen! friendly bump since we have other issues that depend on these changes :) Thanks!

moved event listeners to DOMContentLoaded

[marcochavezf]

Updated with the DOMContentLoaded event, ready to be reviewed again @tgolen!

[tgolen]

Thanks!

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.