feat: review step 2

frontend/src/Components/SVM/SVM.tsx

+import { createStyles } from "@mantine/core"
+import { TextAreaCustom } from "../_common/TextAreaCustom"
+import { DropDownWidget } from "../_common/DropDownWidget";
+import { ButtonCustom } from "../_common/ButtonCustom";
+import { ScrollButton } from "../_common/ScrollButton";
+
+const useStyle = createStyles((theme) => ({
+  mainContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  }
+}))
+
 function SVM() {
+  const { classes } = useStyle();
+
   return (
-    <div>SVM</div>
+    <div className={classes.mainContainer}>
+      <TextAreaCustom 
+        label="Enter the review"
+        placeholder="Enter the review"
+      />
+      <DropDownWidget 
+        label="Select the Algorithm"
+        placeholder="Algorithm"
+      />
+      <ButtonCustom label="Get the rule"/>
+      <ScrollButton />
+    </div>
   )
 }
 

frontend/src/Components/_common/ButtonCustom.tsx

+import { Button, createStyles } from '@mantine/core';
+
+const useStyles = createStyles((theme) => ({
+    container: {
+        width: window.innerWidth / 5 * 3,
+        display: "flex",
+        justifyContent: "end",
+    }
+}))
+
+export function ButtonCustom(data: {label: string}) {
+  const { classes } = useStyles()
+
+  return (
+    <div className={classes.container}>
+        <Button 
+            variant="gradient" 
+            gradient={{ from: 'teal', to: 'blue', deg: 60 }}
+            radius="xl" 
+            size="lg"
+            mt={30}
+        >
+            {data.label}
+        </Button>
+    </div>
+  );
+}
\ No newline at end of file

frontend/src/Components/_common/DropDownWidget.tsx

+import { Select } from '@mantine/core';
+
+export function DropDownWidget(data: {label: string, placeholder: string}) {
+  return (
+    <Select
+      mt={30}
+      label={data.label}
+      placeholder={data.placeholder}
+      data={[
+        { value: 'SVM', label: 'Support Vector Machine' },
+        { value: 'random forest', label: 'Random Forest' },
+        { value: 'logistic Regression', label: 'Logistic Regression' },
+        { value: 'KNN', label: 'K-Nearest Neighbor' },
+      ]}
+      style={{width: window.innerWidth / 5 * 3}}
+    />
+  );
+}
\ No newline at end of file

frontend/src/Components/_common/ScrollButton.tsx

+import { useWindowScroll } from '@mantine/hooks';
+import { Button, createStyles } from '@mantine/core';
+
+const useStyle = createStyles((theme) => ({
+    button: {
+        position: "fixed",
+        bottom: 50,
+        right: 50,
+        width: "50px",
+        height: "50px",
+        borderRadius: "50%",
+    }
+}))
+
+export function ScrollButton() {
+  const [scroll, scrollTo] = useWindowScroll();
+  const { classes } = useStyle()
+
+  return (
+    <Button className={classes.button} onClick={() => scrollTo({ y: 0 })}>^</Button>
+
+  );
+}
\ No newline at end of file

frontend/src/Components/_common/TextAreaCustom.tsx

+import { Textarea } from "@mantine/core";
+
+export function TextAreaCustom(data: {placeholder: string, label: string}) {
+  return (
+    <Textarea
+      mt={30}
+      placeholder={data.placeholder}
+      label={data.label}
+      style={{width: window.innerWidth / 5 * 3}}
+      minRows={10}
+      autosize={true}
+      withAsterisk
+    />
+  );
+}
\ No newline at end of file