feat: update UI

src/views/auth/LoginView.vue

@@ -1,41 +1,63 @@
 <template>
-  <div class="flex min-h-screen items-center justify-center bg-slate-100 p-4 dark:bg-slate-900">
+  <div class="grid min-h-dvh lg:grid-cols-[1.05fr_1fr]">
     <Button
       :icon="theme.isDark.value ? 'pi pi-sun' : 'pi pi-moon'"
       rounded
       text
-      style="position: fixed; right: 1rem; top: 1rem; z-index: 10"
+      severity="secondary"
+      class="!fixed !right-4 !top-4 z-10"
       :aria-label="theme.isDark.value ? 'Switch to light mode' : 'Switch to dark mode'"
       @click="theme.toggle"
     />
-    <Card class="w-full max-w-[380px]">
-      <template #title>
-        <div class="flex items-center gap-2">
-          <i class="pi pi-briefcase" style="color: #3b82f6"></i>
-          MWS — My Workspace
+
+    <!-- Signature: the indigo canvas with the brand gradient mesh -->
+    <section class="brand-panel relative hidden overflow-hidden p-12 lg:flex lg:flex-col lg:justify-between">
+      <span class="font-display text-[15px] font-extrabold tracking-[-0.01em] text-white">Workspace</span>
+      <div class="relative z-10 max-w-[440px]">
+        <h1 class="font-display text-[clamp(40px,4.4vw,62px)] font-extrabold uppercase leading-[0.98] text-white">
+          Projects,<br />docs, tasks.<br />One place.
+        </h1>
+        <p class="mt-5 text-[17px] leading-relaxed text-white/70">
+          Write documents, track work, and keep your team in sync — without switching tools.
+        </p>
+      </div>
+      <div class="relative z-10 flex gap-6 text-white/60">
+        <span class="text-[13px]">Documents</span>
+        <span class="text-[13px]">Tasks</span>
+        <span class="text-[13px]">Members</span>
+      </div>
+    </section>
+
+    <section class="flex items-center justify-center p-6" style="background: var(--canvas)">
+      <div class="w-full max-w-[360px]">
+        <div class="mb-7">
+          <span class="eyebrow">My Workspace</span>
+          <h2 class="page-title mt-2">Sign in</h2>
+          <p class="page-subtitle mt-1.5">Use the account your workspace owner set up for you.</p>
         </div>
-      </template>
-      <template #content>
+
         <form @submit.prevent="submit">
           <div class="field">
             <label for="username">Username</label>
-            <InputText id="username" v-model.trim="username" class="w-full" autocomplete="username" />
+            <InputText id="username" v-model.trim="username" class="w-full" autocomplete="username" autofocus />
           </div>
           <div class="field">
             <label for="password">Password</label>
-            <InputText
+            <Password
               id="password"
               v-model="password"
-              type="password"
               class="w-full"
+              inputClass="w-full"
+              toggleMask
+              :feedback="false"
               autocomplete="current-password"
             />
           </div>
-          <Message v-if="error" severity="error" variant="simple" class="mb-2 w-full">{{ error }}</Message>
+          <Message v-if="error" severity="error" variant="simple" class="mb-3 w-full">{{ error }}</Message>
           <Button type="submit" label="Sign in" class="w-full" :loading="loading" />
         </form>
-      </template>
-    </Card>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -57,7 +79,7 @@ const error = ref('')
 async function submit() {
   error.value = ''
   if (!username.value || !password.value) {
-    error.value = 'Username and password are required'
+    error.value = 'Enter your username and password'
     return
   }
   loading.value = true
@@ -72,3 +94,13 @@ async function submit() {
   }
 }
 </script>
+
+<style scoped>
+/* Blurple → magenta mesh over the deep-indigo canvas (DESIGN.md brand gradient) */
+.brand-panel {
+  background:
+    radial-gradient(120% 90% at 12% 8%, rgba(88, 101, 242, 0.85) 0%, transparent 58%),
+    radial-gradient(95% 85% at 88% 92%, rgba(236, 72, 189, 0.6) 0%, transparent 62%),
+    #0a0d3a;
+}
+</style>