48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-blue-100 to-indigo-100">
|
||
|
|
<!-- Background Pattern (Optional) -->
|
||
|
|
<div class="absolute inset-0 overflow-hidden opacity-10">
|
||
|
|
<div class="absolute -top-40 -right-40 w-80 h-80 bg-primary-500 rounded-full blur-3xl"></div>
|
||
|
|
<div class="absolute -bottom-40 -left-40 w-80 h-80 bg-secondary-500 rounded-full blur-3xl"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Auth Container -->
|
||
|
|
<div class="relative z-10 w-full max-w-md px-6">
|
||
|
|
<!-- Logo/Brand -->
|
||
|
|
<div class="text-center mb-8">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Auth Card -->
|
||
|
|
<q-card class="shadow-2xl rounded-2xl overflow-hidden">
|
||
|
|
<q-card-section class="p-1">
|
||
|
|
<slot></slot>
|
||
|
|
</q-card-section>
|
||
|
|
</q-card>
|
||
|
|
|
||
|
|
<!-- Footer -->
|
||
|
|
<div class="text-center mt-6 text-sm text-gray-600">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
// No props needed - pure layout component
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* Optional: Add custom animations */
|
||
|
|
@keyframes float {
|
||
|
|
0%, 100% {
|
||
|
|
transform: translateY(0px);
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
transform: translateY(-20px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.animate-float {
|
||
|
|
animation: float 6s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
</style>
|