radicall/resources/js/Client/components/landing/LandingSteps.vue

<script setup>
import LandingSectionTitle from './LandingSectionTitle.vue'

const steps = [
    {
        number: '۰۱',
        title: 'پروفایل پت را بسازید',
        description: 'نام، گونه، نژاد، سن و وزن؛ یک‌بار ثبت می‌کنید و برای همه‌ی درخواست‌های بعدی آماده است. هر پت پرونده‌ی مستقل خودش را دارد.',
        mock: 'pet'
    },
    {
        number: '۰۲',
        title: 'تصاویر را آپلود کنید',
        description: 'نوع تصویربرداری را انتخاب کنید، فایل اسکن و سوابق قبلی را بکشید و رها کنید. اگر عجله دارید، اولویت اورژانسی بگذارید.',
        mock: 'upload'
    },
    {
        number: '۰۳',
        title: 'رادیولوژیست را انتخاب کنید',
        description: 'پزشک مورد اعتمادتان را از لیست انتخاب کنید، یا بگذارید سیستم رادیولوژیستِ در شیفت را همان لحظه به پرونده اختصاص دهد.',
        mock: 'doctor'
    },
    {
        number: '۰۴',
        title: 'پیامک بگیرید، گزارش را بخوانید',
        description: 'به‌محض ثبت گزارش، پیامک می‌گیرید. گزارش کامل با تصاویر پیوست در پنل شماست؛ بدون تماس، بدون پیگیری.',
        mock: 'sms'
    },
]
</script>

<template>
    <section id="how-it-works" class="bg-white py-20 lg:py-28 scroll-mt-20">
        <div class="container max-w-7xl px-4 sm:px-6">
            <LandingSectionTitle
                eyebrow="چطور کار می‌کند"
                title="از عکس تا گزارش، چهار قدم"
                description="همان مسیری که در پنل طی می‌کنید؛ نه بیشتر."
            />

            <ol class="landing-reveal relative mt-16 space-y-10 lg:space-y-0">
                <span class="landing-timeline-line hidden lg:block absolute right-1/2 translate-x-1/2 top-0 bottom-0 w-0.5 bg-dominant-100" aria-hidden="true"></span>

                <li
                    v-for="(step, index) in steps"
                    :key="step.number"
                    class="relative grid lg:grid-cols-2 gap-8 lg:gap-24 items-center lg:py-10"
                >
                    <span class="hidden lg:flex absolute right-1/2 translate-x-1/2 w-12 h-12 items-center justify-center rounded-full bg-dominant-500 text-white text-sm font-bold ring-8 ring-white" aria-hidden="true">{{ step.number }}</span>

                    <div :class="index % 2 === 0 ? 'lg:order-1 lg:pl-6' : 'lg:order-2 lg:pr-6'">
                        <span class="lg:hidden inline-flex w-10 h-10 items-center justify-center rounded-full bg-dominant-500 text-white text-xs font-bold">{{ step.number }}</span>
                        <h3 class="mt-4 lg:mt-0 text-xl sm:text-2xl font-extrabold text-dark">{{ step.title }}</h3>
                        <p class="mt-3 text-sm sm:text-base leading-8 text-dark/60">{{ step.description }}</p>
                    </div>

                    <div :class="index % 2 === 0 ? 'lg:order-2' : 'lg:order-1'" class="rounded-[28px] bg-light border-2 border-dominant-50 p-5 sm:p-7" aria-hidden="true">
                        <div v-if="step.mock === 'pet'" class="rounded-2xl bg-white p-5 space-y-3">
                            <div class="flex items-center gap-3">
                                <span class="w-12 h-12 rounded-2xl bg-dominant-50 text-dominant-500 flex items-center justify-center text-xl"><i class="fi fi-rr-cat leading-none"></i></span>
                                <div class="flex-1 space-y-1.5">
                                    <span class="block h-2 w-1/3 rounded-full bg-dark/10"></span>
                                    <span class="block h-2 w-1/5 rounded-full bg-dark/5"></span>
                                </div>
                            </div>
                            <div class="grid grid-cols-2 gap-3 pt-2">
                                <div v-for="field in ['نام: پیشی', 'گونه: گربه', 'سن: ۳ سال', 'وزن: ۴.۲ کیلو']" :key="field" class="rounded-xl border border-dominant-50 px-3 py-2.5 text-xs text-dark/70">{{ field }}</div>
                            </div>
                            <div class="flex justify-end pt-1">
                                <span class="rounded-lg bg-dominant-500 px-4 py-2 text-[11px] font-semibold text-white">ذخیره‌ی پروفایل</span>
                            </div>
                        </div>

                        <div v-else-if="step.mock === 'upload'" class="rounded-2xl bg-white p-5 space-y-3">
                            <div class="flex gap-2">
                                <span v-for="(modality, i) in ['MRI', 'سی‌تی', 'سونو', 'اکو']" :key="modality" :class="i === 0 ? 'bg-dominant-500 text-white' : 'bg-dominant-50 text-dark/60'" class="rounded-full px-3 py-1 text-[11px] font-semibold">{{ modality }}</span>
                            </div>
                            <div class="rounded-2xl border-2 border-dashed border-dominant-200 bg-light/60 p-5 text-center">
                                <i class="fi fi-rr-cloud-upload text-2xl text-dominant-500 leading-none"></i>
                                <p class="mt-2 text-xs font-semibold text-dark">فایل‌ها را اینجا رها کنید</p>
                            </div>
                            <ul class="space-y-2">
                                <li v-for="file in ['Pishi_MRI_T2.zip · ۴۸ MB', 'سابقه‌ی آزمایش خون.pdf']" :key="file" class="flex items-center justify-between rounded-xl bg-light px-3 py-2 text-[11px] text-dark/70">
                                    {{ file }}
                                    <i class="fi fi-rr-check-circle text-success leading-none"></i>
                                </li>
                            </ul>
                            <div class="flex items-center justify-between rounded-xl bg-dominant-50 px-3 py-2 text-[11px] font-semibold text-dominant-700">
                                اولویت
                                <span class="flex gap-1"><span class="rounded-md bg-white px-2 py-0.5">عادی</span><span class="rounded-md bg-dominant-500 px-2 py-0.5 text-white">اورژانسی</span></span>
                            </div>
                        </div>

                        <div v-else-if="step.mock === 'doctor'" class="space-y-3">
                            <div v-for="(doctor, i) in [{ name: 'دکتر آرمان صادقی', spec: 'رادیولوژیست · MRI و CT', shift: true }, { name: 'دکتر نگار کریمی', spec: 'رادیولوژیست · سونوگرافی', shift: false }]" :key="doctor.name" :class="i === 0 ? 'border-dominant-500' : 'border-transparent'" class="flex items-center gap-3 rounded-2xl bg-white border-2 p-4">
                                <span class="w-11 h-11 rounded-full bg-dark text-white flex items-center justify-center"><i class="fi fi-rr-user-md leading-none"></i></span>
                                <div class="flex-1">
                                    <p class="text-xs font-bold text-dark">{{ doctor.name }}</p>
                                    <p class="text-[10px] text-dark/50">{{ doctor.spec }}</p>
                                </div>
                                <span v-if="doctor.shift" class="flex items-center gap-1.5 rounded-full bg-complement-50 px-2.5 py-1 text-[10px] font-semibold text-complement-700"><span class="w-1.5 h-1.5 rounded-full bg-success"></span>در شیفت</span>
                                <span v-else class="text-[10px] text-dark/40">شیفت بعدی: ۱۸:۰۰</span>
                            </div>
                            <p class="text-center text-[11px] text-dark/50">یا <span class="font-semibold text-dominant-500">انتخاب خودکار</span> پزشکِ در شیفت</p>
                        </div>

                        <div v-else class="mx-auto w-full max-w-[280px] rounded-[30px] bg-dark p-3">
                            <div class="rounded-[22px] bg-white p-4 space-y-3 min-h-[230px]">
                                <p class="text-center text-[10px] text-dark/40">رادیکال</p>
                                <div class="landing-bubble rounded-2xl rounded-tr-md bg-light px-3 py-2.5 text-[11px] leading-5 text-dark">درخواست شما ثبت شد. شماره پرونده: ۲۶۴۹۵۸</div>
                                <div class="landing-bubble rounded-2xl rounded-tr-md bg-light px-3 py-2.5 text-[11px] leading-5 text-dark">پرداخت فاکتور ۰۰۰۶۹ با موفقیت انجام شد. پرونده به پزشک ارجاع شد.</div>
                                <div class="landing-bubble rounded-2xl rounded-tr-md bg-dominant-500 px-3 py-2.5 text-[11px] leading-5 text-white">گزارش پرونده ۲۶۴۹۵۸ آماده شد. برای مشاهده به پنل مراجعه کنید.</div>
                            </div>
                        </div>
                    </div>
                </li>
            </ol>
        </div>
    </section>
</template>