RC-2: create shared components for auth pages

src/app/main/authPages/shared-components/LeftSideCanvas.js

@@ -0,0 +1,58 @@
+import Avatar from '@mui/material/Avatar';
+import AvatarGroup from '@mui/material/AvatarGroup';
+import Box from '@mui/material/Box';
+
+function LeftSideCanvas({ title, subtitle, text }) {
+  return (
+    <Box
+      className="h-screen relative hidden md:flex flex-auto items-center justify-center p-64 lg:px-112 overflow-hidden max-w-[45vw] w-full"
+      sx={{ backgroundColor: 'primary.main' }}
+    >
+      <svg
+        className="absolute inset-0 pointer-events-none"
+        viewBox="0 0 960 540"
+        width="100%"
+        height="100%"
+        preserveAspectRatio="xMidYMax slice"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <Box
+          component="g"
+          sx={{ color: 'primary.light' }}
+          className="opacity-20"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="100"
+        >
+          <circle r="234" cx="196" cy="23" />
+          <circle r="234" cx="790" cy="491" />
+        </Box>
+      </svg>
+
+      <div className="z-10 relative w-full max-w-2xl">
+        {title && <div className="text-7xl font-bold leading-none text-gray-100">{title}</div>}
+        {subtitle && (
+          <div className="mt-24 text-lg tracking-tight leading-6 text-gray-400">{subtitle}</div>
+        )}
+        <div className="flex items-center mt-32">
+          <AvatarGroup
+            sx={{
+              '& .MuiAvatar-root': {
+                borderColor: 'primary.main',
+              },
+            }}
+          >
+            <Avatar src="assets/images/avatars/female-18.jpg" />
+            <Avatar src="assets/images/avatars/female-11.jpg" />
+            <Avatar src="assets/images/avatars/male-09.jpg" />
+            <Avatar src="assets/images/avatars/male-16.jpg" />
+          </AvatarGroup>
+
+          {text && <div className="ml-16 font-medium tracking-tight text-gray-400">{text}</div>}
+        </div>
+      </div>
+    </Box>
+  );
+}
+
+export default LeftSideCanvas;