Product Section Component - Copy this Angular, Css Component to your project

Create a product section for a pharma website that displays a variety of pharmaceutical products. The layout should be clean, user friendly, and visually appealing. Include the following elements: Product Grid: Display products in a grid format with a minimum of 3 columns, showing product images, names, brief descriptions, and prices. Product Card Details: Each product card should include an image, name, short description, price, and an "Add to Cart" button. Include a "Quick View" option for a more detailed product description. Filters and Sorting: Include filter options on the left side (or top) for categories like 'Medicines,' 'Supplements,' 'Health Devices,' etc. Add sorting options like 'Price Low to High,' 'Best Sellers,' and 'Newest Arrivals.' Responsive Design: Ensure the product section is responsive and adjusts to various screen sizes, providing an optimal user experience on mobile, tablet, and desktop devices. Search Bar: Include a search bar at the top of the section for quick product lookup. Hover Effects: Add hover effects on product cards for better interactivity, such as showing a "Quick View" button or changing the card's shadow. Pagination: If there are many products, add pagination or a "Load More" button at the bottom to keep the page manageable. Call to Action: Include clear CTAs like "Buy Now" or "Learn More" for each product to encourage user interaction. Accessibility: Make the section accessible with proper ARIA labels and ensure it is usable with keyboard navigation