feat: add landing page components including FAQ, features, footer, header, hero, modalities, steps, and section title

This commit is contained in:
2026-09-21 04:32:59 +03:30
parent 1e599b917b
commit 5f19f82f86
41 changed files with 1518 additions and 84 deletions
@@ -45,44 +45,38 @@ const menuItems = [
</script>
<template>
<header class="grid items-center
shadow-client-gray/10 grid-cols-2a pe-4 justify-between !ps-[16rem] max-sm:!ps-4 fixed top-0 left-0 right-0 z-20 w-full h-[4.5rem] bg-white">
<div class="grid grid-cols-2a justify-start items-center gap-4">
<div class="grid grid-cols-1 max-sm:!grid-cols-2a justify-start items-center">
<Button
icon="fi-rr-menu-burger"
class="!hidden !invisible !px-0 !w-0 !h-0 max-sm:!w-10 max-sm:!h-10 max-sm:!visible max-sm:!block items-center !border-dominant-50"
pt:icon="flex !text-dominant-300 justify-center items-center"
variant="outlined"
size="large"
@click="toggleSidebar"
/>
</div>
<div class="grid grid-cols-1 h-[4rem] content-center justify-start items-center">
<UiInput
placeholder="جستجو سریع: نام سرپرست، نام حیوان و یا شماره پرونده"
variant="outlined"
prefixClasses="!border-dominant-50"
class="!w-[30rem] max-lg:!w-[22rem] max-md:!w-[26rem] max-sm:!w-[15rem] max-xs:!w-[14rem]"
prefixColor="dominant-700"
iconStart="svg:SearchSvg"
wrapperBorderClass="!border-dominant-50"
customClass="placeholder:!text-dominant-300 !border-dominant-50 !font-normal !text-[11px]"
/>
</div>
</div>
<div class="flex items-center gap-4">
<header class="flex items-center gap-3 sm:gap-4 shadow-client-gray/10 px-4 lg:!ps-[16rem] fixed top-0 left-0 right-0 z-20 w-full h-[4.5rem] bg-white">
<Button
icon="fi-rr-menu-burger"
class="lg:!hidden !w-10 !h-10 shrink-0 !border-dominant-50"
pt:icon="flex !text-dominant-300 justify-center items-center"
variant="outlined"
size="large"
@click="toggleSidebar"
/>
<div class="flex-1 min-w-0 max-w-[30rem]">
<UiInput
placeholder="جستجو سریع: نام سرپرست، نام حیوان و یا شماره پرونده"
variant="outlined"
prefixClasses="!border-dominant-50"
class="!w-full"
prefixColor="dominant-700"
iconStart="svg:SearchSvg"
wrapperBorderClass="!border-dominant-50"
customClass="placeholder:!text-dominant-300 !border-dominant-50 !font-normal !text-[11px] truncate"
/>
</div>
<div class="flex items-center gap-2 sm:gap-4 shrink-0 me-auto">
<Link href="/dashboard/wallet" class="flex items-center gap-2.5 rounded-lg bg-dominant-light border border-dominant-50 ps-1.5 pe-3 py-1.5 transition-colors hover:border-dominant-100">
<span class="flex items-center justify-center w-8 h-8 rounded-lg bg-white border border-dominant-50 text-dominant-400">
<i class="fi fi-rr-wallet flex text-[15px]"></i>
</span>
<span class="flex flex-col max-sm:hidden">
<span class="hidden md:flex flex-col">
<span class="text-[10px] font-normal text-dominant-200">موجودی کیف پول</span>
<span class="text-[12px] font-bold text-dominant-500">{{ walletBalance }} <span class="text-[10px] font-normal text-dominant-300">تومان</span></span>
</span>
</Link>
<div class="flex items-center justify-center border-l-[1px] !border-dominant-50 pl-4">
<div class="hidden sm:flex items-center justify-center border-l-[1px] !border-dominant-50 pl-4">
<GlobalSvg />
</div>
<div ref="userMenuRef" class="relative">
@@ -91,7 +85,7 @@ const menuItems = [
<img v-if="globalStore.current_user.profile_url" :src="globalStore.current_user.profile_url" alt="تصویر پروفایل" class="w-full h-full object-cover" />
<i v-else class="fi fi-rr-user flex text-sm text-dominant-300"></i>
</span>
<span class="text-dominant-300 text-[12px] font-normal max-sm:hidden">
<span class="text-dominant-300 text-[12px] font-normal hidden md:inline">
{{ globalStore.current_user.fullname }}
</span>
<i class="fi fi-rr-angle-small-down flex text-sm text-dominant-300 transition-transform duration-200" :class="{ 'rotate-180': userMenuOpen }"></i>