feat: add landing page components including FAQ, features, footer, header, hero, modalities, steps, and section title

2026-09-21 04:32:59 +03:30
parent 1e599b917b
commit 5f19f82f86
41 changed files with 1518 additions and 84 deletions
@@ -0,0 +1,34 @@
+<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>