<script setup>
    import ApplicationLogo from '@/Components/ApplicationLogo.vue';
    import { Link } from '@inertiajs/vue3';
    </script>
    
    <template>
        <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
            <div>
                <Link href="/" class="flex flex-col items-center group">
                    <div class="flex flex-col items-center">
                         <span class="text-4xl font-bold tracking-wide">
                            <span class="text-ingline-800">Ing</span><span class="text-ingline-500">line</span>
                        </span>
                        <span class="text-xs uppercase tracking-[0.3em] text-ingline-black font-semibold mt-1">Systems</span>
                    </div>
                </Link>
            </div>
    
            <div
                class="w-full sm:max-w-md mt-6 px-6 py-8 bg-white shadow-xl overflow-hidden sm:rounded-lg border-t-4 border-ingline-500"
            >
                <slot />
            </div>
        </div>
    </template>