Добавил анимацию кнопке: "Задайте нам вопрос"

src/components/FloatingSupportChat/FloatingSupportChat.tsx

@@ -1,14 +1,38 @@
-import { Box, Fab } from "@mui/material";
+import { Box, Fab, Typography } from "@mui/material";
 import { useState } from "react";
 import CircleDoubleDown from "./CircleDoubleDownIcon";
 import Chat from "./Chat";
 
-
 export default function FloatingSupportChat() {
   const [isChatOpened, setIsChatOpened] = useState<boolean>(false);
 
+  const animation = {
+    "@keyframes runningStripe": {
+      "0%": {
+        left: "0",
+        backgroundColor: "transparent",
+      },
+      "20%": {
+        backgroundColor: "#ffffff",
+      },
+      "50%": {
+        backgroundColor: "#ffffff",
+        transform: "translate(200px, 0)",
+      },
+      "80%": {
+        backgroundColor: "#ffffff",
+      },
+
+      "100%": {
+        backgroundColor: "transparent",
+        boxShadow: "none",
+        left: "100%",
+      },
+    },
+  };
   return (
-        <Box sx={{
+    <Box
+      sx={{
         position: "fixed",
         right: "20px",
         bottom: "10px",
@@ -17,27 +41,51 @@ export default function FloatingSupportChat() {
         gap: "8px",
         width: "clamp(200px, 100% - 40px, 454px)",
         zIndex: 10,
-        }}>
-            {isChatOpened &&
-                <Chat sx={{
+      }}
+    >
+      {isChatOpened && (
+        <Chat
+          sx={{
             alignSelf: "start",
             width: "clamp(200px, 100%, 400px)",
-                }} />
-            }
+          }}
+        />
+      )}
       <Fab
-                variant={"extended"}
-                onClick={() => setIsChatOpened(prev => !prev)}
+        disableRipple
         sx={{
+          position: "relative",
+          backgroundColor: "rgba(255, 255, 255, 0.7)",
           pl: "11px",
           pr: !isChatOpened ? "15px" : "11px",
           gap: "11px",
           height: "54px",
           borderRadius: "27px",
           alignSelf: "end",
+          overflow: "hidden",
+          "&:hover": {
+            background: "rgba(255, 255, 255, 0.7)",
+          },
         }}
+        variant={"extended"}
+        onClick={() => setIsChatOpened((prev) => !prev)}
       >
+        {!isChatOpened && (
+          <Box
+            sx={{
+              position: "absolute",
+              bgcolor: "#FFFFFF",
+              height: "70px",
+              width: "30px",
+              animation: "runningStripe  linear 6s infinite",
+              transform: "rotate(45deg)  skewX(20deg) skewY(-10deg)",
+              ...animation,
+            }}
+          />
+        )}
+
         <CircleDoubleDown isUp={isChatOpened} />
-                {!isChatOpened && "Задайте нам вопрос"}
+        {!isChatOpened && <Typography sx={{ zIndex: "10000" }}>Задайте нам вопрос</Typography>}
       </Fab>
     </Box>
   );

src/pages/Landing/Landing.tsx

@@ -14,13 +14,14 @@ interface Props {
 }
 
 export default function Landing({ templaterOnly = false }: Props) {
-
   return (
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />
-            <Box sx={{
+      <Box
+        sx={{
           position: "relative",
-            }}>
+        }}
+      >
         <Navbar isLoggedIn={false} />
         <Section1 />
         <Section2 templaterOnly={templaterOnly} />