feat: add landing page components including FAQ, features, footer, header, hero, modalities, steps, and section title
This commit is contained in:
@@ -0,0 +1,72 @@
|
||||
<script setup>
|
||||
import LandingSectionTitle from './LandingSectionTitle.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section id="features" class="bg-light py-20 lg:py-28 scroll-mt-20">
|
||||
<div class="container max-w-7xl px-4 sm:px-6">
|
||||
<LandingSectionTitle
|
||||
eyebrow="امکانات"
|
||||
title="ساخته‌شده برای کسی که نگران پتش است، نه برای کلینیک"
|
||||
description="بدون اصطلاحات تخصصی، بدون فرم‌های طولانی. فقط چیزهایی که یک سرپرست واقعاً لازم دارد."
|
||||
/>
|
||||
|
||||
<div class="mt-14 grid gap-5 md:grid-cols-2 lg:grid-cols-4 lg:grid-rows-2">
|
||||
<article class="landing-reveal lg:col-span-2 lg:row-span-2 relative overflow-hidden rounded-[28px] bg-dark p-7 sm:p-9 text-white">
|
||||
<div class="landing-blob absolute -bottom-24 -left-24 w-72 h-72 bg-dominant-500/40 pointer-events-none" aria-hidden="true"></div>
|
||||
<div class="relative">
|
||||
<span class="inline-flex w-12 h-12 items-center justify-center rounded-2xl bg-white/10 text-xl"><i class="fi fi-rr-comment-alt-dots leading-none"></i></span>
|
||||
<h3 class="mt-6 text-2xl font-extrabold">در هر مرحله پیامک می‌گیرید</h3>
|
||||
<p class="mt-3 max-w-md text-sm leading-7 text-white/65">ثبت درخواست، پرداخت موفق و آماده شدن گزارش؛ سه پیامک، صفر پیگیری. متن گزارش هیچ‌وقت در پیامک نیست — فقط خبرش.</p>
|
||||
</div>
|
||||
<div class="relative mt-8 mr-auto w-full max-w-[260px] rounded-[26px] bg-white/10 p-3" aria-hidden="true">
|
||||
<div class="rounded-[20px] bg-white p-3 space-y-2.5">
|
||||
<div class="landing-bubble rounded-xl rounded-tr-sm bg-light px-3 py-2 text-[11px] leading-5 text-dark">درخواست شما ثبت شد. شماره پرونده: ۲۶۴۹۵۸</div>
|
||||
<div class="landing-bubble rounded-xl rounded-tr-sm bg-light px-3 py-2 text-[11px] leading-5 text-dark">پرداخت فاکتور ۰۰۰۶۹ به مبلغ ۱٬۲۰۰٬۰۰۰ تومان انجام شد.</div>
|
||||
<div class="landing-bubble rounded-xl rounded-tr-sm bg-dominant-500 px-3 py-2 text-[11px] leading-5 text-white">گزارش پرونده ۲۶۴۹۵۸ آماده شد.</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="landing-reveal landing-reveal--1 lg:col-span-2 rounded-[28px] bg-white border-2 border-dominant-50 p-7 flex flex-col sm:flex-row sm:items-center gap-6">
|
||||
<div class="flex-1">
|
||||
<span class="inline-flex w-12 h-12 items-center justify-center rounded-2xl bg-dominant-50 text-dominant-500 text-xl"><i class="fi fi-rr-time-fast leading-none"></i></span>
|
||||
<h3 class="mt-5 text-lg font-extrabold text-dark">عادی یا اورژانسی؟ شما تعیین می‌کنید</h3>
|
||||
<p class="mt-2 text-sm leading-7 text-dark/60">مهلت بررسی با اولویت عادی ۲۴ ساعت است؛ با اورژانسی، ۳ ساعت.</p>
|
||||
</div>
|
||||
<div class="relative w-full sm:w-[200px] shrink-0 rounded-full bg-light p-1.5 grid grid-cols-2 text-center text-xs font-bold" aria-hidden="true">
|
||||
<span class="landing-toggle-thumb absolute top-1.5 bottom-1.5 right-1.5 w-[calc(50%-6px)] rounded-full bg-dominant-500"></span>
|
||||
<span class="relative z-10 py-2.5 text-white mix-blend-difference">عادی · ۲۴h</span>
|
||||
<span class="relative z-10 py-2.5 text-white mix-blend-difference">اورژانسی · ۳h</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="landing-reveal landing-reveal--2 rounded-[28px] bg-white border-2 border-dominant-50 p-7">
|
||||
<span class="inline-flex w-12 h-12 items-center justify-center rounded-2xl bg-dominant-50 text-dominant-500 text-xl"><i class="fi fi-rr-wallet leading-none"></i></span>
|
||||
<h3 class="mt-5 text-lg font-extrabold text-dark">پرداخت شفاف، برگشت کامل</h3>
|
||||
<p class="mt-2 text-sm leading-7 text-dark/60">قیمت هر خدمت قبل از پرداخت مشخص است. اگر پزشک پرونده را رد کند، کل مبلغ به کیف پول برمی‌گردد.</p>
|
||||
</article>
|
||||
|
||||
<article class="landing-reveal landing-reveal--3 rounded-[28px] bg-dominant-500 p-7 text-white">
|
||||
<span class="inline-flex w-12 h-12 items-center justify-center rounded-2xl bg-white/15 text-xl"><i class="fi fi-rr-lock-alt leading-none"></i></span>
|
||||
<h3 class="mt-5 text-lg font-extrabold">گزارش فقط برای شما</h3>
|
||||
<p class="mt-2 text-sm leading-7 text-white/70">گزارش و تصاویر فقط با ورود به حساب شما و توسط پزشک پرونده قابل مشاهده‌اند؛ هیچ لینک عمومی وجود ندارد.</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<ul class="mt-5 grid gap-5 md:grid-cols-3">
|
||||
<li v-for="item in [
|
||||
{ icon: 'fi fi-rr-document', title: 'آرشیو دائمی پرونده', text: 'همه‌ی تصاویر و گزارش‌های هر پت، مرتب و قابل دانلود.' },
|
||||
{ icon: 'fi fi-rr-stethoscope', title: 'انتخاب پزشک یا شیفت خودکار', text: 'رادیولوژیست دلخواه، یا اختصاص فوری به پزشکِ در شیفت.' },
|
||||
{ icon: 'fi fi-rr-badge-check', title: 'رد پرونده با دلیل', text: 'اگر تصویر قابل گزارش نباشد، دلیلش را می‌بینید و هزینه برمی‌گردد.' },
|
||||
]" :key="item.title" class="landing-reveal flex items-start gap-4 rounded-2xl bg-white/60 border border-dominant-50 px-5 py-4">
|
||||
<i :class="item.icon" class="mt-1 text-dominant-500 leading-none"></i>
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-dark">{{ item.title }}</h3>
|
||||
<p class="mt-1 text-xs leading-6 text-dark/55">{{ item.text }}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
Reference in New Issue
Block a user