76 lines
4.8 KiB
Vue
76 lines
4.8 KiB
Vue
<script setup>
|
||
import { Link } from '@inertiajs/inertia-vue3'
|
||
import { Inertia } from '@inertiajs/inertia'
|
||
import UiButton from '../ui/UiButton.vue'
|
||
|
||
defineProps({
|
||
user: {
|
||
type: Object,
|
||
default: null
|
||
}
|
||
})
|
||
|
||
const facts = [
|
||
{ value: '۵', label: 'نوع تصویربرداری، از MRI تا رادیولوژی' },
|
||
{ value: '۳ ساعت', label: 'مهلت گزارش برای پرونده‌های اورژانسی' },
|
||
{ value: '۳ پیامک', label: 'ثبت، پرداخت، آماده شدن گزارش' },
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<section class="relative min-h-[92svh] flex flex-col overflow-hidden bg-dark text-white">
|
||
<img
|
||
src="@/images/landing-hero.jpg"
|
||
alt="یک گربه و یک سگ کنار هم روی چمن"
|
||
class="landing-kenburns absolute inset-0 w-full h-full object-cover object-[30%_center] lg:object-[15%_center]"
|
||
>
|
||
<div class="absolute inset-0 bg-gradient-to-l from-dark via-dark/85 via-45% to-dark/25" aria-hidden="true"></div>
|
||
<div class="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-dark via-dark/70 to-transparent" aria-hidden="true"></div>
|
||
|
||
<div class="container max-w-7xl px-4 sm:px-6 relative flex-1 flex flex-col justify-end pt-16 pb-10 lg:pb-14">
|
||
<div class="max-w-3xl">
|
||
<p class="landing-reveal text-xs sm:text-sm font-semibold tracking-wide text-dominant-300">
|
||
تله‌رادیولوژی دامپزشکی رادیکال
|
||
</p>
|
||
|
||
<h1 class="mt-5 text-[2.6rem] leading-[1.25] sm:text-6xl lg:text-[5.2rem] lg:leading-[1.2] font-black">
|
||
<span class="landing-reveal landing-reveal--1 block">اون که نگرانشی،</span>
|
||
<span class="landing-reveal landing-reveal--2 block">لازم نیست از خونه</span>
|
||
<span class="landing-reveal landing-reveal--3 block">بیرون بره<span class="text-dominant-300">.</span></span>
|
||
</h1>
|
||
|
||
<p class="landing-reveal landing-reveal--4 mt-7 max-w-xl text-base sm:text-lg leading-8 text-white/70">
|
||
تصاویر MRI، سی‌تی‌اسکن یا سونوگرافی پت‌تان را همین‌جا آپلود کنید؛ رادیولوژیست دامپزشکی گزارش می‌نویسد و شما با پیامک خبردار می‌شوید.
|
||
</p>
|
||
|
||
<div class="landing-reveal landing-reveal--5 mt-9 flex flex-wrap items-center gap-6">
|
||
<UiButton v-if="user" label="رفتن به پنل کاربری" severity="dominant" size="large" icon="fi fi-rr-arrow-small-left" icon-position="end" @click="Inertia.visit(route('dashboard.index'))" />
|
||
<UiButton v-else label="ثبت اولین درخواست" severity="dominant" size="large" icon="fi fi-rr-arrow-small-left" icon-position="end" @click="Inertia.visit(route('register.chooseType'))" />
|
||
<Link v-if="!user" :href="route('login')" class="text-sm font-semibold text-white/80 underline underline-offset-8 decoration-white/30 hover:text-white hover:decoration-dominant-300 transition-colors duration-200">
|
||
قبلاً حساب دارم
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
<dl class="landing-reveal landing-reveal--5 mt-14 lg:mt-20 grid sm:grid-cols-3 border-t border-white/15 pt-6 gap-6 sm:gap-0 sm:divide-x sm:divide-x-reverse sm:divide-white/15">
|
||
<div v-for="fact in facts" :key="fact.label" class="sm:px-6 first:pr-0 last:pl-0">
|
||
<dt class="text-2xl sm:text-3xl font-black text-white">{{ fact.value }}</dt>
|
||
<dd class="mt-1 text-xs sm:text-sm leading-6 text-white/55">{{ fact.label }}</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
|
||
<a href="#how-it-works" class="landing-spin absolute top-28 left-6 sm:left-10 hidden md:flex w-28 h-28 items-center justify-center rounded-full bg-dark/50 backdrop-blur-sm border border-white/15 text-white/85 hover:text-white hover:border-white/40 transition-colors duration-300" aria-label="ببینید چطور کار می‌کند">
|
||
<svg viewBox="0 0 100 100" class="absolute inset-0 w-full h-full" aria-hidden="true">
|
||
<defs>
|
||
<path id="landing-hero-circle" d="M50,50 m-38,0 a38,38 0 1,1 76,0 a38,38 0 1,1 -76,0" />
|
||
</defs>
|
||
<text class="fill-current text-[9px] font-semibold tracking-[0.25em]">
|
||
<textPath href="#landing-hero-circle">گزارش تخصصی · پیامک · بدون مراجعه ·</textPath>
|
||
</text>
|
||
</svg>
|
||
<i class="fi fi-rr-arrow-small-down text-lg leading-none"></i>
|
||
</a>
|
||
</section>
|
||
</template>
|