anahita-front/layouts/auth.vue

<template>
    <main class="auth">
        <section>
            <aside v-if="aside">
                <div v-show="step != undefined">
                    <bdi>{{ step }} / {{ steps }}</bdi>
                    <ul>
                        <li v-for="s in steps" :key="s" :class="{ 'opacity-25': s > step }" />
                    </ul>
                </div>
                <div>
                    <img :src="`/images/${image}`" />
                    <div>
                        <span>{{ subtitle }}</span>
                        <h2>{{ $t(title) }}</h2>
                        <p>{{ $t(desc, { number: otpCode.number }) }}</p>
                        <bdi>{{ $t(hint) }}</bdi>
                    </div>
                </div>
            </aside>
            <slot />
        </section>
        <NuxtLink to="/" >
            <Button v-bind="backBtn.props" />
        </NuxtLink>
    </main>
</template>

<script setup>
import init from "../initialize/auth/layout";
const { backBtn, asides } = init();
const { device } = inject('service')
const { aside, steps } = useAttrs()
const { step, image, subtitle, title, desc, hint } = asides[aside] || {}
const otpCode = useOtpCodeStore()
</script>

<style lang="scss">
.auth {
    @apply min-h-screen select-none flex flex-col items-center;
    @apply gap-4 lg:justify-center lg:gap-16;
    @apply py-4 lg:py-16 lg:px-4;

    section {
        box-shadow: 0px 8px 22px 0px rgba(0, 75, 130, 0.1);
        @apply flex flex-col rounded-2xl bg-white items-center overflow-hidden max-w-[72.1rem];
        @apply w-full h-auto py-3 gap-[5.3rem] max-lg:shadow-none;
        @apply lg:flex-row lg:p-8 lg:gap-8 lg:border-b lg:min-h-[33.5rem];
        @apply xl:px-16 xl:gap-10;

        aside {
            @apply flex flex-col w-[21.4rem] lg:w-auto max-lg:items-center lg:justify-center gap-12;
            @apply lg:my-auto lg:gap-[5.5rem];

            &>div:nth-child(1) {
                @apply w-full lg:-mt-[8.3rem] h-11 lg:w-[27.1rem] flex flex-col gap-4;

                bdi {
                    @apply self-start text-primary-600 text-sm lg:text-base font-medium font-poppins leading-tight;
                }

                ul {
                    @apply flex;

                    li {
                        @apply grow flex h-2 relative first:before:hidden first:grow-0;

                        &::before {
                            @apply block content-['_'] my-auto w-full h-[0.1rem] bg-sky-700;
                        }

                        &::after {
                            @apply block content-['_'] w-2 h-2 bg-sky-700 rounded-full;
                        }
                    }
                }
            }

            &>div:nth-child(2) {
                @apply flex flex-col gap-[1.1rem] items-center;
                @apply lg:flex-row lg:gap-6;

                img {
                    @apply lg:w-[20%] h-[3.8rem] lg:h-[8.8rem];
                }

                div {
                    @apply flex flex-col items-center gap-2 lg:items-start;

                    span {
                        @apply text-zinc-500 font-normal font-poppins tracking-widest whitespace-nowrap;
                        @apply text-[1.2em] lg:text-2xl lg:leading-7;
                    }

                    h2 {
                        @apply text-[#4F4F4F] font-black font-vazir whitespace-nowrap;
                        @apply text-[1.6em] lg:text-[2.4em] lg:leading-[3rem];
                    }

                    p {
                        @apply text-[#4F4F4F] font-vazir text-justify text-sm leading-6;
                        @apply max-w-[22.8rem] lg:text-base lg:leading-snug;
                    }

                    bdi {
                        @apply text-zinc-500 font-vazir leading-snug text-sm -mt-[1.8rem] mr-5 self-center lg:m-0 lg:self-start lg:text-base;
                    }
                }
            }
        }

        &:has(.login) {
            @apply pt-12;

            aside {
                p {
                    @apply hidden lg:block;
                }
            }
        }

        form {
            @apply w-[21.4rem] lg:w-[27.1rem];
        }
    }

    &>a {

        button {
            .p-button-label {
                @apply font-vazir text-[#8C8C8C] leading-[1.9rem] whitespace-nowrap;
            }

            .p-button-icon {
                @apply text-2xl;
            }
        }
    }
}
</style>