Styled Paper - Copy this React, Mui Component to your project

Design a profile page using React with Tailwind CSS for styling and React Icons for visual enhancement. This profile page should display the user’s personal information after they log in, including their name, email, and profile picture. Layout: A clean and modern user interface with a centered profile section. A top navigation bar with links for profile settings, logout, etc. Display sections like personal details, account information, and user activity. Components: ProfileHeader: Displays the user's profile picture, name, and email. EditProfileButton: A button allowing the user to edit their profile. UserInfoSection: Divided into subsections like personal info, account settings, and recent activity. SocialLinks: Include social media icons (GitHub, LinkedIn, Twitter) with links to user's social profiles using React Icons. Styling: Use Tailwind CSS to ensure responsiveness. Make use of padding, flexbox, and grid for layout management. Apply consistent color themes and hover effects for buttons. Functionality: Ensure the profile page fetches data from the backend API (e.g., GET /user/profile endpoint) after login and displays it. Option for the user to log out (e.g., via a logout button that clears session tokens). Add a loading state while fetching data and error handling for failed API requests.