fix login form UI lol

website/components/Landing/LandingThird.vue

@@ -45,7 +45,7 @@ onMounted(() => {
 </script>
 
 <template>
-	<section class="h-screen px-12">
+	<section class="px-12">
 		<h1 class="my-6 mt-[6.5rem] text-5xl font-bold text-center font-inter">
 			You're in control
 		</h1>

website/components/Login/LoginForm.vue

@@ -1,21 +1,53 @@
-
-<template>
-  <form class="w-3/6 p-48 m-auto">
-    <div class="flex flex-col relative my-3">
-      <label for="username" class="hidden absolute top-[-33px] text-white  ">Username</label>
-      <input name="username" id="username" type="username" class="text-black px-3 py-2 outline-none border-none"
-        v-model="username" placeholder="Username" />
-    </div>
-    <div class="flex flex-col bg-transparent border border-solid border-[#1834c9]">
-      <label for="password" class="peer-placeholder-shown:block ">Password</label>
-      <input name="password" id="password" class="peer text-black" type="password" placeholder="Password"
-        v-model="password" />
-    </div>
-  </form>
-</template> 
 <script lang="tsx" setup>
-import { ref } from 'vue'
 const username = ref("")
 const password = ref("")
-
 </script>
+
+<template>
+  <div>
+
+  </div>
+	<form class="form-container">
+		<div class="field">
+			<label for="username" class="form-label">Username</label>
+			<input
+				name="username"
+				type="username"
+				class="form-textbox"
+				v-model="username"
+				placeholder="Username"
+			/>
+		</div>
+		<div
+			class="field"
+		>
+			<label for="password" class="form-label">Password</label>
+			<input
+				name="password"
+				class="form-textbox"
+				type="password"
+				placeholder="Password"
+				v-model="password"
+			/>
+		</div>
+	</form>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  @apply flex flex-col justify-center w-3/6 h-screen m-auto gap-y-3;
+}
+
+.field {
+  @apply flex flex-col relative py-4;
+}
+
+.form-label {
+  @apply absolute -top-4 text-white font-inter uppercase font-bold;
+}
+
+.form-textbox {
+	@apply px-3 py-2 text-black border-none outline-none rounded-md bg-zinc-800;
+}
+
+</style>

website/pages/login.vue

@@ -1,7 +1,3 @@
-<script setup lang="ts">
-import Form from '~~/components/Landing/Login/Form.vue';
-</script>
-
 <template>
   <Container title="MyFursona | Login" class="login-wrapper">
     <LoginForm />