Merge pull request #141 from BhartiNagpure/bharti

update login page

frontend/components/common/Login.tsx

@@ -1,29 +1,30 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { ConnectButton } from "web3uikit";
+import style from "../../styles/Main.module.css";
 
 function Login() {
   return (
     <div>
-      <div
-        style={{
-          minHeight: "90vh",
-          display: "flex",
-          justifyContent: "center",
-          flexDirection: "column",
-          textAlign: "center",
-          alignContent: "center",
-          alignItems: "center",
-          gap: "20px",
-        }}
+      <div  
+      className={` ${style.wlcimg}`}
       >
         <img
           src="/images/welcome.svg"
           alt="no data"
-          width={"100vh"}
-          height={"100vh"}
+          width={"400vh"}
+          height={"400vh"}
         />
-        <ConnectButton moralisAuth={false} />
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center'
+          }}>
+          <h2 style={{ fontWeight: 'bold' }}>Welcome to Jarvis</h2>
+          <ConnectButton moralisAuth={false} />
+        </div>
       </div>
+
     </div>
   );
 }

frontend/styles/Main.module.css

@@ -8,14 +8,29 @@
 }
 
 .rotate {
-    animation: rotation 3s infinite linear;
+  animation: rotation 3s infinite linear;
+}
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(359deg);
   }
+}
+
+.wlcimg {
+  min-height: 90vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px
+}
 
-  @keyframes rotation {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(359deg);
-    }
-  }
+@media only screen and (max-width: 600px) {
+  .wlcimg {
+    flex-direction: column;
+  }
+}