Splash Scene Copy this MUI StyledCardto Your Project

Import * as React from 'react'; import Button from '@mui/material/Button'; import Dialog from '@mui/material/Dialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; import useMediaQuery from '@mui/material/useMediaQuery'; import { useTheme } from '@mui/material/styles'; import ListManager from '../Subjects/Subjects'; const DIALOG_TYPES = { TEXT: 'text', IMAGE: 'image', FLOWCHART: 'flowchart', FULLSCREEN: 'fullscreen', CODE: 'code', VIDEO: 'video', }; export default function Splash() { const [open, setOpen] = React.useState(false); const [dialogType, setDialogType] = React.useState(null); const theme = useTheme(); const fullScreen = useMediaQuery(theme.breakpoints.down('md')) || dialogType === DIALOG_TYPES.FULLSCREEN; const handleOpen = (type) => { setDialogType(type); setOpen(true); }; const handleClose = () => { setOpen(false); setDialogType(null); }; const renderDialogContent = () => { switch (dialogType) { case DIALOG_TYPES.TEXT: return ( <DialogContentText> This is a simple text dialog. It just contains text content. </DialogContentText> ); case DIALOG_TYPES.IMAGE: return ( <img src="https://via.placeholder.com/400x200" alt="Placeholder" style={{ width: '100%' }} /> ); case DIALOG_TYPES.FLOWCHART: return ( <ListManager /> ); case DIALOG_TYPES.FULLSCREEN: return ( <div style={{ height: '80vh', overflow: 'auto' }}> <h2>Full Screen Content</h2> <p>This dialog is in full screen mode for immersive experience.</p> <p>Insert complex UI or forms here.</p> </div> ); case DIALOG_TYPES.CODE: return ( <pre> <code>{`function helloWorld() {\n console.log("Hello, World!");\n}`}</code> </pre> ); case DIALOG_TYPES.VIDEO: return ( <iframe width="100%" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameBorder="0" allowFullScreen /> ); default: return null; } }; return ( <React.Fragment> <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}> <Button variant="contained" onClick={() => handleOpen(DIALOG_TYPES.TEXT)}>Text</Button> <Button variant="contained" onClick={() => handleOpen(DIALOG_TYPES.IMAGE)}>Image</Button> <Button variant="contained" onClick={() => handleOpen(DIALOG_TYPES.FLOWCHART)}>Flowchart</Button> <Button variant="contained" onClick={() => handleOpen(DIALOG_TYPES.FULLSCREEN)}>Full Screen</Button> <Button variant="contained" onClick={() => handleOpen(DIALOG_TYPES.CODE)}>Code</Button> <Button variant="contained" onClick={() => handleOpen(DIALOG_TYPES.VIDEO)}>Video</Button> </div> <Dialog fullScreen={fullScreen} open={open} onClose={handleClose} aria labelledby="responsive dialog title" maxWidth="md" fullWidth > <DialogTitle id="responsive dialog title">Dynamic Dialog</DialogTitle> <DialogContent>{renderDialogContent()}</DialogContent> <DialogActions> <Button onClick={handleClose}>Close</Button> </DialogActions> </Dialog> </React.Fragment> ); } make display buttons screens beautiful you can use any other things, buttons, lists , or any thing it should animated, good, and responsive