Layout transition

<template>
    <div class="screen-container">
        <div class="left-container">
            <div class="logo-container">
                <img
                    src="@/assets/images/logo.png"
                    alt="logo"
                    width="230"
                />
                <LoginLangSwitcher />
            </div>
            <Transition>
                <slot />
            </Transition>
        </div>

        <div class="right-container">
            <video
                class="w-full h-full object-cover"
                loop
                muted
                playsinline
                autoplay
            >
                <source
                    src="@/assets/video/login_video.mp4"
                    type="video/mp4"
                />
            </video>
        </div>
    </div>
</template>

<style scoped>
.screen-container {
    @apply w-screen h-screen flex
}

.right-container {
    @apply hidden md:flex w-full
}

.left-container {
    @apply p-10 md:p-16 flex flex-col flex-shrink-0 gap-14 w-full md:w-[600px] dark:bg-zinc-900 bg-white;
}

.logo-container {
    @apply flex justify-between items-start
}

.v-enter-active,
.v-leave-active {
    transition: all 0.4s;
}
.v-enter-from,
.v-leave-to {
    opacity: 0;
    filter: blur(1rem);
}
</style>