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

Project: Responsive Footer for EduSuite – Smart School Management App Objective: Create a fully responsive footer for your EduSuite school management application. The footer should include sections for: 1. About Us: A brief description of EduSuite. 2. Contact Information: School address, phone number, and email. 3. Stay Connected: Social media links (Facebook, Twitter, Instagram, LinkedIn). 4. Responsive Layout: Ensure the footer is responsive, adapting to various screen sizes (desktop, tablet, mobile). Specific Features: 1. About Us Section: • Title: “EduSuite – Smart School Management” • Brief description: Explain what EduSuite offers to users (school management, administration, etc.). 2. Contact Information Section: • Address, phone number, and email with icons (using Material UI or other icons). • Make sure the information is laid out clearly. 3. Stay Connected Section: • Align the “Stay Connected” text in the center. • Display social media icons (Facebook, Twitter, Instagram, LinkedIn) horizontally. • Make icons responsive with hover effects and ensure they are easy to click on mobile devices. 4. Responsive Design: • For large screens (desktop view), all three sections (About Us, Contact Info, Stay Connected) should be in one row. • On medium screens (tablet view), the sections should be arranged in two columns, keeping the layout neat and readable. • On small screens (mobile view), stack the sections vertically to ensure the content is well-spaced and easily accessible. 5. Footer Styling: • Use a background gradient for the footer (light or dark mode based on preference). • Use appropriate padding and margins to space out elements. • The “Stay Connected” section should be at the far right on larger screens and centered on smaller screens. • Social media icons should have hover effects that change their color and slightly move upwards for interaction feedback. Technical Details: • Use Material-UI components such as Box, Container, Grid, Typography, IconButton, and Tooltip for layout and styling. • Use styled components for customized CSS styles (or CSS-in-JS). • Implement responsive behaviors using the Grid component’s breakpoints (xs, sm, md). • Use React icons (react-icons/fa, react-icons/md) for the social media and contact icons. ⸻ Sample Output Requirements: • A footer that looks good on all screen sizes (desktop, tablet, mobile). • Proper alignment and spacing for all sections. • Icons should be clickable, with hover effects and tooltips showing the social media names.