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,75 @@
+<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>