Implement a Flexbox Product Grid from a Mock API to Match a Provided Mockup (Pixel-perfect)

Task: Render a Product Card Grid from a Mock API (Pixel-perfect to a Mockup) You are given a callable mock API (the interview environment provides the endpoint or helper) that returns a list of products such as vegetables and fruits. Implement the UI in the provided front-end project / online editor (e.g., HackerRank) so that the final page matches the provided mockup screenshot as closely as possible. Requirements Data fetching Call the mock API on page load. Parse the response (pay attention to nesting and field types) and render the products. Layout & styling (key) Use Flexbox to implement the product display area (e.g., multi-column grid). The interviewer provides most CSS, but you must complete the DOM structure and any necessary small style tweaks. The UI should be as pixel-perfect as possible (spacing, alignment, font sizes, card structure, image placement, etc.). Product card content Each product should render at least: Product image (vegetable/fruit) Product name/title Price Price formatting (key) The displayed price must match the mockup exactly. This may involve currency symbols, fixed decimals, thousand separators, units, etc. (follow the mockup). Runnability The code must run in the online editor without rendering undefined. Add basic defensive handling for missing fields or unexpected types (optional chaining / defaults). Typical constraints (reasonable assumptions) Number of products: ~5 to 50. Image is a URL string. Price may be a number or a string (you need to confirm and format correctly). Acceptance criteria Layout matches the mockup. Price formatting matches the mockup. Data renders correctly with no undefined or blank critical fields.