111 lines
2.3 KiB
TypeScript
111 lines
2.3 KiB
TypeScript
import { Box } from '@mui/material';
|
|
import heart from '../../../assets/images/heart.svg';
|
|
|
|
export default function MinecraftBackground() {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
opacity: 0.25,
|
|
overflow: 'hidden',
|
|
zIndex: -10,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
right: 0,
|
|
gap: '1vw',
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
rotate: '-20deg',
|
|
paddingTop: '30vw',
|
|
}}
|
|
>
|
|
<img
|
|
src={heart}
|
|
draggable={false}
|
|
style={{
|
|
width: '20vw',
|
|
height: '20vw',
|
|
rotate: '-20deg',
|
|
userSelect: 'none',
|
|
}}
|
|
/>
|
|
<img
|
|
src={heart}
|
|
draggable={false}
|
|
style={{
|
|
width: '20vw',
|
|
height: '20vw',
|
|
paddingBottom: '5vw',
|
|
userSelect: 'none',
|
|
}}
|
|
/>
|
|
<img
|
|
src={heart}
|
|
draggable={false}
|
|
style={{
|
|
width: '20vw',
|
|
height: '20vw',
|
|
rotate: '20deg',
|
|
userSelect: 'none',
|
|
}}
|
|
/>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
gap: '1vw',
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
rotate: '160deg',
|
|
paddingTop: '80vw',
|
|
}}
|
|
>
|
|
<img
|
|
src={heart}
|
|
draggable={false}
|
|
style={{
|
|
width: '20vw',
|
|
height: '20vw',
|
|
rotate: '-20deg',
|
|
userSelect: 'none',
|
|
}}
|
|
/>
|
|
<img
|
|
src={heart}
|
|
draggable={false}
|
|
style={{
|
|
width: '20vw',
|
|
height: '20vw',
|
|
paddingBottom: '5vw',
|
|
userSelect: 'none',
|
|
}}
|
|
/>
|
|
<img
|
|
src={heart}
|
|
draggable={false}
|
|
style={{
|
|
width: '20vw',
|
|
height: '20vw',
|
|
rotate: '20deg',
|
|
userSelect: 'none',
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|