init project and finish login page

src/components/LoginCard.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="card card-dash h-80 w-100 shadow-xl">
+    <div class="card-body">
+      <h1 class="card-title place-self-center my-3 text-2xl">User Login</h1>
+      <div class="flex flex-col w-full h-full">
+        <label class="input w-full my-3">
+          <img class="h-[1em] opacity-50" src="@/assets/user.svg" alt="User img" />
+          <input type="text" class="grow" placeholder="User Name" />
+        </label>
+        <label class="input w-full my-3">
+          <img class="h-[1em] opacity-50" src="@/assets/pwd.svg" alt="User img" />
+          <input type="text" class="grow" placeholder="User Name" />
+        </label>
+      </div>
+      <div>
+        <RouterLink class="flex justify-end mx-3" to="/">Forget Password</RouterLink>
+      </div>
+      <div class="card-actions flex items-end my-3">
+        <button class="btn flex-1">Sign Up</button>
+        <button class="btn btn-primary flex-3">Login</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+@import "@/assets/main.css"
+</style>