update

src/Main.jsx

@@ -11,6 +11,10 @@ import ConfigContext from './Config';
 import MovieCard from './components/MovieCard';
 import CategoryNav from './components/CategoryNav';
  
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
 
 const Main = () => {
   const config = useContext(ConfigContext);
@@ -88,7 +92,7 @@ const Main = () => {
           currentCategory={currentCategory}
           onCategoryChange={handleCategoryChange}
         />
-
+ 
       <div style={{ textAlign: 'center', marginBottom: 20 }}>
         <Pagination
           count={pagination.length}

src/components/MovieCard.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import Card from '@mui/material/Card';
-import CardMedia from '@mui/material/CardMedia';
-import CardContent from '@mui/material/CardContent';
-import Typography from '@mui/material/Typography';
+ 
+import { Card, CardContent, CardMedia, Typography } from '@mui/material';
+import { styled, useTheme } from '@mui/system';
 
 const MovieCard = ({ movie, config }) => {
   const truncateFilename = (filename, maxLength) => {
@@ -11,7 +10,20 @@ const MovieCard = ({ movie, config }) => {
       : filename;
   };
 
+  const theme = useTheme();
+  console.log(theme.shadows)
+  
+
+  const StyledCard = styled(Card)({
+    '&:hover': {
+      transform: 'scale(1.05)',
+      boxShadow: '0px 6px 16px rgba(0, 0, 0, 0.1)',
+      zIndex: 1,
+    },
+  });
+
   return (
+    <StyledCard>
     <Card
       style={{
         width: '100%',
@@ -35,6 +47,7 @@ const MovieCard = ({ movie, config }) => {
         </Typography>
       </CardContent>
     </Card>
+    </StyledCard>
   );
 };