Styled App Bar - 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 { styled } from "@mui/system"; // import { FiMenu, FiMail, FiPhone, FiMapPin, FiEye, FiEyeOff } from "react icons/fi"; const StyledAppBar = styled(AppBar)(({ theme }) => ({ background: "#ffffff", boxShadow: "0 2px 4px rgba(0,0,0,0.1)" })); const HeroSection = styled(Box)(({ theme }) => ({ backgroundImage: 'url(https://images.unsplash.com/photo 1576091160550 2173dba999ef)', 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 ServiceCard = styled(Card)(({ theme }) => ({ height: "100%", transition: "transform 0.3s", "&:hover": { transform: "translateY( 5px)" } })); const MedleaprHomepage = () => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down("sm")); const [anchorEl, setAnchorEl] = useState(null); const [openLogin, setOpenLogin] = useState(false); const [showPassword, setShowPassword] = useState(false); const [loading, setLoading] = useState(false); const handleLogin = async (e) => { e.preventDefault(); setLoading(true); // Simulated API call setTimeout(() => { setLoading(false); setOpenLogin(false); }, 2000); }; 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 }}> Medleapr </Typography> {isMobile ? ( <IconButton onClick={(e) => setAnchorEl(e.currentTarget)}> {/* <FiMenu /> */} </IconButton> ) : ( <Box sx={{ display: "flex", gap: 2 }}> <Button color="primary">Home</Button> <Button color="primary">About</Button> <Button color="primary">Contact</Button> <Button variant="contained" color="primary" onClick={() => setOpenLogin(true)}> Login </Button> </Box> )} </Toolbar> </StyledAppBar> <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)} > <MenuItem onClick={() => setAnchorEl(null)}>Home</MenuItem> <MenuItem onClick={() => setAnchorEl(null)}>About</MenuItem> <MenuItem onClick={() => setAnchorEl(null)}>Contact</MenuItem> <MenuItem onClick={() => { setAnchorEl(null); setOpenLogin(true); }}>Login</MenuItem> </Menu> <HeroSection> <Container sx={{ position: "relative", zIndex: 1 }}> <Grid container spacing={4}> <Grid item xs={12} sm={6}> <Typography variant="h2" gutterBottom> Your Health, Our Priority </Typography> <Typography variant="h5" gutterBottom> Advanced healthcare solutions for a better tomorrow </Typography> <Button variant="contained" color="primary" size="large" sx={{ mt: 4 }} > Book Appointment </Button> </Grid> <Grid item xs={12} sm={6}> <Card> <Typography variant="h6" sx={{ fontWeight: 'bold', textAlign:'center' }}> User Login </Typography> <CardContent> <form onSubmit={handleLogin}> <TextField fullWidth label="Email" margin="normal" required /> <TextField fullWidth label="Password" type={showPassword ? "text" : "password"} margin="normal" required InputProps={{ endAdornment: ( <InputAdornment position="end"> <IconButton onClick={() => setShowPassword(!showPassword)} edge="end" > {/* {showPassword ? <FiEyeOff /> : <FiEye />} */} </IconButton> </InputAdornment> ) }} /> <FormControlLabel control={<Checkbox />} label="Remember me" sx={{ my: 2 }} /> <Button fullWidth variant="contained" color="primary" type="submit" disabled={loading} > {loading ? <CircularProgress size={24} /> : "Login"} </Button> </form> </CardContent> </Card> </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;