Create a Responsive Promotional Popup Modal for Your Next.js Website

"Create a promotional popup modal for a Next.js web application. The modal should: Purpose: Display promotional content (e.g., an image, message, or button for a discount or offer). Trigger: Automatically appear when a user opens the website for the first time. It should not display again during future visits unless the user clears their browser's local storage. Behavior: The modal should cover the center of the screen with a semi-transparent dark background overlaying the rest of the page. It should be dismissible using a close button (X) or clicking outside the modal area. Responsive Design: Ensure the modal is responsive and looks good on all devices (desktop, tablet, and mobile). Implementation Details: Use local storage to store a flag (e.g., hasSeenPopup) indicating whether the user has already seen the popup. Check this flag when the page loads. If the flag exists, do not show the popup. If it does not, show the popup and set the flag. Use React and Tailwind CSS for styling and layout. Accessibility: Make sure the modal is keyboard-accessible (e.g., focus trapping, escape key to close). Animation: Include a fade-in animation when the modal appears. Provide the full implementation code for the popup modal component and the integration into a Next.js page."