React | Manage Landing Page

Hello Steven, You have done a good work! 😁

Some little tips to improve your code:

• add header tag and wrap the navbar for improve the Accessibility
• use article tag to the container a specifies independent, self-contained content like a card, forum post, news... not for the "slider" section of site
• remove all unnecessary code, the less you write the better as well as being clearer: for example the article container of image with hero-image class
• you can use picture tag to change image by resolution -> read here
• add the image directly to the body background with css instead of using img tag with class .pill--lg
• for floating menu use less useState with this logic: you first hook into the menu button's dom node via a ref and then use a state to define whether the panel is open or closed ref guide - read here

const refNavBar = useRef(),
	   [isOpen, setIsOpen] = useState(false),
	   handleToggle = () => setIsOpen(!isOpen);

Then you restructure the html of the menu like this by adding the nav toggle button and the control over the nav element:

<header>
    <a>
         <svg logo />
    </a>

    <button
	  className="nav-toggle"
	  aria-controls={refNavBar}
	  aria-expanded={isOpen}
	  onClick={handleToggle}
    />
    
   <nav
	ref={refNavBar}
	data-visible={isOpen}
   >
	<ul>
            ........
        </ul>

       <a href="#nogo" className="button">Get Started</a>
    </nav>
</header>

finally through the css/scss manage the menu icon and whether to make it appear or not:

button.nav-toggle {
	background: url(  icon-hamburger  );
}
button.nav-toggle[aria-expanded="true"] {
	background: url(  icon-close    );
}
nav {
	opacity: 0
}
nav[data-visible="true"] {
	opacity: 1
}

@include u.breakpoint(lg) {
    button.nav-toggle { display: none; }
}

Keep learning how to code with your amazing solutions to challenges.

Hope this help 😉 and Happy coding!