changed layout, cleanup

src/components/main-card/MainCard.jsx

@@ -11,17 +11,13 @@ import { useTheme } from '@mui/material/styles';
 
 import { Tilt } from './Tilt';
 
-// import { VioletColorWheel, SeaGreenCrayola } from 'themes/Colors';
-
 const MainCard = ({ imageURL, title, description, url }) => {
 	const theme = useTheme();
-	// const shadowColor =
-	// 	theme.palette.mode === 'dark' ? SeaGreenCrayola : VioletColorWheel;
+
 	const options = {
 		reverse: true,
 		speed: 1200,
-		easing:  'cubic-bezier(.09,.67,.54,.76)'
-		// reset: false,
+		easing: 'cubic-bezier(.09,.67,.54,.76)',
 	};
 
 	return (
@@ -35,10 +31,6 @@ const MainCard = ({ imageURL, title, description, url }) => {
 						mx: 'auto',
 						color: theme.palette.text.secondary,
 						backgroundColor: theme.palette.background.paper,
-						// '&:hover': {
-						// 	transition: 'all .7s ease',
-						// 	boxShadow: `1px 1px 20px 10px ${shadowColor}`,
-						// },
 					}}>
 					<CardMedia
 						component='img'
@@ -46,6 +38,9 @@ const MainCard = ({ imageURL, title, description, url }) => {
 						image={imageURL}
 						alt={title}
 					/>
+					{{ description } !== '' && (
+						<Typography variant='body2'>{description}</Typography>
+					)}
 					<CardActionArea>
 						<CardContent
 							color='white'
@@ -53,10 +48,6 @@ const MainCard = ({ imageURL, title, description, url }) => {
 							<Typography gutterBottom variant='h6' component='div'>
 								{title}
 							</Typography>
-							<Typography></Typography>
-							{{ description } !== '' && (
-								<Typography variant='body2'>{description}</Typography>
-							)}
 						</CardContent>
 					</CardActionArea>
 				</Card>