Add the missing file

FrontendFolder/switch-room/src/components/MainPage.vue

+<template>
+  <div class="content">
+    <div class="leftPart">
+      <div class="overlay">
+        <h1>Switch Room</h1>
+        <h3>Reasons for Choosing US</h3>
+        <p>
+          Wanna to pay for hotel for traveling? Switch Room provide the local
+          rooms for you. No need to pay rental. You can switch your living home
+          with other people who want to travel to your place.
+        </p>
+        <br />
+        <router-link to="/login">
+          <button>READ MORE</button>
+        </router-link>
+      </div>
+    </div>
+    <div id="card">
+      <div id="card-content">
+        <div id="card-title">
+          <h2>LOGIN</h2>
+          <div class="underline-title"></div>
+        </div>
+        <form method="post" class="form">
+          <label for="user-email" style="padding-top: 13px">
+            &nbsp;Username
+          </label>
+          <input
+              id="user-email"
+              class="form-content"
+              type="text"
+              name="username"
+              autocomplete="on"
+              required
+          />
+          <div class="form-border"></div>
+          <label for="user-password" style="padding-top: 22px"
+          >&nbsp;Password
+          </label>
+          <input
+              id="user-password"
+              class="form-content"
+              type="password"
+              name="password"
+              required
+          />
+          <div class="form-border"></div>
+          <a href="#">
+            <legend id="forgot-pass">Forgot password?</legend>
+          </a>
+          <input id="submit-btn" type="submit" name="submit" value="LOGIN" />
+          <router-link to="/register">
+            <div id="signup">Don't have account yet?</div>
+          </router-link>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.content {
+  display: flex;
+}
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+body {
+  height: 900px;
+}
+.leftPart {
+  background: url("@/assets/mainPage/headerPhoto.jpeg");
+  text-align: center;
+  width: 70%;
+  height: auto;
+  background-size: cover;
+  background-attachment: fixed;
+  position: relative;
+  overflow: hidden;
+  border-radius: 0 0 85% 85% / 30%;
+}
+.leftPart .overlay {
+  width: 100%;
+  height: 100%;
+  padding: 50px;
+  color: #fff;
+  text-shadow: 1px 1px 1px #333;
+  background-image: linear-gradient(135deg, #b3d1ff 10%, #fd5e086b 100%);
+}
+
+h1 {
+  font-family: "Dancing Script", cursive;
+  font-size: 80px;
+  margin-bottom: 30px;
+}
+
+h3,
+p {
+  font-family: "Open Sans", sans-serif;
+  margin-bottom: 30px;
+}
+
+button {
+  border: none;
+  outline: none;
+  padding: 10px 20px;
+  border-radius: 50px;
+  color: #333;
+  background: #fff;
+  margin-bottom: 50px;
+  box-shadow: 0 3px 20px 0 #0000003b;
+}
+button:hover {
+  cursor: pointer;
+}
+a {
+  text-decoration: none;
+}
+label {
+  font-family: "Raleway", sans-serif;
+  font-size: 11pt;
+}
+#forgot-pass {
+  color: #2dbd6e;
+  font-family: "Raleway", sans-serif;
+  font-size: 10pt;
+  margin-top: 3px;
+  text-align: right;
+}
+#card {
+  background: #fbfbfb;
+  border-radius: 8px;
+  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
+  height: 410px;
+  width: 30%;
+}
+#card-content {
+  padding: 12px 44px;
+}
+#card-title {
+  font-family: "Raleway Thin", sans-serif;
+  letter-spacing: 4px;
+  padding-bottom: 23px;
+  padding-top: 13px;
+  text-align: center;
+}
+#signup {
+  color: #2dbd6e;
+  font-family: "Raleway", sans-serif;
+  font-size: 10pt;
+  margin-top: 16px;
+  text-align: center;
+}
+#submit-btn {
+  background: -webkit-linear-gradient(right, #a6f77b, #2dbd6e);
+  border: none;
+  border-radius: 21px;
+  box-shadow: 0px 1px 8px #24c64f;
+  cursor: pointer;
+  color: white;
+  font-family: "Raleway SemiBold", sans-serif;
+  height: 42.3px;
+  margin: 0 auto;
+  margin-top: 50px;
+  transition: 0.25s;
+  width: 153px;
+}
+#submit-btn:hover {
+  box-shadow: 0px 1px 18px #24c64f;
+}
+.form {
+  align-items: left;
+  display: flex;
+  flex-direction: column;
+}
+.form-border {
+  background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
+  height: 1px;
+  width: 100%;
+}
+.form-content {
+  background: #fbfbfb;
+  border: none;
+  outline: none;
+  padding-top: 14px;
+}
+.underline-title {
+  background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
+  height: 2px;
+  margin: 0rem auto 0 auto;
+  width: 89px;
+}
+</style>