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

Design a Professional Navigation Bar with Icon Objective: Create a sleek and functional navigation bar for a website or application that incorporates an icon for visual appeal and ease of use. Requirements: Layout: The navigation bar should be horizontal and span the full width of the page. Include sections for Home, About, Services, Blog, and Contact. Icon: Choose a clean, modern icon that represents the website’s or application’s brand or purpose. Place the icon on the left side of the navigation bar, ensuring it is aligned with the text links. The icon should be of appropriate size and style to match the overall design of the navigation bar. Text Links: Each navigation item (Home, About, Services, Blog, Contact) should be clearly labeled and easy to read. Use a professional font that complements the icon and overall design. Ensure text links are easily clickable and spaced adequately. Styling: Use a consistent color scheme that aligns with the brand’s color palette. Implement a hover effect for the text links (e.g., color change, underline) to indicate interactivity. The navigation bar should have a subtle shadow or border to differentiate it from the rest of the page. Responsiveness: The navigation bar should be responsive and adjust smoothly on different screen sizes. Ensure the icon and text links remain properly aligned and readable on mobile devices. Accessibility: Ensure that all text links are accessible via keyboard navigation. Use ARIA labels or similar attributes to improve accessibility for screen readers. Deliverables: A mockup or prototype of the navigation bar design. Source files in a format suitable for web implementation (e.g., HTML/CSS, SVG for the icon). Additional Notes: Consider incorporating subtle animations or transitions to enhance the user experience. Provide a brief explanation of the design choices and how they align with the overall branding.