create mainPage

This commit is contained in:
HAM!DREZA
2024-05-14 10:55:46 +03:30
parent 3692ec6f61
commit 80cf37d18b
25 changed files with 1131 additions and 47 deletions
+267
View File
@@ -0,0 +1,267 @@
<template>
<div class="flex justify-center">
<nav
class="fixed bg-white hidden md:block w-full rounded-b-2xl shadow-md z-[100]"
:class="{
'!hidden':
$route.path === '/signup' ||
$route.path === '/login' ||
$route.path === '/reset-password' ||
$route.path === '/new-password',
}"
>
<div
class="text-white bg-[#252731] flex justify-between items-center px-[1.25vw] h-[2.448vw]"
>
<div id="text" class="gap-x-[0.625vw] flex -ms-[0.052vw]">
<span class="p-[0.573vw] text-[0.938vw]">شینان</span>
<span class="p-[0.573vw] text-[0.938vw]">فروشگاه</span>
</div>
<div id="contact" class="flex gap-x-[0.833vw] me-[0.052vw]">
<span class="text-[0.833vw] flexBox gap-[0.5vw]">
<svg
width="1.042vw"
height="1.094vw"
viewBox="0 0 20 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.3077 15.7745C18.3077 16.0745 18.241 16.3829 18.0994 16.6829C17.9577 16.9829 17.7744 17.2662 17.5327 17.5329C17.1244 17.9829 16.6744 18.3079 16.166 18.5162C15.666 18.7245 15.1244 18.8329 14.541 18.8329C13.691 18.8329 12.7827 18.6329 11.8243 18.2245C10.866 17.8162 9.90768 17.2662 8.95768 16.5745C7.99935 15.8745 7.09102 15.0995 6.22435 14.2412C5.36602 13.3745 4.59102 12.4662 3.89935 11.5162C3.21602 10.5662 2.66602 9.6162 2.26602 8.67453C1.86602 7.72453 1.66602 6.8162 1.66602 5.94953C1.66602 5.38286 1.76602 4.8412 1.96602 4.3412C2.16602 3.83287 2.48268 3.3662 2.92435 2.94953C3.45768 2.42453 4.04102 2.1662 4.65768 2.1662C4.89102 2.1662 5.12435 2.2162 5.33268 2.3162C5.54935 2.4162 5.74102 2.5662 5.89102 2.78287L7.82435 5.50787C7.97435 5.7162 8.08268 5.90786 8.15768 6.0912C8.23268 6.2662 8.27435 6.4412 8.27435 6.59953C8.27435 6.79953 8.21602 6.99953 8.09935 7.1912C7.99102 7.38286 7.83268 7.58286 7.63268 7.78286L6.99935 8.4412C6.90768 8.53286 6.86602 8.6412 6.86602 8.77453C6.86602 8.8412 6.87435 8.89953 6.89102 8.9662C6.91602 9.03286 6.94102 9.08286 6.95768 9.13286C7.10768 9.40786 7.36602 9.7662 7.73268 10.1995C8.10768 10.6329 8.50768 11.0745 8.94102 11.5162C9.39102 11.9579 9.82435 12.3662 10.266 12.7412C10.6993 13.1079 11.0577 13.3579 11.341 13.5079C11.3827 13.5245 11.4327 13.5495 11.491 13.5745C11.5577 13.5995 11.6244 13.6079 11.6994 13.6079C11.841 13.6079 11.9494 13.5579 12.041 13.4662L12.6744 12.8412C12.8827 12.6329 13.0827 12.4745 13.2744 12.3745C13.466 12.2579 13.6577 12.1995 13.866 12.1995C14.0243 12.1995 14.191 12.2329 14.3744 12.3079C14.5577 12.3829 14.7494 12.4912 14.9577 12.6329L17.716 14.5912C17.9327 14.7412 18.0827 14.9162 18.1744 15.1245C18.2577 15.3329 18.3077 15.5412 18.3077 15.7745Z"
stroke="white"
stroke-width="1.5"
stroke-miterlimit="10"
/>
</svg>
تلفن: 67341</span
>
|
<span class="text-[0.833vw] flexBox gap-[0.5vw]">
<svg
width="1.042vw"
height="1.094vw"
viewBox="0 0 20 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.167 17.5833H5.83366C3.33366 17.5833 1.66699 16.3333 1.66699 13.4167V7.58333C1.66699 4.66667 3.33366 3.41667 5.83366 3.41667H14.167C16.667 3.41667 18.3337 4.66667 18.3337 7.58333V13.4167C18.3337 16.3333 16.667 17.5833 14.167 17.5833Z"
stroke="white"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M14.1663 8L11.558 10.0833C10.6997 10.7667 9.29134 10.7667 8.433 10.0833L5.83301 8"
stroke="white"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
ShinanLearning@gmail.com</span
>
</div>
</div>
<div class="flex w-full justify-between h-100 px-[1.25vw] py-[0.625vw]">
<img
src="/images/Logo.png"
alt="logo"
class="h-[3.698vw] w-[3.698vw]"
/>
<div
class="relative navigator flexBox gap-[2vw] text-[0.938vw] text-[#383E43] font-semibold"
>
<div id="searchBox" class="hidden absolute right-0 w-full">
<svg
class="h-[1.406vw] w-[1.406vw] absolute top-[0.5vw] right-[1vw]"
viewBox="0 0 26 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.4582 23.25C18.1421 23.25 22.7498 18.6422 22.7498 12.9583C22.7498 7.27436 18.1421 2.66663 12.4582 2.66663C6.77424 2.66663 2.1665 7.27436 2.1665 12.9583C2.1665 18.6422 6.77424 23.25 12.4582 23.25Z"
stroke="#878787"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M23.8332 24.3333L21.6665 22.1666"
stroke="#878787"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<input
type="text"
placeholder="نام آموزش، دوره و... را وارد کنید"
class="w-full h-[2.604vw] rounded-[0.521vw] bg-[#F5F5F5] text-[#878787] text-[0.658vw] ps-[3vw]"
/>
</div>
<div class="border-e pe-[1vw] cursor-pointer" @click="openSearchBox">
<svg
width="1.458vw"
height="1.406vw"
viewBox="0 0 28 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.4375 23.625C19.34 23.625 24.125 18.84 24.125 12.9375C24.125 7.03496 19.34 2.25 13.4375 2.25C7.53496 2.25 2.75 7.03496 2.75 12.9375C2.75 18.84 7.53496 23.625 13.4375 23.625Z"
stroke="#0D3F40"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M25.25 24.75L23 22.5"
stroke="#0D3F40"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<nuxt-link to="/">
<span
class="flexBox gap-[0.8vw]"
:class="{ 'text-primaryGreen': $route.path === '/' }"
>
<svg
width="1.302vw"
height="1.302vw"
viewBox="0 0 25 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.94 2.5H18.05C21.61 2.5 22.5 3.39 22.5 6.94V13.27C22.5 16.83 21.61 17.71 18.06 17.71H6.94C3.39 17.72 2.5 16.83 2.5 13.28V6.94C2.5 3.39 3.39 2.5 6.94 2.5Z"
stroke="#0D3F40"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12.5 17.72V22.5"
stroke="#0D3F40"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M2.5 13.5H22.5"
stroke="#0D3F40"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M8 22.5H17"
stroke="#0D3F40"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
صفحه اصلی
</span>
</nuxt-link>
<span class="flexBox gap-[0.8vw]">
<svg
width="1.302vw"
height="1.302vw"
viewBox="0 0 25 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.55 3.03004L4.53002 6.96004C2.60002 8.22004 2.60002 11.04 4.53002 12.3L10.55 16.23C11.63 16.94 13.41 16.94 14.49 16.23L20.48 12.3C22.4 11.04 22.4 8.23004 20.48 6.97004L14.49 3.04004C13.41 2.32004 11.63 2.32004 10.55 3.03004Z"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M6.13012 13.58L6.12012 18.27C6.12012 19.54 7.10012 20.9 8.30012 21.3L11.4901 22.36C12.0401 22.54 12.9501 22.54 13.5101 22.36L16.7001 21.3C17.9001 20.9 18.8801 19.54 18.8801 18.27V13.63"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M21.8999 15.5V9.5"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
دوره های آموزشی
</span>
<span class="flexBox gap-[0.8vw]">
<svg
width="1.302vw"
height="1.302vw"
viewBox="0 0 25 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.5 22.5C18 22.5 22.5 18 22.5 12.5C22.5 7 18 2.5 12.5 2.5C7 2.5 2.5 7 2.5 12.5C2.5 18 7 22.5 12.5 22.5Z"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12.5 8.5V13.5"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12.4946 16.5H12.5036"
stroke="#383E43"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
درباره ما</span
>
</div>
<nuxt-link to="/signup">
<img
src="/images/Profile.png"
alt="profile"
class="h-[3.698vw] w-[3.698vw] rounded-full p-[0.521vw]"
/>
</nuxt-link>
</div>
</nav>
</div>
</template>
<script setup>
const openSearchBox = () =>{
if (process.client) {
document.getElementById('searchBox').classList.add('!block')
}
}
onMounted(() => {
})
</script>