Home page

sonuku092 · Feb 13, 2024 · 6945a25 · 6945a25
1 parent 24510b7
commit 6945a25
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 14 deletions.
diff --git a/frontend/src/components/Home/Home.js b/frontend/src/components/Home/Home.js
@@ -11,18 +11,29 @@ function Home(props) {
 
   return (
     <div className={styles.container}>
-      <div className={styles.links}>
-        <h1>
-          <Link to="/login">Login</Link>
-        </h1>
-        <h1>
-          <Link to="/signup">Signup</Link>
-        </h1>
+      <div className={styles.intro}>
+        <h1>Welcome to the Home Page</h1>
+        <p>
+          This is a simple authentication app built using React and Firebase.
+        </p>
+      </div>
+      <div className={styles.right}>
+        <div className={styles.Link}>
+          <h1>
+            Get started
+          </h1>
+          <h1>
+            <Link to="/login">Login</Link>
+          </h1>
+          <h1>
+            <Link to="/signup">Signup</Link>
+          </h1>
+        </div>
+        <h2 className={styles["welcome-message"]}>
+          {props.name ? `Welcome - ${props.name}` : "Please Login"}
+        </h2>
+        <button className={styles.button} onClick={handleSignout}>Logout</button>
       </div>
-      <h2 className={styles["welcome-message"]}>
-        {props.name ? `Welcome - ${props.name}` : "Please Login"}
-      </h2>
-      <button className={styles.button} onClick={handleSignout}>Logout</button>
     </div>
   );
 }

diff --git a/frontend/src/components/Home/Home.module.css b/frontend/src/components/Home/Home.module.css
@@ -1,16 +1,37 @@
 /* Home.css */
 
 /* Styles for the container */
+body{
+  background-color: rgb(255, 255, 255);
+  /* font-family: Arial, sans-serif; */
+}
+
 .container {
-    max-width: 800px;
     margin: 0 auto;
     padding: 20px;
+    display: flex;
+  }
+
+  .intro{
+    width: 60%;
+    margin: 0 auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border: 1px solid black;
   }
 
   /* Styles for the links */
-  .links {
+  .right {
+    width: 40%;
+    height: fit-content;
+    margin: 0 auto;
+    padding: 20px;
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
+    align-items: center;
+    border: 1px solid black;
   }
 
   /* Styles for the buttons */