✨ feat (auth): implement login page

app/components/layout/Auth.vue

@@ -9,18 +9,6 @@ defineProps<{
     class="relative flex h-dvh items-center justify-center px-4 lg:max-w-none lg:px-0"
     :class="{ 'flex-row-reverse': reverse }"
   >
-    <!-- <div class="bg-muted relative hidden h-full flex-1 flex-col p-10 text-white lg:flex dark:border-r"> -->
-    <!--   <div class="absolute inset-0 bg-zinc-900" /> -->
-    <!--   <div class="relative z-20 mt-auto"> -->
-    <!--     <blockquote class="space-y-2"> -->
-    <!--       <p class="text-lg"> -->
-    <!--         &ldquo;This library has saved me countless hours of work and helped me deliver stunning designs to my -->
-    <!--         clients faster than ever before.&rdquo; -->
-    <!--       </p> -->
-    <!--       <footer class="text-sm">Sofia Davis</footer> -->
-    <!--     </blockquote> -->
-    <!--   </div> -->
-    <!-- </div> -->
     <div class="mx-auto flex-1 lg:p-8">
       <slot />
     </div>

app/lib/utils.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from 'clsx'
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

app/pages/auth/login.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'blank',
+})
+</script>
+
+<template>
+  <LayoutAuth reverse>
+    <div class="mx-auto grid max-w-sm gap-6">
+      <div class="grid gap-2 text-center">
+        <h1 class="text-2xl font-semibold tracking-tight">Login RSSA</h1>
+      </div>
+      <AppAuthSignIn />
+    </div>
+  </LayoutAuth>
+</template>