added login scene as backdrop component

src/components/auth/login/LoginScene/index.tsx

@@ -0,0 +1,57 @@
+import React, { FC, useState } from "react";
+
+import styles from "./styles.module.scss";
+
+interface LoginSceneProps {}
+
+const LoginScene: FC<LoginSceneProps> = () => {
+  const [loaded, setLoaded] = useState(false);
+
+  return (
+    <div className={styles.scene}>
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 1920 1080"
+        preserveAspectRatio="xMidYMid slice"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <linearGradient id="fallbackGradient" x1={0} x2={0} y1={1} y2={0}>
+            <stop style={{ stopColor: "#ffccaa", stopOpacity: 1 }} offset="0" />
+            <stop
+              style={{ stopColor: "#fff6d5", stopOpacity: 1 }}
+              offset="0.34655526"
+            />
+            <stop
+              style={{ stopColor: "#afc6e9", stopOpacity: 1 }}
+              offset="0.765342"
+            />
+            <stop style={{ stopColor: "#879fde", stopOpacity: 1 }} offset="1" />
+          </linearGradient>
+        </defs>
+
+        <rect
+          width={1920}
+          height={1080}
+          x={0}
+          y={0}
+          fill="url(#fallbackGradient)"
+        />
+
+        <image
+          href="/images/clouds.svg"
+          width={1920}
+          height={1080}
+          x={0}
+          y={0}
+          opacity={loaded ? 1 : 0}
+          onLoad={() => setLoaded(true)}
+          className={styles.image}
+        />
+      </svg>
+    </div>
+  );
+};
+
+export { LoginScene };

src/components/auth/login/LoginScene/styles.module.scss

@@ -0,0 +1,17 @@
+@import "src/styles/mixins";
+
+.scene {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.image {
+  transition: opacity 1s;
+
+  @include tablet {
+    display: none;
+  }
+}