feat: Add new design closer to gremiumhub landing

legalconsenthub/app/layouts/auth.vue

@@ -1,5 +1,61 @@
 <template>
-  <div class="h-screen flex items-center justify-center overlay">
-    <slot />
+  <div class="auth-layout h-screen flex items-center justify-center p-4">
+    <!-- Subtle gradient orbs for visual interest -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="auth-orb auth-orb-1" />
+      <div class="auth-orb auth-orb-2" />
+      <div class="auth-orb auth-orb-3" />
+    </div>
+    <div class="relative z-10 w-full max-w-md">
+      <slot />
+    </div>
   </div>
 </template>
+
+<style scoped>
+.auth-layout {
+  position: relative;
+  background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 50%, #ecfeff 100%);
+}
+
+.dark .auth-layout {
+  background: linear-gradient(180deg, #0a0a0a 0%, #042f2e 50%, #083344 100%);
+}
+
+/* Subtle floating orbs */
+.auth-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.4;
+}
+
+.auth-orb-1 {
+  width: 400px;
+  height: 400px;
+  top: -100px;
+  right: -100px;
+  background: linear-gradient(135deg, #14b8a6, #22d3ee);
+}
+
+.auth-orb-2 {
+  width: 300px;
+  height: 300px;
+  bottom: -50px;
+  left: -50px;
+  background: linear-gradient(135deg, #22d3ee, #14b8a6);
+}
+
+.auth-orb-3 {
+  width: 200px;
+  height: 200px;
+  bottom: -50px;
+  right: 20%;
+  background: linear-gradient(135deg, #a78bfa, #7c3aed);
+  opacity: 0.3;
+}
+
+.dark .auth-orb {
+  opacity: 0.2;
+}
+</style>

legalconsenthub/app/layouts/default.vue

@@ -6,7 +6,7 @@
       v-model:open="open"
       collapsible
       resizable
-      class="bg-(--ui-bg-elevated)/25"
+      class="bg-(--ui-bg-elevated)/75 border-r border-(--ui-border)"
       :ui="{ footer: 'lg:border-t lg:border-(--ui-border)' }"
     >
       <template #header>