✨ Add new login page design

src/components/layout/Background/FloatingBackground.tsx

@@ -0,0 +1,54 @@
+import { Box, createStyles, useMantineTheme } from '@mantine/core';
+import { useMouse, useViewportSize } from '@mantine/hooks';
+
+import { PolkaElement } from './PolkaElement';
+
+export const FloatingBackground = () => {
+  const { classes } = useStyles();
+  return (
+    <Box className={classes.noOverflow} pos="absolute" w="100%" h="100%" top={0} left={0}>
+      <MouseBackdrop />
+      <Box pos="relative" h="100%">
+        <PolkaElement rotation={95} top={0} left={100} />
+        <PolkaElement rotation={10} top={50} right={20} />
+        <PolkaElement rotation={-4} bottom={20} left={20} />
+      </Box>
+    </Box>
+  );
+};
+
+const MouseBackdrop = () => {
+  const { x, y } = useMouse();
+  const { width, height } = useViewportSize();
+  const smaller = Math.min(width, height);
+  const radius = Math.max(smaller - 500, 200);
+  return (
+    <Box pos="absolute" top={0} left={0} w="100%" h="100%">
+      <Box
+        sx={(theme) => {
+          const dropColor =
+            theme.colorScheme === 'dark'
+              ? theme.fn.rgba(theme.colors.red[8], 0.05)
+              : theme.fn.rgba(theme.colors.red[2], 0.4);
+          const boxShadow = `0px 0px ${radius}px ${radius}px ${dropColor}`;
+          return {
+            width: 50,
+            height: 50,
+            borderRadius: '5rem',
+            boxShadow: boxShadow,
+            backgroundColor: dropColor,
+          };
+        }}
+        top={y - 25}
+        left={x - 25}
+        pos="absolute"
+      ></Box>
+    </Box>
+  );
+};
+
+const useStyles = createStyles(() => ({
+  noOverflow: {
+    overflow: 'hidden',
+  },
+}));

src/components/layout/Background/PolkaElement.tsx

@@ -0,0 +1,32 @@
+import { Box } from '@mantine/core';
+
+export const PolkaElement = ({
+  rotation,
+  left,
+  top,
+  right,
+  bottom,
+}: {
+  rotation: number;
+  top?: number;
+  left?: number;
+  right?: number;
+  bottom?: number;
+}) => {
+  return (
+    <Box
+      style={{
+        transform: `rotate(${rotation}deg)`,
+        pointerEvents: 'none'
+      }}
+      className="polka"
+      pos="absolute"
+      w="20%"
+      h="40%"
+      top={top}
+      right={right}
+      left={left}
+      bottom={bottom}
+    />
+  );
+};