ReactJS and SCSS - Office lite coming soon site

Hey, great work on this one. Layout in desktop looks really good, responds well and the mobile layout is really great as well.

Well I always follow bem methodologies in my scss, it makes specificity much easier to handle since I don't need to create nesting just to target my selector.

Some suggestions would be:

• I am confused on why there is an extra div between the header and main, the structure should be:

<header />
<main />
<footer />

So that every element are contained in landmark elements.

• The aria-label on the website-logo links should only been aria-label="homepage" this will suffice the information.
• The img for the website-logo link should had used alt="offilite". The image itself already has the text needed for its alt you don't need to describe how the logo looks, typically, alt for website logo is the name of the website itself.
• For the pricing section, each pricing label like basic pro should have used heading tag, because it gives overview on what is the content of that section, hence the pricing of the different plans.
• The 3 information below the pricing should have been using ul element, since those are "list" of information about the pricing plan.
• Using heading tags for each number in the countdown is not really great, since those numbers doesn't really add any content at all. If you were to use heading tag in that section, you should make a heading tag a sr-only text, describing what is the section is all about.
• The card that holds each countdown number, the width of it depends on the number, if you look at it, it always changes for every change of number. It would be better if you explicitly define the width of the cards so that it won't resize everytime.

SIGNUP PAGE

• You should remove the height: 100vh and the overflow declared on it, because if you visit the page, you can't scroll and when you inspect it, you won't be able to go down, which just renders the page useless.
• Also, why did you nest the header inside the main? This will render it useless as well:

<header />
<main />
<footer />

is the preferred structure.

• Again, do not use heading tags for each of the card number countdown.
• For the input it is bad that even if I didn't submit it, if I just click on the input or give focus, the error message already appears. Only appear the error if the user "submits" wrong info, not when they are just clicking or giving focus on it.
• You don't need to add those multiple aria-live for each input. Using only 1 aria-live will suffice the need, this one aria-live element will contain every error message, so that it will just state all the error in one go, no need to create multiple aria-live. Also when using aria-live element, the element at default is present on the page, with its text being empty like:

<p aria-live="polite" > </p>

Because aria-live will only activate, when the text content changes. On your case, you are just adding the aria-live element when there is an error, meaning the text hasn't change, then the aria-live won't fire.

• Instead, those error-message should always be present, remove the aria-live then add an id. That id will be referenced by the input element. For example, the input is wrong, what will happen is that, the errror-message will be shown, then the input element will have aria-describedBy attribute, and the value of that attribute will be the id of the error message. This way, you create a bridge that links what is the error that the user had made, also use aria-invalid is the input is wrong.
• I would create a separate text for the button that submits the form, or have aria-label="submit form" on it so that it will be more clear what this button does.

Just those mentioned above, still, you did a good job on this one.