I'll help you fix these TypeScript errors. Let me first check the problematic files to identify the exact issues.

Let me search for where the calculateDiscount function is being called to find the type errors:

Let me check the Product type definition to understand what's causing the issues:

Now let me check the types index file:

I can see the issue. The sale_price is defined as number | null | undefined, but the calculateDiscount function expects number | null. Also, product.price can be of type string | number in some cases. Let me fix all four files by updating the calculateDiscount function and how it's called:

I've fixed all the TypeScript errors across the four page components. The calculateDiscount function now properly handles:

1. Type flexibility: Accepts both string and number for the price parameter (converts strings to numbers)
2. Null/undefined safety: Properly handles number | null | undefined for sale_price (filters out undefined values)
3. Safe calculations: Only calculates discounts when both valid numbers are available

The fixes ensure that all type mismatches are resolved while maintaining the function's logic and preventing runtime errors from undefined or string-typed values.

I can see the Flash Sale page uses dark cherry red color #8B1538. Now I'll update all the pages to use this color instead of the orange #FF8C00. Let me update each file:

Now I'll replace all instances of the orange color (#FF8C00) with dark cherry red (#8B1538) across all four pages:

Now let me update the top-picks and trending pages with the cherry red color:

I've successfully updated all color instances across all four pages (Daily Finds, New Arrivals, Top Picks, and Trending Now) from the orange color (#FF8C00) to dark cherry red (#8B1538) to match the Flash Sale page design. All interactive elements including badges, buttons, price text, wishlist icons, and filter chips now display in the consistent cherry red color throughout your entire product showcase section.