feat: add landing page components including FAQ, features, footer, header, hero, modalities, steps, and section title
This commit is contained in:
@@ -0,0 +1,120 @@
|
||||
<script setup>
|
||||
import LandingSectionTitle from './LandingSectionTitle.vue'
|
||||
|
||||
const steps = [
|
||||
{
|
||||
number: '۰۱',
|
||||
title: 'پروفایل پت را بسازید',
|
||||
description: 'نام، گونه، نژاد، سن و وزن؛ یک‌بار ثبت می‌کنید و برای همه‌ی درخواست‌های بعدی آماده است. هر پت پرونده‌ی مستقل خودش را دارد.',
|
||||
mock: 'pet'
|
||||
},
|
||||
{
|
||||
number: '۰۲',
|
||||
title: 'تصاویر را آپلود کنید',
|
||||
description: 'نوع تصویربرداری را انتخاب کنید، فایل اسکن و سوابق قبلی را بکشید و رها کنید. اگر عجله دارید، اولویت اورژانسی بگذارید.',
|
||||
mock: 'upload'
|
||||
},
|
||||
{
|
||||
number: '۰۳',
|
||||
title: 'رادیولوژیست را انتخاب کنید',
|
||||
description: 'پزشک مورد اعتمادتان را از لیست انتخاب کنید، یا بگذارید سیستم رادیولوژیستِ در شیفت را همان لحظه به پرونده اختصاص دهد.',
|
||||
mock: 'doctor'
|
||||
},
|
||||
{
|
||||
number: '۰۴',
|
||||
title: 'پیامک بگیرید، گزارش را بخوانید',
|
||||
description: 'به‌محض ثبت گزارش، پیامک می‌گیرید. گزارش کامل با تصاویر پیوست در پنل شماست؛ بدون تماس، بدون پیگیری.',
|
||||
mock: 'sms'
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section id="how-it-works" class="bg-white py-20 lg:py-28 scroll-mt-20">
|
||||
<div class="container max-w-7xl px-4 sm:px-6">
|
||||
<LandingSectionTitle
|
||||
eyebrow="چطور کار می‌کند"
|
||||
title="از عکس تا گزارش، چهار قدم"
|
||||
description="همان مسیری که در پنل طی می‌کنید؛ نه بیشتر."
|
||||
/>
|
||||
|
||||
<ol class="landing-reveal relative mt-16 space-y-10 lg:space-y-0">
|
||||
<span class="landing-timeline-line hidden lg:block absolute right-1/2 translate-x-1/2 top-0 bottom-0 w-0.5 bg-dominant-100" aria-hidden="true"></span>
|
||||
|
||||
<li
|
||||
v-for="(step, index) in steps"
|
||||
:key="step.number"
|
||||
class="relative grid lg:grid-cols-2 gap-8 lg:gap-24 items-center lg:py-10"
|
||||
>
|
||||
<span class="hidden lg:flex absolute right-1/2 translate-x-1/2 w-12 h-12 items-center justify-center rounded-full bg-dominant-500 text-white text-sm font-bold ring-8 ring-white" aria-hidden="true">{{ step.number }}</span>
|
||||
|
||||
<div :class="index % 2 === 0 ? 'lg:order-1 lg:pl-6' : 'lg:order-2 lg:pr-6'">
|
||||
<span class="lg:hidden inline-flex w-10 h-10 items-center justify-center rounded-full bg-dominant-500 text-white text-xs font-bold">{{ step.number }}</span>
|
||||
<h3 class="mt-4 lg:mt-0 text-xl sm:text-2xl font-extrabold text-dark">{{ step.title }}</h3>
|
||||
<p class="mt-3 text-sm sm:text-base leading-8 text-dark/60">{{ step.description }}</p>
|
||||
</div>
|
||||
|
||||
<div :class="index % 2 === 0 ? 'lg:order-2' : 'lg:order-1'" class="rounded-[28px] bg-light border-2 border-dominant-50 p-5 sm:p-7" aria-hidden="true">
|
||||
<div v-if="step.mock === 'pet'" class="rounded-2xl bg-white p-5 space-y-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-12 h-12 rounded-2xl bg-dominant-50 text-dominant-500 flex items-center justify-center text-xl"><i class="fi fi-rr-cat leading-none"></i></span>
|
||||
<div class="flex-1 space-y-1.5">
|
||||
<span class="block h-2 w-1/3 rounded-full bg-dark/10"></span>
|
||||
<span class="block h-2 w-1/5 rounded-full bg-dark/5"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3 pt-2">
|
||||
<div v-for="field in ['نام: پیشی', 'گونه: گربه', 'سن: ۳ سال', 'وزن: ۴.۲ کیلو']" :key="field" class="rounded-xl border border-dominant-50 px-3 py-2.5 text-xs text-dark/70">{{ field }}</div>
|
||||
</div>
|
||||
<div class="flex justify-end pt-1">
|
||||
<span class="rounded-lg bg-dominant-500 px-4 py-2 text-[11px] font-semibold text-white">ذخیره‌ی پروفایل</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="step.mock === 'upload'" class="rounded-2xl bg-white p-5 space-y-3">
|
||||
<div class="flex gap-2">
|
||||
<span v-for="(modality, i) in ['MRI', 'سی‌تی', 'سونو', 'اکو']" :key="modality" :class="i === 0 ? 'bg-dominant-500 text-white' : 'bg-dominant-50 text-dark/60'" class="rounded-full px-3 py-1 text-[11px] font-semibold">{{ modality }}</span>
|
||||
</div>
|
||||
<div class="rounded-2xl border-2 border-dashed border-dominant-200 bg-light/60 p-5 text-center">
|
||||
<i class="fi fi-rr-cloud-upload text-2xl text-dominant-500 leading-none"></i>
|
||||
<p class="mt-2 text-xs font-semibold text-dark">فایل‌ها را اینجا رها کنید</p>
|
||||
</div>
|
||||
<ul class="space-y-2">
|
||||
<li v-for="file in ['Pishi_MRI_T2.zip · ۴۸ MB', 'سابقه‌ی آزمایش خون.pdf']" :key="file" class="flex items-center justify-between rounded-xl bg-light px-3 py-2 text-[11px] text-dark/70">
|
||||
{{ file }}
|
||||
<i class="fi fi-rr-check-circle text-success leading-none"></i>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex items-center justify-between rounded-xl bg-dominant-50 px-3 py-2 text-[11px] font-semibold text-dominant-700">
|
||||
اولویت
|
||||
<span class="flex gap-1"><span class="rounded-md bg-white px-2 py-0.5">عادی</span><span class="rounded-md bg-dominant-500 px-2 py-0.5 text-white">اورژانسی</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="step.mock === 'doctor'" class="space-y-3">
|
||||
<div v-for="(doctor, i) in [{ name: 'دکتر آرمان صادقی', spec: 'رادیولوژیست · MRI و CT', shift: true }, { name: 'دکتر نگار کریمی', spec: 'رادیولوژیست · سونوگرافی', shift: false }]" :key="doctor.name" :class="i === 0 ? 'border-dominant-500' : 'border-transparent'" class="flex items-center gap-3 rounded-2xl bg-white border-2 p-4">
|
||||
<span class="w-11 h-11 rounded-full bg-dark text-white flex items-center justify-center"><i class="fi fi-rr-user-md leading-none"></i></span>
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-bold text-dark">{{ doctor.name }}</p>
|
||||
<p class="text-[10px] text-dark/50">{{ doctor.spec }}</p>
|
||||
</div>
|
||||
<span v-if="doctor.shift" class="flex items-center gap-1.5 rounded-full bg-complement-50 px-2.5 py-1 text-[10px] font-semibold text-complement-700"><span class="w-1.5 h-1.5 rounded-full bg-success"></span>در شیفت</span>
|
||||
<span v-else class="text-[10px] text-dark/40">شیفت بعدی: ۱۸:۰۰</span>
|
||||
</div>
|
||||
<p class="text-center text-[11px] text-dark/50">یا <span class="font-semibold text-dominant-500">انتخاب خودکار</span> پزشکِ در شیفت</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="mx-auto w-full max-w-[280px] rounded-[30px] bg-dark p-3">
|
||||
<div class="rounded-[22px] bg-white p-4 space-y-3 min-h-[230px]">
|
||||
<p class="text-center text-[10px] text-dark/40">رادیکال</p>
|
||||
<div class="landing-bubble rounded-2xl rounded-tr-md bg-light px-3 py-2.5 text-[11px] leading-5 text-dark">درخواست شما ثبت شد. شماره پرونده: ۲۶۴۹۵۸</div>
|
||||
<div class="landing-bubble rounded-2xl rounded-tr-md bg-light px-3 py-2.5 text-[11px] leading-5 text-dark">پرداخت فاکتور ۰۰۰۶۹ با موفقیت انجام شد. پرونده به پزشک ارجاع شد.</div>
|
||||
<div class="landing-bubble rounded-2xl rounded-tr-md bg-dominant-500 px-3 py-2.5 text-[11px] leading-5 text-white">گزارش پرونده ۲۶۴۹۵۸ آماده شد. برای مشاهده به پنل مراجعه کنید.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
Reference in New Issue
Block a user