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,55 @@
+<script setup>
+import LandingSectionTitle from './LandingSectionTitle.vue'
+
+const modalities = [
+    { index: '۰۱', title: 'MRI', description: 'مغز، نخاع و بافت‌های نرم؛ برای تشنج، لنگش عصبی و توده‌ها' },
+    { index: '۰۲', title: 'سی‌تی‌اسکن', description: 'استخوان، جمجمه، قفسه‌ی سینه و شکم با جزئیات مقطعی' },
+    { index: '۰۳', title: 'سونوگرافی', description: 'اندام‌های شکمی، بارداری، کلیه و کبد' },
+    { index: '۰۴', title: 'اکوکاردیوگرافی', description: 'ساختار و عملکرد قلب، دریچه‌ها و جریان خون' },
+    { index: '۰۵', title: 'رادیولوژی', description: 'شکستگی، مفاصل، قفسه‌ی سینه و اجسام خارجی' },
+]
+
+const species = [
+    { icon: 'fi fi-rr-dog', label: 'سگ' },
+    { icon: 'fi fi-rr-cat', label: 'گربه' },
+    { icon: 'fi fi-rr-rabbit', label: 'خرگوش' },
+    { icon: 'fi fi-rr-bird', label: 'پرنده' },
+    { icon: 'fi fi-rr-turtle', label: 'لاک‌پشت' },
+    { icon: 'fi fi-rr-fish', label: 'ماهی' },
+    { icon: 'fi fi-rr-paw', label: 'همستر و خوکچه' },
+]
+</script>
+
+<template>
+    <section id="modalities" 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.4fr] gap-12 lg:gap-20 items-start">
+            <div class="lg:sticky lg:top-28">
+                <LandingSectionTitle
+                    class="!text-right !mx-0"
+                    eyebrow="خدمات تصویربرداری"
+                    title="هر تصویری که دارید، جای خودش را دارد"
+                    description="تصویر را از هر مرکز تصویربرداری گرفته باشید فرقی نمی‌کند؛ فقط نوعش را انتخاب کنید."
+                />
+                <ul class="landing-reveal landing-reveal--2 mt-8 flex flex-wrap gap-2">
+                    <li v-for="item in species" :key="item.label" class="flex items-center gap-2 rounded-full bg-light border border-dominant-50 px-3.5 py-2 text-xs font-semibold text-dark/70">
+                        <i :class="item.icon" class="text-dominant-500 leading-none"></i>
+                        {{ item.label }}
+                    </li>
+                </ul>
+            </div>
+
+            <ol class="divide-y-2 divide-dominant-50 border-y-2 border-dominant-50">
+                <li
+                    v-for="(modality, index) in modalities"
+                    :key="modality.title"
+                    :class="`landing-reveal--${index + 1}`"
+                    class="landing-reveal group grid grid-cols-[3.5rem_1fr] sm:grid-cols-[5rem_11rem_1fr] items-center gap-4 py-6 transition-colors duration-300 hover:bg-white"
+                >
+                    <span class="text-3xl sm:text-4xl font-black text-dominant-100 transition-colors duration-300 group-hover:text-dominant-500">{{ modality.index }}</span>
+                    <h3 class="text-xl sm:text-2xl font-extrabold text-dark">{{ modality.title }}</h3>
+                    <p class="col-span-2 sm:col-span-1 text-sm leading-7 text-dark/55 sm:pl-4">{{ modality.description }}</p>
+                </li>
+            </ol>
+        </div>
+    </section>
+</template>