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 };