Polish plan page and continue expense page

client/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@lottiefiles/react-lottie-player": "^3.5.3",
     "@mui/icons-material": "^5.14.9",
     "@mui/material": "^5.14.13",
     "@mui/styles": "^5.14.10",
@@ -32,6 +33,7 @@
     "react": "18.2.0",
     "react-date-range": "^1.4.0",
     "react-day-picker": "^8.9.1",
+    "react-device-frameset": "^1.3.2",
     "react-dom": "18.2.0",
     "react-i18next": "^13.3.1",
     "react-swipeable-views": "^0.14.0",

client/src/app/[locale]/(components)/(basic)/category-button/CategoryButton.styled.ts

@@ -0,0 +1,33 @@
+import { styled } from "@mui/material/styles";
+import { Grid, Typography } from "@mui/material";
+
+export const GridMain = styled(Grid)({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  borderRadius: "10px",
+  border: "1.5px solid #FB3F04",
+  height: "100px",
+  padding: "10px",
+});
+
+export const DivIcon = styled("div")({
+  borderRadius: "10px",
+  backgroundColor: "#FB3F04",
+  width: "48px",
+  height: "48px",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  color: "white",
+});
+
+export const IconWord = styled(Typography)({ whiteSpace: "pre-line" });
+
+const style = {
+  GridMain: GridMain,
+  DivIcon: DivIcon,
+  IconWord: IconWord,
+};
+
+export default style;

client/src/app/[locale]/(components)/(basic)/category-button/CategoryButton.tsx

@@ -0,0 +1,31 @@
+import React, { ReactNode } from "react";
+
+import style from "./CategoryButton.styled";
+
+interface CountryButtonProps {
+  icon: ReactNode;
+  name?: string;
+  color?: string;
+  active?: boolean;
+}
+
+const CategoryButton: React.FC<CountryButtonProps> = ({
+  icon,
+  name,
+  color,
+  active = false,
+}) => {
+  return (
+    <style.GridMain item xs={3.5}>
+      {/* Icon */}
+      <style.DivIcon style={{ backgroundColor: color }}>{icon}</style.DivIcon>
+
+      {/* Category Name */}
+      <style.IconWord fontSize="15px" fontWeight={400}>
+        {name}
+      </style.IconWord>
+    </style.GridMain>
+  );
+};
+
+export default CategoryButton;

client/src/app/[locale]/(components)/(basic)/default-button/DefaultButton.tsx

@@ -0,0 +1,34 @@
+import { Button, Typography } from "@mui/material";
+
+// Constants
+import { DefaultButtonColor } from "@/app/[locale]/constants";
+
+interface DefaultButtonProps {
+  name: string;
+}
+
+const DefaultButton: React.FC<DefaultButtonProps> = ({ name }) => {
+  return (
+    <Button
+      style={{
+        height: "50px",
+        width: "350px",
+        flexShrink: 0,
+        borderRadius: "25px",
+        backgroundColor: DefaultButtonColor,
+        boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.25)",
+      }}
+    >
+      <Typography
+        color="white"
+        fontSize="17px"
+        fontWeight={800}
+        textAlign="center"
+      >
+        {name}
+      </Typography>
+    </Button>
+  );
+};
+
+export default DefaultButton;