# All files / js/layouts/auth AuthSimpleLayout.vue

0% Statements 0/14
0% Branches 0/4
0% Functions 0/1
0% Lines 0/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64

     <script setup lang="ts">
    import AppLogoIcon from '@/components/AppLogoIcon.vue';
    import Footer from '@/components/Footer.vue';
    import { home } from '@/routes';
    import { Link } from '@inertiajs/vue3';

    defineProps<{
        title?: string;
        description?: string;
    }>();
    </script>

    <template>
        <div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50">
            <!-- Background pattern -->
            <div class="absolute inset-0 opacity-40">
                <div class="h-full w-full" style="background-image: url('data:image/svg+xml,%3Csvg width=&quot;60&quot; height=&quot;60&quot; viewBox=&quot;0 0 60 60&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;%3E%3Cg fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;%3E%3Cg fill=&quot;%23f0f9ff&quot; fill-opacity=&quot;0.3&quot;%3E%3Ccircle cx=&quot;30&quot; cy=&quot;30&quot; r=&quot;1&quot;/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
            </div>

            <div class="relative flex min-h-screen flex-col">
                <div class="flex flex-1 items-center justify-center p-6 md:p-10">
                    <div class="w-full max-w-md">
                        <!-- Logo and branding -->
                        <div class="mb-8 text-center">
                            <Link
                                :href="home()"
                                class="inline-flex flex-col items-center gap-3"
                            >
                                <div class="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-600 to-blue-700 shadow-lg">
                                    <AppLogoIcon
                                        class="h-8 w-8 text-white"
                                    />
                                </div>
                                <div class="space-y-1">
                                    <h1 class="text-2xl font-bold text-gray-900">JobCardOnline</h1>
                                    <p class="text-sm text-gray-600">by Nexora Software</p>
                                </div>
                            </Link>
                        </div>

                        <!-- Login form card -->
                        <div class="rounded-2xl bg-white/80 backdrop-blur-sm shadow-xl border border-white/20 p-8">
                            <div class="mb-6 text-center">
                                <h2 class="text-2xl font-bold text-gray-900">{{ title }}</h2>
                                <p class="mt-2 text-sm text-gray-600">
                                    {{ description }}
                                </p>
                            </div>

                            <slot />
                        </div>

                        <!-- Footer info -->
                        <div class="mt-8 text-center">
                            <p class="text-xs text-gray-500">
                                © {{ new Date().getFullYear() }} Nexora Software (Pty) Ltd. All rights reserved.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>