Christmas Background - Copy this React, Mui Component to your project

Import React from 'react'; import { Link } from 'react router dom'; import { Box, Card, CardContent, Typography, Button, Container } from '@mui/material'; import { createTheme, ThemeProvider } from '@mui/material/styles'; const theme = createTheme({ palette: { primary: { main: '#1976d2', }, secondary: { main: '#4caf50', }, }, }); function LandingPage() { return ( <ThemeProvider theme={theme}> <Box sx={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'linear gradient(to right, #bbdefb, #c8e6c9)', }} > <Container maxWidth="sm"> <Card elevation={5}> <CardContent sx={{ textAlign: 'center', py: 4 }}> <Typography variant="h4" component="h1" gutterBottom fontWeight="bold"> Christmas Card Creator </Typography> <Typography variant="subtitle1" color="text.secondary" paragraph> Create and share beautiful Christmas cards with your loved ones </Typography> <Box sx={{ mt: 3 }}> <Button component={Link} to="/login" variant="contained" color="primary" sx={{ mr: 2 }} > Login </Button> <Button component={Link} to="/register" variant="outlined" color="secondary" > Register </Button> </Box> </CardContent> </Card> </Container> </Box> </ThemeProvider> ); } export default LandingPage; I want it to look like a professional landing of Chrstmast Card Creator card and the design look a bit christmas