Add VoiceToVoice component for voice interaction with listening toggle functionality

src/pages/voiceToVoice/index.tsx

@@ -0,0 +1,61 @@
+import { Box, Button } from "@mui/material";
+import React, { useState } from "react";
+
+const gifSrc = new URL("./assets/animation.gif", import.meta.url).href;
+const imgSrc = new URL("./assets/img.png", import.meta.url).href;
+
+const VoiceToVoice: React.FC = () => {
+  const [listening, setIsListening] = useState<boolean>(false);
+
+  function handleClick() {
+    setIsListening((prevState) => !prevState);
+  }
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100vh",
+        width: "100vw",
+      }}
+    >
+      <Box
+        sx={{
+          width: "200px",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}
+      >
+        <Box sx={{ mb: "10px" }}>
+          {listening ? (
+            <img src={gifSrc} alt="Listening animation" width={200} height={200} />
+          ) : (
+            <img src={imgSrc} alt="Static image" width={200} />
+          )}
+        </Box>
+        <Button
+          onClick={handleClick}
+          variant="contained"
+          sx={{
+            width: "100%",
+            height: "30px",
+            borderRadius: "5%",
+            backgroundColor: listening ? "rgb(218, 176, 176)" : "rgb(126, 184, 203)",
+            "&:hover": {
+              backgroundColor: "rgb(199, 206, 208)",
+              transition: "background-color 0.3s ease",
+            },
+          }}
+        >
+          {listening ? "STOP" : "SPEAK"}
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default VoiceToVoice;