Header - Copy this React, Tailwind Component to your project

Design a modern e-commerce website header with the following elements: Logo and Branding: A logo that includes a shopping cart icon followed by the text "ShopGrids" in two colors: blue for "Shop" and black for "Grids." Navigation Bar: A hamburger menu icon labeled "All Categories" on the left. A horizontal navigation menu with the following links: "Home" "Pages" (with dropdown options) "Shop" (with dropdown options) "Blog" (with dropdown options) "Contact Us" Search Bar: A search input field with a dropdown for category selection (default: "All"). A blue search button with a magnifying glass icon. Hotline Section: A phone icon followed by the text "Hotline:" and a sample phone number "(+100) 123 456 7890." Icons: A heart icon for wishlist functionality with a notification bubble displaying "0." A shopping cart icon with a notification bubble displaying "2." Social Media Links: "Follow Us:" text followed by circular icons for Facebook, Twitter, Instagram, and Skype. Styling: Minimalistic and clean layout with ample white space. Consistent icon styling and alignment. Blue as the primary accent color for interactive elements like the search button and the logo. Ensure that the design is fully responsive and accessible for desktop and mobile devices.