first commit

resources/js/layouts/AuthLayout.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { NEl, useThemeVars } from 'naive-ui';
+import { computed } from 'vue';
+import Noise from '../components/Noise.vue';
+
+defineProps<{ title?: string; subtitle?: string }>();
+
+const themeVars = useThemeVars();
+
+// Мягкие цветовые «пятна» фона на основе текущей темы (как в onboard).
+const blobBg = computed(() => {
+    const p = themeVars.value.primaryColor;
+    const w = themeVars.value.warningColor;
+    const i = themeVars.value.infoColor;
+
+    return [
+        `radial-gradient(circle 14vw at 50% -6%, color-mix(in srgb, ${p} 22%, transparent), transparent 100%)`,
+        `radial-gradient(circle 18vw at 104% 50%, color-mix(in srgb, ${w} 22%, transparent), transparent 100%)`,
+        `radial-gradient(circle 18vw at -6% 104%, color-mix(in srgb, ${i} 22%, transparent), transparent 100%)`,
+    ].join(', ');
+});
+</script>
+
+<template>
+    <Noise />
+
+    <NEl class="relative flex min-h-screen items-center justify-center p-4">
+        <div class="pointer-events-none fixed inset-0 z-0">
+            <div class="absolute inset-0" :style="`background: ${blobBg};`" />
+            <div class="grid-overlay absolute inset-0 opacity-60" />
+        </div>
+
+        <div class="relative z-10 w-full max-w-sm">
+            <div v-if="title || subtitle" class="mb-5 text-center">
+                <h1 v-if="title" class="text-xl font-semibold">{{ title }}</h1>
+                <p v-if="subtitle" class="mt-1 text-sm opacity-70">
+                    {{ subtitle }}
+                </p>
+            </div>
+
+            <slot />
+        </div>
+    </NEl>
+</template>