feat: login form and page with country code part and animation

src/components/Logo.tsx

@@ -0,0 +1,7 @@
+import LogoSvg from '@/assets/logo.svg';
+
+function Logo() {
+  return <img src={LogoSvg} style={{ width: '150px', height: 'auto' }} />;
+}
+
+export default Logo;

src/components/components/common/Container.tsx

@@ -0,0 +1,8 @@
+import { Box, styled } from '@mui/material';
+
+export const Container = styled(Box)(() => ({
+  width: '100%',
+  maxWidth: '100vw',
+  height: '100vh',
+  margin: '0 auto',
+}));

src/components/components/common/FlexBox.tsx

@@ -0,0 +1,21 @@
+import { Box, styled, type BoxProps } from '@mui/material';
+
+// Define the props our component will accept
+interface FlexBoxProps extends BoxProps {
+  direction?: 'row' | 'column';
+  justify?: string;
+  align?: string;
+}
+
+export const FlexBox = styled(Box, {
+  // Do not forward these custom props to the DOM element
+  shouldForwardProp: (prop) =>
+    prop !== 'direction' && prop !== 'justify' && prop !== 'align',
+})<FlexBoxProps>(
+  ({ direction = 'row', justify = 'flex-start', align = 'stretch' }) => ({
+    display: 'flex',
+    flexDirection: direction,
+    justifyContent: justify,
+    alignItems: align,
+  }),
+);

src/components/components/common/Stack.tsx

@@ -0,0 +1,19 @@
+import { Box, styled, type BoxProps } from '@mui/material';
+
+interface StackProps extends BoxProps {
+  direction?: 'row' | 'column';
+  spacing?: number; // Spacing factor (multiplied by theme.spacing)
+  align?: string;
+}
+
+export const Stack = styled(Box, {
+  shouldForwardProp: (prop) =>
+    prop !== 'direction' && prop !== 'spacing' && prop !== 'align',
+})<StackProps>(
+  ({ theme, direction = 'column', spacing = 2, align = 'stretch' }) => ({
+    display: 'flex',
+    flexDirection: direction,
+    alignItems: align,
+    gap: theme.spacing(spacing),
+  }),
+);