Shop Page - Copy this React, Tailwind Component to your project

### Modern and Stylish UI Design for 24by7Mart Shop Page **Header Section:** **Navigation Bar:** A sleek, sticky navigation bar with a transparent background that changes to a solid color on scroll. **Search Bar:** A centrally aligned search bar with rounded corners, placeholder text like "Search products, brands, and categories..." and a search icon. **Cart and Profile Icons:** Minimalistic, floating icons for the shopping cart and user profile on the right side of the header. **Hero Section (Optional):** A bold banner with high quality images of featured products, exclusive deals, or discounts. Carousel with smooth transitions showcasing seasonal offers or bestselling categories. **Product Display:** **Grid Layout:** A responsive product grid with 3–4 items per row, depending on the screen size. **Product Cards:** Clean, shadowed card designs with product images, names, short descriptions, prices, and an "Add to Cart" button. Hover effect: Slight zoom in on product images with a "Quick View" button overlay. **Filters Sidebar:** Collapsible filter options for categories, brands, prices, and ratings. Multi select functionality with checkboxes and sliders for price range. **Featured Categories Section:** Horizontally scrollable category cards with vibrant icons and background colors. Each card should feature a category name, a related image, and a clickable "Shop Now" button. **Call to Action (CTA):** A stylish banner in the middle of the page encouraging users to download the app or subscribe to the newsletter. Bright colors, gradients, and bold text like "Shop Faster, Shop Smarter—Download the App!" **Special Offers Section:** Use a masonry layout to create a dynamic and eye catching arrangement. Include discount badges (e.g., "20% Off") on images. **Footer Section:** Split into four columns with clear headings: 1. **Customer Support** (FAQs, Contact Us, Returns). 2. **Categories** (Groceries, Personal Care, etc.). 3. **Company Info** (About Us, Careers, Policies). 4. **Social Media Links:** Stylish icons for platforms like Facebook, Instagram, and Twitter with hover effects. **Overall Styling:** **Typography:** Use modern, legible fonts like Poppins or Roboto. Vary font sizes for headings, subheadings, and body text. **Color Scheme:** A vibrant color palette with primary colors like orange, green, and white for a fresh look. **Hover Effects:** Smooth animations on buttons, images, and links. **Responsiveness:** Ensure the design adapts seamlessly across desktop, tablet, and mobile views. **Micro Interactions:** Use subtle animations for actions like adding items to the cart, hovering over products, or filtering categories. Let me know if you'd like to see the UI elements in code or visual form!