Challenge: Product Listing Page

Problem statement

You are tasked with creating a product listing page as part of a larger online store application. This page should include a header, display a list of products, indicate if a product is on sale, and feature a “Buy now” button that responds to user clicks. All components should be stateless, and all dynamic behavior or content should be driven by props.

Task 1: Building the UI structure and applying styles

1. Create a Header component that displays a title, e.g., “Our Products”.

2. Create a ProductItem component that accepts name, price, and category as props. It renders the product’s name and price. The overall layout should be styled (e.g., a simple card-style design). If category is sale, you will later add a Tag component to indicate it’s on sale. For now, just ensure ProductItem is ready to show that tag.

3. Integrate components in the App component. Render the Header at the top, and then render multiple ProductItem components, each with different props. Finally, style the container in App (e.g., centered layout, some margin).

Expected output

A page with a titled header “Our Products” and a list of products each displayed neatly.