Default Component - Copy this React, Tailwind Component to your project

Import React, { useState, useEffect } from "react"; import { Box, Typography, Button, Container, Grid, Chip, useTheme } from "@mui/material"; import { styled as muiStyled } from "@mui/material/styles"; import { FoodBank, ArrowDownward, AccessTime, Favorite, LocalDining } from "@mui/icons material"; import { motion } from "framer motion"; import bg from "../assets/backgroundimg.webp"; import bg1 from "../assets/bg1.jpg"; import bg2 from '../assets/hotel breakfast room service.jpg'; const HeroSection = muiStyled(Box)(({ theme }) => ({ minHeight: "100vh", position: "relative", display: "flex", alignItems: "center", overflow: "hidden", background: "linear gradient(45deg,rgba(26, 26, 26, 0.2) 0%,rgba(45, 45, 45, 0.16) 50%)" })); const SlideContainer = muiStyled(Box)(({ theme }) => ({ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", zIndex: 1, })); const Overlay = muiStyled(Box)(({ theme }) => ({ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", background: "linear gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%)", zIndex: 1, })); const ContentContainer = muiStyled(Container)(({ theme }) => ({ position: "relative", zIndex: 2, textAlign: "right", padding: "3rem", borderRadius: "25px", backdropFilter: "blur(15px)", backgroundColor: "rgba(255, 255, 255, 0.15)", border: "1px solid rgba(255, 255, 255, 0.2)", boxShadow: "0 8px 32px rgba(0, 0, 0, 0.1)", [theme.breakpoints.down("md")]: { textAlign: "center", }, })); const StyledButton = muiStyled(Button)(({ theme }) => ({ background: "linear gradient(45deg, #00b09b 30%, #96c93d 90%)", color: "#ffffff", padding: "15px 40px", borderRadius: "30px", fontSize: "1.2rem", marginTop: "2rem", transition: "all 0.3s ease", textTransform: "none", boxShadow: "0 3px 15px rgba(0, 176, 155, 0.3)", "&:hover": { background: "linear gradient(45deg, #96c93d 30%, #00b09b 90%)", transform: "translateY( 2px) scale(1.05)", boxShadow: "0 5px 25px rgba(0, 176, 155, 0.5)", }, })); const ScrollIcon = muiStyled(motion.div)(({ theme }) => ({ position: "absolute", bottom: "2rem", left: "50%", transform: "translateX( 50%)", color: "#ffffff", cursor: "pointer", })); const FeatureChip = muiStyled(Chip)(({ theme }) => ({ margin: "0.5rem", backgroundColor: "rgba(255, 255, 255, 0.2)", color: "#ffffff", borderRadius: "15px", fontSize: "0.9rem", backdropFilter: "blur(5px)", "& .MuiChip icon": { color: "#ffffff", }, })); // Use the imported images const images = [bg, bg1, bg2]; const Home = () => { const [currentImageIndex, setCurrentImageIndex] = useState(0); const theme = useTheme(); useEffect(() => { const interval = setInterval(() => { setCurrentImageIndex((prevIndex) => prevIndex === images.length 1 ? 0 : prevIndex + 1 ); }, 5000); return () => clearInterval(interval); }, []); const handleScrollToMenu = () => { const menuSection = document.getElementById("menu"); if (menuSection) { menuSection.scrollIntoView({ behavior: "smooth" }); } }; return ( <HeroSection> <SlideContainer component={motion.div} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }} sx={{ backgroundImage: `url(${images[currentImageIndex]})`, backgroundSize: "cover", backgroundPosition: "center", transition: "background image 1s ease in out", }} role="img" aria label="Hospital canteen background" /> <Overlay /> <ContentContainer maxWidth="lg"> <Typography variant="h1" component={motion.h1} initial={{ y: 50, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ duration: 0.8 }} sx={{ color: "#ffffff", fontSize: { xs: "2.5rem", md: "4rem" }, fontWeight: 700, mb: 2, textShadow: "2px 2px 4px rgba(0,0,0,0.3)", }} > Fortis Hospital Canteen </Typography> <Typography variant="h2" component={motion.h2} initial={{ y: 50, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ duration: 0.8, delay: 0.2 }} sx={{ color: "#ffffff", fontSize: { xs: "1.5rem", md: "2rem" }, fontWeight: 500, mb: 4, textShadow: "2px 2px 4px rgba(0,0,0,0.3)", }} > Nourishing Care, Delivered Fresh </Typography> <Box sx={{ mb: 4 }}> <Grid container justifyContent="center" spacing={2}> <Grid item> <FeatureChip icon={<AccessTime />} label="24/7 Service" /> </Grid> <Grid item> <FeatureChip icon={<Favorite />} label="Healthy Options" /> </Grid> <Grid item> <FeatureChip icon={<LocalDining />} label="Fresh Ingredients" /> </Grid> </Grid> </Box> <StyledButton component={motion.button} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} startIcon={<FoodBank />} onClick={handleScrollToMenu} aria label="Order now" > Order Now </StyledButton> <Typography variant="body1" component={motion.p} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.5 }} sx={{ color: "rgba(255, 255, 255, 0.8)", mt: 3, fontSize: "1.1rem", fontStyle: "italic", }} > Experience the perfect blend of taste and nutrition </Typography> </ContentContainer> <ScrollIcon animate={{ y: [0, 10, 0] }} transition={{ repeat: Infinity, duration: 1.5 }} onClick={handleScrollToMenu} > <ArrowDownward size={24} /> </ScrollIcon> </HeroSection> ); }; export default Home; make this more stylish , unique