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

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

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

            <div class="mt-14 grid gap-5 md:grid-cols-2 lg:grid-cols-4 lg:grid-rows-2">
                <article class="landing-reveal lg:col-span-2 lg:row-span-2 relative overflow-hidden rounded-[28px] bg-dark p-7 sm:p-9 text-white">
                    <div class="landing-blob absolute -bottom-24 -left-24 w-72 h-72 bg-dominant-500/40 pointer-events-none" aria-hidden="true"></div>
                    <div class="relative">
                        <span class="inline-flex w-12 h-12 items-center justify-center rounded-2xl bg-white/10 text-xl"><i class="fi fi-rr-comment-alt-dots leading-none"></i></span>
                        <h3 class="mt-6 text-2xl font-extrabold">در هر مرحله پیامک می‌گیرید</h3>
                        <p class="mt-3 max-w-md text-sm leading-7 text-white/65">ثبت درخواست، پرداخت موفق و آماده شدن گزارش؛ سه پیامک، صفر پیگیری. متن گزارش هیچ‌وقت در پیامک نیست — فقط خبرش.</p>
                    </div>
                    <div class="relative mt-8 mr-auto w-full max-w-[260px] rounded-[26px] bg-white/10 p-3" aria-hidden="true">
                        <div class="rounded-[20px] bg-white p-3 space-y-2.5">
                            <div class="landing-bubble rounded-xl rounded-tr-sm bg-light px-3 py-2 text-[11px] leading-5 text-dark">درخواست شما ثبت شد. شماره پرونده: ۲۶۴۹۵۸</div>
                            <div class="landing-bubble rounded-xl rounded-tr-sm bg-light px-3 py-2 text-[11px] leading-5 text-dark">پرداخت فاکتور ۰۰۰۶۹ به مبلغ ۱٬۲۰۰٬۰۰۰ تومان انجام شد.</div>
                            <div class="landing-bubble rounded-xl rounded-tr-sm bg-dominant-500 px-3 py-2 text-[11px] leading-5 text-white">گزارش پرونده ۲۶۴۹۵۸ آماده شد.</div>
                        </div>
                    </div>
                </article>

                <article class="landing-reveal landing-reveal--1 lg:col-span-2 rounded-[28px] bg-white border-2 border-dominant-50 p-7 flex flex-col sm:flex-row sm:items-center gap-6">
                    <div class="flex-1">
                        <span class="inline-flex w-12 h-12 items-center justify-center rounded-2xl bg-dominant-50 text-dominant-500 text-xl"><i class="fi fi-rr-time-fast leading-none"></i></span>
                        <h3 class="mt-5 text-lg font-extrabold text-dark">عادی یا اورژانسی؟ شما تعیین می‌کنید</h3>
                        <p class="mt-2 text-sm leading-7 text-dark/60">مهلت بررسی با اولویت عادی ۲۴ ساعت است؛ با اورژانسی، ۳ ساعت.</p>
                    </div>
                    <div class="relative w-full sm:w-[200px] shrink-0 rounded-full bg-light p-1.5 grid grid-cols-2 text-center text-xs font-bold" aria-hidden="true">
                        <span class="landing-toggle-thumb absolute top-1.5 bottom-1.5 right-1.5 w-[calc(50%-6px)] rounded-full bg-dominant-500"></span>
                        <span class="relative z-10 py-2.5 text-white mix-blend-difference">عادی · ۲۴h</span>
                        <span class="relative z-10 py-2.5 text-white mix-blend-difference">اورژانسی · ۳h</span>
                    </div>
                </article>

                <article class="landing-reveal landing-reveal--2 rounded-[28px] bg-white border-2 border-dominant-50 p-7">
                    <span class="inline-flex w-12 h-12 items-center justify-center rounded-2xl bg-dominant-50 text-dominant-500 text-xl"><i class="fi fi-rr-wallet leading-none"></i></span>
                    <h3 class="mt-5 text-lg font-extrabold text-dark">پرداخت شفاف، برگشت کامل</h3>
                    <p class="mt-2 text-sm leading-7 text-dark/60">قیمت هر خدمت قبل از پرداخت مشخص است. اگر پزشک پرونده را رد کند، کل مبلغ به کیف پول برمی‌گردد.</p>
                </article>

                <article class="landing-reveal landing-reveal--3 rounded-[28px] bg-dominant-500 p-7 text-white">
                    <span class="inline-flex w-12 h-12 items-center justify-center rounded-2xl bg-white/15 text-xl"><i class="fi fi-rr-lock-alt leading-none"></i></span>
                    <h3 class="mt-5 text-lg font-extrabold">گزارش فقط برای شما</h3>
                    <p class="mt-2 text-sm leading-7 text-white/70">گزارش و تصاویر فقط با ورود به حساب شما و توسط پزشک پرونده قابل مشاهده‌اند؛ هیچ لینک عمومی وجود ندارد.</p>
                </article>
            </div>

            <ul class="mt-5 grid gap-5 md:grid-cols-3">
                <li v-for="item in [
                    { icon: 'fi fi-rr-document', title: 'آرشیو دائمی پرونده', text: 'همه‌ی تصاویر و گزارش‌های هر پت، مرتب و قابل دانلود.' },
                    { icon: 'fi fi-rr-stethoscope', title: 'انتخاب پزشک یا شیفت خودکار', text: 'رادیولوژیست دلخواه، یا اختصاص فوری به پزشکِ در شیفت.' },
                    { icon: 'fi fi-rr-badge-check', title: 'رد پرونده با دلیل', text: 'اگر تصویر قابل گزارش نباشد، دلیلش را می‌بینید و هزینه برمی‌گردد.' },
                ]" :key="item.title" class="landing-reveal flex items-start gap-4 rounded-2xl bg-white/60 border border-dominant-50 px-5 py-4">
                    <i :class="item.icon" class="mt-1 text-dominant-500 leading-none"></i>
                    <div>
                        <h3 class="text-sm font-bold text-dark">{{ item.title }}</h3>
                        <p class="mt-1 text-xs leading-6 text-dark/55">{{ item.text }}</p>
                    </div>
                </li>
            </ul>
        </div>
    </section>
</template>