Mobile Responsive for LandingPage

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "githubPullRequests.ignoredPullRequestBranches": [
+        "main"
+    ]
+}

src/pages/LandingPage.css

@@ -0,0 +1,46 @@
+/* LandingPage.css */
+.landing-page {
+    text-align: center;
+    margin-top: 100px;
+  }
+
+  .landing-page h1 {
+    font-size: 4em;
+    color: #333;
+  }
+
+  .landing-page a {
+    display: block;
+    margin-top: 20px;
+    text-decoration: none;
+    color: #007bff;
+    font-size: 1.2em;
+  }
+
+  .landing-page button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: #252525;
+    color: #fff;
+    border: none;
+    border-radius: 10px;
+    font-size: 1.2em;
+    cursor: pointer;
+  }
+
+  /* Media query for screens smaller than 768px */
+  /* for mobile responsiveness for Landing page edit this only */
+  @media (max-width: 768px) {
+    .landing-page h1 {
+      font-size: 2em;
+    }
+
+    .landing-page a {
+      font-size: 1em;
+    }
+
+    .landing-page button {
+      padding: 8px 15px;
+      font-size: 1em;
+    }
+  }

src/pages/LandingPage.js

@@ -1,44 +1,18 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import Stars from "../components/js/Stars";
+import styles from "./LandingPage.css";
 
 function LandingPage() {
   return (
     <div className="landing-page" style={styles.container}>
       <h1 style={styles.heading}>Welcome</h1>
-      <Stars/>
-      <Link to="/editor" style={styles.link}><button style={styles.button}>Click Here to Proceed</button></Link>
+      <Stars />
+      <Link to="/editor" style={styles.link}>
+        <button style={styles.button}>Click Here to Proceed</button>
+      </Link>
     </div>
   );
 }
 
-const styles = {
-  container: {
-    textAlign: "center",
-    marginTop: "100px",
-  },
-  heading: {
-    fontSize: "4em",
-    color: "#333",
-  },
-  link: {
-    display: "block",
-    marginTop: "20px",
-    textDecoration: "none",
-    color: "#007bff",
-    fontSize: "1.2em",
-  },
-  button: {
-    marginTop: "20px",
-    padding: "10px 20px",
-    backgroundColor: "#252525",
-    color: "#fff",
-    border: "none",
-    borderRadius: "10px",
-    fontSize: "1.2em",
-    cursor: "pointer",
-    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
-  }
-};
-
 export default LandingPage;