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,54 @@
+<script setup>
+import LandingSectionTitle from './LandingSectionTitle.vue'
+
+const faqs = [
+    {
+        question: 'برای ثبت‌نام به چه چیزی نیاز دارم؟',
+        answer: 'فقط شماره موبایل. با کد تأیید پیامکی وارد می‌شوید و به‌عنوان «سرپرست» ثبت‌نام می‌کنید. نیازی به مدارک پزشکی یا پروانه نیست.'
+    },
+    {
+        question: 'تصاویر را با چه فرمتی می‌توانم بفرستم؟',
+        answer: 'تصاویر و فایل‌هایی که مرکز تصویربرداری به شما داده (عکس، PDF یا فایل فشرده) را می‌توانید مستقیم در فرم درخواست بارگذاری کنید. سوابق قبلی پت را هم می‌توانید جداگانه ضمیمه کنید.'
+    },
+    {
+        question: 'گزارش چقدر طول می‌کشد؟',
+        answer: 'با اولویت عادی، مهلت بررسی پرونده ۲۴ ساعت پس از پرداخت است و با اولویت اورژانسی ۳ ساعت. اولویت را هنگام ثبت درخواست انتخاب می‌کنید.'
+    },
+    {
+        question: 'گزارش را چطور دریافت می‌کنم؟',
+        answer: 'به‌محض آماده شدن گزارش، پیامک دریافت می‌کنید و گزارش کامل همراه با پیوست‌های پزشک در بخش «پرونده‌ها»ی پنل شما قابل مشاهده و دانلود است. برای حفظ حریم خصوصی، متن گزارش هرگز در پیامک ارسال نمی‌شود.'
+    },
+    {
+        question: 'اگر پزشک پرونده را رد کند چه می‌شود؟',
+        answer: 'اگر تصاویر قابل گزارش‌دهی نباشند، پزشک با ذکر دلیل پرونده را رد می‌کند و مبلغ فاکتور به‌صورت کامل به کیف پول شما بازگردانده می‌شود.'
+    },
+]
+</script>
+
+<template>
+    <section id="faq" class="bg-white py-20 lg:py-28 scroll-mt-20">
+        <div class="container max-w-7xl px-4 sm:px-6 grid lg:grid-cols-[1fr_1.6fr] gap-12 lg:gap-20 items-start">
+            <div class="lg:sticky lg:top-28">
+                <LandingSectionTitle class="!text-right !mx-0" eyebrow="سوالات متداول" title="چیزهایی که سرپرستان قبل از اولین درخواست می‌پرسند" />
+                <p class="landing-reveal landing-reveal--2 mt-6 text-sm leading-7 text-dark/55">جوابتان را پیدا نکردید؟ بعد از ورود، از داخل پنل با ما در تماس باشید.</p>
+            </div>
+
+            <div class="space-y-3">
+                <details
+                    v-for="(faq, index) in faqs"
+                    :key="faq.question"
+                    :class="`landing-reveal--${Math.min(index + 1, 5)}`"
+                    class="landing-faq landing-reveal group rounded-2xl bg-light border-2 border-transparent open:border-dominant-100 open:bg-white transition-colors duration-300"
+                >
+                    <summary class="flex items-center justify-between gap-4 cursor-pointer list-none px-6 py-5 text-sm sm:text-base font-bold text-dark">
+                        {{ faq.question }}
+                        <span class="landing-faq-icon shrink-0 w-8 h-8 rounded-full bg-white border border-dominant-50 flex items-center justify-center text-dominant-500 transition-transform duration-300">
+                            <i class="fi fi-rr-plus text-xs leading-none"></i>
+                        </span>
+                    </summary>
+                    <p class="px-6 pb-6 text-sm leading-7 text-dark/60">{{ faq.answer }}</p>
+                </details>
+            </div>
+        </div>
+    </section>
+</template>