In this challenge, you will combine some of the components you have built in previous challenges into a storefront page for a fictional e-commerce platform.

As this challenge is a combination of other sections or components, you should build them first to ensure all states and requirements are covered.

Implementation requirements

The requirements that each component has to fulfill remains the same – you should refer to them in their individual briefs and ensure that their functionality remains intact after integration:

• Navbar Component (E-Commerce)
• Hero Section (Simple)
• Product Grid Section
• Collections Grid Section
• Features Section (Grid)
• Footer (Multi-column)

On the page level

• Page layout rules: Apply standard page margin and padding rules as per the design specifications. Take note of the spacing between sections as well.
• Static copy and asset alignment: While the component used remains the same as the list above, some of the assets, icons or copy might have changed. Ensure they are aligned, especially for the sections with static content and assets.
• Placeholders: You may leave the redirection links empty for any unspecified buttons or links.
• Cross-browser and device compatibility: Check that your solution works for major browsers including Chrome, Firefox, and Safari, and for all stated device breakpoints.

Dynamic content integration

While some of these sections may have been implemented previously, ensure the dynamic content update is working correctly after the integration:

• Navbar dynamic shopping cart icon: Display the current number of items in the cart and update in real-time as users add or remove items from their cart.
• Product Grid ("Latest Arrivals" section): Product listings shown should belong to the "Latest Arrivals" collection. The definition of "Latest Arrivals" can be found in the "Appendix".
• Collections Grid ("Our Collections" section): Show 3 latest collections available on the store.