feat: add landing page components including FAQ, features, footer, header, hero, modalities, steps, and section title
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user