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

import React, { useState } from "react"; import { Box, TextField, Button, Typography, Container, Grid, Paper, } from "@mui/material"; import { styled } from "@mui/material/styles"; const StyledPaper = styled(Paper)(({ theme }) => ({ padding: theme.spacing(4), backgroundColor: "#FFFFFF", // Keep the white background for the form borderRadius: theme.shape.borderRadius, boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", width: '100%', maxWidth: '800px', // Set a max width for the form margin: 'auto', // Center the form horizontally })); const StyledTextField = styled(TextField)(({ theme }) => ({ "& .MuiOutlinedInput-root": { borderRadius: theme.shape.borderRadius, transition: theme.transitions.create(["border-color", "box-shadow"]), "&:hover": { borderColor: theme.palette.primary.main, }, "&.Mui-focused": { boxShadow: `0 0 0 2px ${theme.palette.primary.main}`, }, }, })); const StyledButton = styled(Button)(({ theme }) => ({ borderRadius: theme.shape.borderRadius, transition: theme.transitions.create(["background-color", "box-shadow"]), "&:hover": { boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)", }, })); const ContactInfo = styled(Box)(({ theme }) => ({ display: "flex", alignItems: "center", marginBottom: theme.spacing(2), "& img": { marginRight: theme.spacing(1), width: "24px", height: "24px", }, })); const ContactForm = () => { const [formData, setFormData] = useState({ username: "", email: "", message: "", }); const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleSubmit = (e) => { e.preventDefault(); console.log("Form submitted:", formData); }; return ( // Set the background color to a light purple and use flexbox to center the content <Box sx={{ backgroundColor: "#F6F3FE", // Light purple background minHeight: "100vh", // Full height of the viewport display: "flex", // Flexbox to center content alignItems: "center", // Vertically center justifyContent: "center", // Horizontally center padding: "20px", // Padding for smaller viewports }} > <StyledPaper elevation={3}> <Paper elevation={3} sx={{ p: 3, backgroundColor: "#ffffff" }}> <Grid container spacing={4} alignItems="stretch"> <Grid item xs={12} md={6} sx={{ display: "flex", flexDirection: "column" }} > <Box component="img" src="https://cdn-icons-png.flaticon.com/512/14950/14950728.png" alt="Contact Us" sx={{ width: "70%", height: "auto", borderRadius: 2, marginBottom: 4, alignSelf: "center", }} /> <Box sx={{ flexGrow: 1, display: "flex", flexDirection: "column", justifyContent: "center", }} > <ContactInfo> <img src="https://cdn-icons-png.flaticon.com/512/732/732200.png" alt="Email" /> <Typography>info@housingx.com</Typography> </ContactInfo> <ContactInfo> <img src="https://cdn-icons-png.flaticon.com/512/5585/5585856.png" alt="Phone" /> <Typography>+4321999666</Typography> </ContactInfo> <ContactInfo> <img src="https://cdn-icons-png.flaticon.com/512/1865/1865269.png" alt="Address" /> <Typography> 999 Swanston Street, Melbourne, VIC 3000 </Typography> </ContactInfo> </Box> </Grid> <Grid item xs={12} md={6}> <Typography variant="h4" gutterBottom sx={{ color: "#684DEC" }} > Contact Us </Typography> <Box component="form" onSubmit={handleSubmit} noValidate sx={{ height: "100%", display: "flex", flexDirection: "column", }} > <StyledTextField margin="normal" required fullWidth id="username" label="Username" name="username" autoComplete="name" value={formData.username} onChange={handleChange} aria-label="Username" /> <StyledTextField margin="normal" required fullWidth id="email" label="Email Address" name="email" autoComplete="email" value={formData.email} onChange={handleChange} aria-label="Email Address" /> <StyledTextField margin="normal" required fullWidth name="message" label="Message" id="message" multiline rows={4} value={formData.message} onChange={handleChange} aria-label="Message" /> <StyledButton type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2, backgroundColor: "#684DEC" }} > Send Message </StyledButton> </Box> </Grid> </Grid> </Paper> </StyledPaper> </Box> ); }; export default ContactForm; " change the contactform to be exactly like this