feat: add animation for the arrow icon in section1

Author: elainefan331

src/components/HomePageComponents/Section1.tsx

@@ -1,3 +1,4 @@
+import ArrowCircleDownIcon from "@mui/icons-material/ArrowCircleDown";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import SearchIcon from "@mui/icons-material/Search";
 import {
@@ -181,7 +182,38 @@ const Section1: React.FC<Section1Props> = ({ scrollToNext }) => {
         }}
       >
         <IconButton onClick={scrollToNext}>
-          <ExpandMoreIcon sx={{ fontSize: 40, color: Colors.lightGray }} />
+          {/* <ExpandMoreIcon sx={{ fontSize: 40, color: Colors.lightGray }} /> */}
+          {/* <ArrowCircleDownIcon
+            sx={{
+              fontSize: 40,
+              color: Colors.lightGray,
+              animation: "bounce 1.5s infinite",
+              "@keyframes bounce": {
+                "0%, 100%": {
+                  transform: "translateY(0)",
+                },
+                "50%": {
+                  transform: "translateY(8px)",
+                },
+              },
+            }}
+          /> */}
+          <ArrowCircleDownIcon
+            sx={{
+              fontSize: 40,
+              color: Colors.lightGray,
+              animation: "flipY 5s infinite",
+              "@keyframes flipY": {
+                "0%, 100%": {
+                  transform: "rotateY(0deg)",
+                },
+                "50%": {
+                  transform: "rotateY(180deg)",
+                },
+              },
+              transformOrigin: "center",
+            }}
+          />
         </IconButton>
       </Box>
     </Box>

src/components/HomePageComponents/Section2.tsx

@@ -1,3 +1,4 @@
+import ArrowCircleDownIcon from "@mui/icons-material/ArrowCircleDown";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { Typography, Box, Button, IconButton } from "@mui/material";
 import { Colors } from "design/theme";
@@ -177,7 +178,9 @@ const Section2: React.FC<Section2Props> = ({
         }}
       >
         <IconButton onClick={scrollToNext}>
-          <ExpandMoreIcon sx={{ fontSize: 40, color: Colors.darkPurple }} />
+          <ArrowCircleDownIcon
+            sx={{ fontSize: 40, color: Colors.darkPurple }}
+          />
         </IconButton>
       </Box>
     </Box>

src/components/HomePageComponents/Section3.tsx

@@ -1,3 +1,4 @@
+import ArrowCircleDownIcon from "@mui/icons-material/ArrowCircleDown";
 import CloseIcon from "@mui/icons-material/Close";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { Typography, Box, IconButton, Dialog } from "@mui/material";
@@ -141,7 +142,7 @@ const Section3: React.FC<Section3Props> = ({ scrollToNext }) => {
         }}
       >
         <IconButton onClick={scrollToNext}>
-          <ExpandMoreIcon sx={{ fontSize: 40, color: Colors.lightGray }} />
+          <ArrowCircleDownIcon sx={{ fontSize: 40, color: Colors.lightGray }} />
         </IconButton>
       </Box>
     </Box>