35 lines
2.4 KiB
Vue
35 lines
2.4 KiB
Vue
<script setup>
|
||
import LandingSectionTitle from './LandingSectionTitle.vue'
|
||
|
||
const rows = [
|
||
{ label: 'جابه‌جایی پت', before: 'سفر پراسترس تا کلینیک', after: 'پت در خانه می‌ماند' },
|
||
{ label: 'دسترسی به رادیولوژیست', before: 'وابسته به شهر و کلینیک', after: 'رادیولوژیست در شیفت، از هر جای ایران' },
|
||
{ label: 'زمان دریافت گزارش', before: 'روزها و تماس‌های پیگیری', after: '۲۴ ساعت عادی · ۳ ساعت اورژانسی' },
|
||
{ label: 'خبردار شدن', before: 'باید خودتان زنگ بزنید', after: 'پیامک در هر مرحله' },
|
||
{ label: 'نگهداری سوابق', before: 'کاغذ و CD گم‌شدنی', after: 'پرونده‌ی دیجیتال دائمی' },
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<section class="bg-light py-20 lg:py-28">
|
||
<div class="container max-w-5xl px-4 sm:px-6">
|
||
<LandingSectionTitle eyebrow="چرا رادیکال" title="همان گزارش تخصصی، بدون دردسرهایش" />
|
||
|
||
<div class="landing-reveal mt-14 overflow-hidden rounded-[28px] border-2 border-dominant-50 bg-white">
|
||
<div class="grid grid-cols-[1.1fr_1fr_1fr] bg-dominant-50/40 text-xs sm:text-sm font-bold">
|
||
<span class="px-4 sm:px-6 py-4 text-dark/50">مقایسه</span>
|
||
<span class="px-4 sm:px-6 py-4 text-dark/50">مراجعه‌ی حضوری</span>
|
||
<span class="px-4 sm:px-6 py-4 bg-dominant-500 text-white flex items-center gap-2"><i class="fi fi-rr-paw leading-none text-[11px]"></i>رادیکال</span>
|
||
</div>
|
||
<dl>
|
||
<div v-for="row in rows" :key="row.label" class="grid grid-cols-[1.1fr_1fr_1fr] border-t border-dominant-50 text-xs sm:text-sm">
|
||
<dt class="px-4 sm:px-6 py-4 font-bold text-dark">{{ row.label }}</dt>
|
||
<dd class="px-4 sm:px-6 py-4 text-dark/50 flex items-start gap-2"><i class="fi fi-rr-cross-small text-danger leading-none mt-1"></i>{{ row.before }}</dd>
|
||
<dd class="px-4 sm:px-6 py-4 bg-dominant-50/50 font-semibold text-dark flex items-start gap-2"><i class="fi fi-rr-check text-success leading-none mt-1 text-[11px]"></i>{{ row.after }}</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|