E Commerce App - Copy this React, Tailwind Component to your project

Design a mobile e commerce app screen with the following elements: Top Header: At the very top, a status bar with time and network icons. Below it, a simple header with a 'Discover' title in bold, aligned to the left. On the right side, a search icon and a shopping cart icon. Search Bar: Below the header, a horizontal search bar with a placeholder text 'Search', and a search icon aligned to the right within the search bar. Banner Section: A promotional banner in the center with a green background, displaying a 'Clearance Sales' label on the left (up to 50% off). Next to the label, display an image of a modern smartphone (e.g., iPhone model). Category Tabs: Below the banner, include a horizontal scrolling tab with rounded buttons for various categories. Categories should include: All, Smartphones, Headphones, Laptops, with an additional 'See All' link on the right. Product Listings: Create a grid layout for product listings with product images, names, ratings (display stars), and prices. Example products: AirPods: $132.00, 4.9 star rating. MacBook Air 13: $1100.00, 5.0 star rating. Bottom Navigation Bar: At the bottom, add a fixed navigation bar with icons for Home, Search, Favorites, and Profile. The 'Home' icon should be highlighted as active. Design Aesthetics: Use a clean, modern design with smooth, rounded corners, light background colors, and subtle shadows under the product cards. The overall layout should be simple, intuitive, and mobile friendly."