Hero Wrapper - Copy this React, Mui Component to your project

import React, { useState } from "react"; import { AppBar, Box, Button, Card, CardContent, Container, Dialog, DialogContent, FormControlLabel, Grid, IconButton, InputAdornment, Menu, MenuItem, TextField, Toolbar, Typography, useMediaQuery, useTheme, Checkbox, Paper, CircularProgress } from "@mui/material"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import { styled } from "@mui/system"; // import { FiMenu, FiMail, FiPhone, FiMapPin, FiEye, FiEyeOff } from "react-icons/fi"; import hompagebg from "@assets/images/hompagebg.jpg"; import { Link } from "react-router-dom"; const StyledAppBar = styled(AppBar)(({ theme }) => ({ background: "#ffffff", boxShadow: "0 2px 4px rgba(0,0,0,0.1)" })); const HeroSection = styled(Box)(({ theme }) => ({ backgroundImage: `url(${hompagebg})`, backgroundSize: "cover", backgroundPosition: "center", height: "80vh", display: "flex", alignItems: "center", color: "#ffffff", position: "relative", "&::before": { content: '""', position: "absolute", top: 0, left: 0, right: 0, bottom: 0, backgroundColor: "rgba(0,0,0,0.5)" } })); const StyledButton = styled(Button)(({ theme }) => ({ borderRadius: theme.spacing(3), padding: `${theme.spacing(1.5)} ${theme.spacing(4)}`, textTransform: "none", fontSize: "1.1rem", fontWeight: 600, transition: "all 0.3s ease", "&:hover": { transform: "translateY(-2px)", boxShadow: "0 6px 20px rgba(0, 0, 0, 0.15)" } })); const ServiceCard = styled(Card)(({ theme }) => ({ height: "100%", transition: "transform 0.3s", "&:hover": { transform: "translateY(-5px)" } })); const LoginCard = styled(Card)(({ theme }) => ({ maxWidth: 700, width: "100%", padding: theme.spacing(3), boxShadow: "0 8px 24px rgba(0, 0, 0, 0.12)", borderRadius: theme.spacing(2), backgroundColor: "rgba(255, 255, 255, 0.95)", backdropFilter: "blur(10px)" })); const ContentWrapper = styled(Box)(({ theme }) => ({ color: "#fff", [theme.breakpoints.down("md")]: { textAlign: "center" } })); const MedleaprHomepage = () => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down("sm")); const [anchorEl, setAnchorEl] = useState(null); const [formData, setFormData] = useState({ email: "", password: "" }); const handleSubmit = (e) => { e.preventDefault(); console.log("Form submitted:", formData); }; const handleMenuOpen = (event) => { setAnchorEl(event.currentTarget); }; const handleMenuClose = () => { setAnchorEl(null); }; const services = [ { title: "Primary Care", description: "Comprehensive healthcare for all ages", image: "https://images.unsplash.com/photo-1579684385127-1ef15d508118" }, { title: "Specialized Treatment", description: "Expert care for specific conditions", image: "https://images.unsplash.com/photo-1588776814546-1ffcf47267a5" }, { title: "Emergency Care", description: "24/7 emergency medical services", image: "https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d" } ]; return ( <Box> <StyledAppBar position="sticky"> <Toolbar> <Typography variant="h6" color="primary" sx={{ flexGrow: 1 }}> 𝓜𝓮𝓭𝓛𝓔𝓪𝓹𝓡 </Typography> {isMobile ? ( <IconButton onClick={(e) => setAnchorEl(e.currentTarget)}> {/* <FiMenu /> */} </IconButton> ) : ( <Box sx={{ display: "flex", gap: 2 }}> <Button color="primary">Home</Button> <Button color="primary" onClick={handleMenuOpen}s endIcon={<ExpandMoreIcon />} > Registration </Button> <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose} anchorOrigin={{ vertical: "bottom", horizontal: "center", // Align the menu center with the button }} transformOrigin={{ vertical: "top", horizontal: "center", // Keep the menu aligned in the center }} MenuListProps={{ onMouseLeave: handleMenuClose }} > <MenuItem onClick={handleMenuClose} component={Link} to="/DoctorRegistration"> Doctor Registration </MenuItem> <MenuItem onClick={handleMenuClose} component={Link} to="/RenewDoctorRegistration"> Re-New Doctor Registration </MenuItem> <MenuItem onClick={handleMenuClose} component={Link} to="/InstituteRegistration"> Institute Registration </MenuItem> <MenuItem onClick={handleMenuClose} component={Link} to="/InstituteCheckLIst"> Institute Check List </MenuItem> <MenuItem onClick={handleMenuClose} component={Link} to="/DistrictRegistration"> District Registration </MenuItem> </Menu> <Button color="primary">About</Button> <Button color="primary">Contact</Button> </Box> )} </Toolbar> </StyledAppBar> <HeroSection> <Container maxWidth="xxl"> <Grid container spacing={6} alignItems="center"> <Grid item xs={12} md={6}> <ContentWrapper> <Typography variant="h2" component="h1" sx={{ mb: 3, fontWeight: 700 }} > 𝓜𝓮𝓭𝓛𝓔𝓪𝓹𝓡 𝓗𝓪𝓻𝔂𝓪𝓷𝓪 </Typography> <Typography variant="h5" sx={{ mb: 4, opacity: 0.9, lineHeight: 1.6 }} > Experience world-class healthcare services with our team of expert doctors. Book your appointment today and take the first step towards better health. </Typography> </ContentWrapper> </Grid> <Grid item xs={12} md={6} sx={{ display: "flex", justifyContent: "center", alignItems: "center" }} > <LoginCard> <CardContent> <Typography variant="h4" component="h2" align="center" sx={{ mb: 4, color: "text.primary", fontWeight: 600 }} > User Login </Typography> <form onSubmit={handleSubmit}> <Box sx={{ mb: 3 }}> <TextField fullWidth label="User Id" variant="outlined" InputProps={{ // startAdornment: ( // // <FaUserMd // // style={{ marginRight: "8px", color: "#666" }} // // /> // ) }} value={formData.email} onChange={(e) => setFormData({ ...formData, email: e.target.value }) } /> </Box> <Box sx={{ mb: 4 }}> <TextField fullWidth type="password" label="Password" variant="outlined" InputProps={{ // startAdornment: ( // // <FaLock // // style={{ marginRight: "8px", color: "#666" }} // // /> // ) }} value={formData.password} onChange={(e) => setFormData({ ...formData, password: e.target.value }) } /> </Box> <StyledButton type="submit" variant="contained" color="primary" fullWidth size="large" > Sign In </StyledButton> </form> </CardContent> </LoginCard> </Grid> </Grid> </Container> </HeroSection> <Container sx={{ py: 8 }}> <Typography variant="h3" textAlign="center" gutterBottom> Our Services </Typography> <Grid container spacing={4} sx={{ mt: 4 }}> {services.map((service, index) => ( <Grid item xs={12} md={4} key={index}> <ServiceCard> <Box component="img" src={service.image} alt={service.title} sx={{ width: "100%", height: 200, objectFit: "cover" }} /> <CardContent> <Typography variant="h5" gutterBottom> {service.title} </Typography> <Typography color="text.secondary"> {service.description} </Typography> </CardContent> </ServiceCard> </Grid> ))} </Grid> </Container> <Box sx={{ bgcolor: "#f5f5f5", py: 8 }}> <Container> <Typography variant="h3" textAlign="center" gutterBottom> Contact Us </Typography> <Grid container spacing={4}> <Grid item xs={12} md={6}> <Paper sx={{ p: 4 }}> <form> <Grid container spacing={3}> <Grid item xs={12}> <TextField fullWidth label="Name" required /> </Grid> <Grid item xs={12}> <TextField fullWidth label="Email" type="email" required /> </Grid> <Grid item xs={12}> <TextField fullWidth label="Message" multiline rows={4} required /> </Grid> <Grid item xs={12}> <Button fullWidth variant="contained" color="primary" size="large" > Send Message </Button> </Grid> </Grid> </form> </Paper> </Grid> <Grid item xs={12} md={6}> <Paper sx={{ p: 4, height: "100%" }}> <Typography variant="h6" gutterBottom> Get in Touch </Typography> <Box sx={{ display: "flex", alignItems: "center", mb: 2 }}> {/* <FiMapPin /> */} <Typography sx={{ ml: 1 }}> 123 Medical Center Drive, Healthcare City </Typography> </Box> <Box sx={{ display: "flex", alignItems: "center", mb: 2 }}> {/* <FiPhone /> */} <Typography sx={{ ml: 1 }}>+1 (555) 123-4567</Typography> </Box> <Box sx={{ display: "flex", alignItems: "center" }}> {/* <FiMail /> */} <Typography sx={{ ml: 1 }}>contact@medleapr.com</Typography> </Box> </Paper> </Grid> </Grid> </Container> </Box> </Box> ); }; export default MedleaprHomepage; do same for service section