Develop "Products" page with category and subcategory mapping

[RaulBecerraB]

Description:

Problem description:

The "Products" page needs to be developed to display categories, subcategories, and materials dynamically. Clicking on a category should trigger a re-render within the same page to display its respective subcategories, and clicking on a subcategory should further display the materials. The design should closely follow the provided reference image.

Tasks:

1. Implement category mapping:

   • Fetch and display product categories dynamically.
   • Clicking a category should re-render the component to show subcategories.

2. Implement subcategory mapping:

   • When selecting a subcategory, re-render the component to show corresponding materials.

3. Ensure smooth component re-rendering:

   • Implement state management to handle dynamic content updates efficiently within the same page.

4. UI development:

   • Style the page to closely match the provided reference image.
   • Ensure responsiveness and visual consistency across devices.

5. Test functionality:

   • Verify that categories, subcategories, and materials load and re-render correctly.

Acceptance criteria:

• Categories are displayed and clicking on one loads subcategories within the same page.
• Clicking a subcategory loads the materials without a page refresh.
• The UI matches the provided design closely.
• The page is fully responsive and works smoothly.
• No unnecessary re-renders or performance issues occur.