Navbar - Copy this React, Tailwind Component to your project

Navbar Design Prompt Objective: Design and implement a responsive, visually appealing navbar for the HeroSection component of our React application. The navbar should complement the existing hero section, providing intuitive navigation and seamless integration with the rest of the site. Design and Styling Layout and Positioning: The navbar should be fixed at the top of the viewport, ensuring it remains visible as users scroll through the page. It should span the full width of the screen and be aligned with the main content area (i.e., have consistent padding/margins with the HeroSection). Incorporate a semi transparent background to maintain visibility of the hero section beneath, enhancing readability while preserving the visual hierarchy. Color Scheme: Utilize a color palette that complements the HeroSection. Consider using a darker shade or semi transparent background to ensure contrast against the hero section's gradient. Ensure text and icon colors are legible against the background. For instance, white or light colored text could be used for a darker background. Typography: Use a clean, modern font that aligns with the font choices in the hero section. Ensure font sizes and weights are appropriately adjusted for readability and visual hierarchy. Branding and Logo: Include a prominent logo or brand name on the left side of the navbar. Ensure the logo is clear and adequately sized for both desktop and mobile views. Provide a consistent and recognizable visual identity for the brand. Navigation Links: Position navigation links centrally or to the right of the logo. Include essential links such as Home, Menu, About Us, and Contact. Utilize clear and concise link text, with hover and active states visually indicated (e.g., underline, color change) to improve user interaction feedback. Call to Action Button: Incorporate a call to action (CTA) button, such as "Order Now" or "Get Started," prominently in the navbar. Style it to stand out but remain visually harmonious with the rest of the navbar. Ensure the button is accessible and responsive, with clear visual feedback on hover and active states. Responsiveness: Ensure the navbar is fully responsive, adapting gracefully to various screen sizes. Implement a mobile friendly menu (e.g., a hamburger menu) for smaller screens. Test the navbar across different devices and orientations to ensure consistent behavior and appearance. Functionality Responsive Menu: For smaller screens, use a collapsible hamburger menu. Implement smooth transitions or animations for opening and closing the menu. Ensure the menu is accessible, with keyboard navigation and screen reader support. Link Navigation: Ensure all navigation links work correctly and lead to the appropriate sections or pages. Test for smooth scrolling or page transitions. Accessibility: Ensure that all interactive elements (links, buttons) are accessible via keyboard and screen readers. Follow accessibility best practices to provide an inclusive user experience. User Interaction Feedback: Provide clear visual feedback for user interactions, such as hover effects, active link highlights, and focus states for accessibility. Implementation Use Tailwind CSS or similar utility first CSS frameworks for styling to maintain consistency with the existing HeroSection styles. Ensure the navbar component is modular and reusable across different sections of the application.