56 lines
3.3 KiB
Vue
56 lines
3.3 KiB
Vue
<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>
|