added some animation

theme-costume-app/src/components/Carousel.js

-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 const NavigationComponent = ({ goToNextPage, goToPreviousPage, currentPage, totalPages }) => {
   const renderDots = () => {
@@ -33,7 +33,7 @@ const MoviesDisplay = ({ setOfMovies }) => {
   return (
     <div style={styles.movies}>
       {setOfMovies.map((movie, index) => (
-        <div key={index} style={styles.movie}>
+      <div key={index} style={styles.movie}>
           <img src={movie.source} alt={movie.name} style={styles.image} />
           {/* <p style={styles.movieText}>{movie.name}</p> */}
         </div>
@@ -42,10 +42,15 @@ const MoviesDisplay = ({ setOfMovies }) => {
   );
 };
 
-const Carousel = ({ showingItems, items }) => {
+const Carousel = ({ showingItems, items, autoScrollInterval = 3000 }) => {
   const [currentPage, setCurrentPage] = useState(1);
   const TOTAL_PAGES = Math.ceil(items.length / showingItems);
 
+  useEffect(() => {
+    const intervalId = setInterval(nextPage, autoScrollInterval);
+    return () => clearInterval(intervalId);
+  }, [currentPage]);
+
   const previousPage = () => {
     if (currentPage === 1) {
       setCurrentPage(TOTAL_PAGES);
@@ -61,7 +66,7 @@ const Carousel = ({ showingItems, items }) => {
       setCurrentPage(currentPage + 1);
     }
   };
-
+  
   const groupingMovies = [];
   for (let i = 0; i < items.length; i += showingItems) {
     groupingMovies.push(items.slice(i, i + showingItems));
@@ -80,7 +85,8 @@ const Carousel = ({ showingItems, items }) => {
           />
         </div>
       </div>
-      <MoviesDisplay setOfMovies={groupingMovies[currentPage - 1]} />
+      <MoviesDisplay setOfMovies={groupingMovies[currentPage - 1]}
+      />
     </div>
   );
 };
@@ -88,7 +94,7 @@ const Carousel = ({ showingItems, items }) => {
 const styles = {
   container: {
     backgroundColor: '#fff',
-    width: '100vw',
+    width: '100%',
   },
   topRow: {
     display: 'flex',

theme-costume-app/src/components/Product.js

@@ -2,6 +2,15 @@
 
 import React, {useState} from 'react';
 import { Card, CardContent, CardMedia, Typography, Dialog, DialogContent, Button } from '@mui/material';
+import { styled } from '@mui/system';
+
+const AnimatedCard = styled(Card)({
+  transition: 'transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+  '&:hover': {
+    transform: 'scale(1.05)',
+    boxShadow: '0px 10px 10px rgba(0, 0, 0, 0.10)',
+  },
+});
 
 const Product = ({ imageUrl, price }) => {
   const [open, setOpen] = useState(false);
@@ -22,7 +31,7 @@ const Product = ({ imageUrl, price }) => {
 
   return (
     <>
-    <Card sx={{ maxWidth: 345, cursor: 'pointer' }} onClick={handleOpen}>
+    <AnimatedCard sx={{ maxWidth: 345, cursor: 'pointer' }} onClick={handleOpen}>
       <CardMedia
         component="img"
         height="280"
@@ -34,7 +43,7 @@ const Product = ({ imageUrl, price }) => {
           Price: ${price}
         </Typography>
       </CardContent>
-    </Card>
+    </AnimatedCard>
     <Dialog open={open} onClose={handleClose}>
       <DialogContent>
         <img src={imageUrl} alt="Product Image" style={{ maxWidth: '100%' }} />