marzban-dev
130 lines
5.7 KiB
Vue
130 lines
5.7 KiB
Vue
<script setup lang="ts">
|
||
|
||
// imports
|
||
|
||
import { NAV_LINKS } from "~/constants";
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<footer class="w-full bg-black flex-center">
|
||
<div class="size-full grid grid-cols-2 items-stretch container">
|
||
<div
|
||
class="h-full flex flex-col items-start justify-between pe-[5rem] py-[5rem]"
|
||
>
|
||
<div class="flex flex-col items-start gap-[1.5rem] w-full">
|
||
<span class="text-white typo-sub-h-xl font-light"
|
||
>از آخرین اخبار، نوشتهها، مقالات و تخفیفها با خبر شوید
|
||
😎
|
||
</span>
|
||
<div class="flex flex-col items-start gap-[.75rem] w-full">
|
||
<div
|
||
class="flex items-center justify-start gap-[.5rem] w-full"
|
||
>
|
||
<Input
|
||
placeholder="آدرس الکترونیکی شما"
|
||
class="bg-slate-950 border-slate-800 hover:border-slate-800 w-8/12"
|
||
/>
|
||
<Button
|
||
class="invert rounded-100 size-[3rem] !**:stroke-black"
|
||
end-icon="ci:arrow-left"
|
||
/>
|
||
</div>
|
||
<span class="text-slate-400 typo-p-sm">
|
||
با عضویت, شما با
|
||
<NuxtLink to="#" class="text-cyan-500 underline"
|
||
>قوانین و مقررات</NuxtLink
|
||
>
|
||
سایت موافقت می کنید.
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<span class="text-white typo-label-sm font-light">
|
||
© ۲۰۲۵ - ملز; هوشمند ترین وبسایت ایران
|
||
</span>
|
||
</div>
|
||
|
||
<div
|
||
class="flex flex-col items-start ps-[5rem] py-[5rem] gap-[6.875rem]"
|
||
>
|
||
<div class="w-full flex items-start gap-[3rem]">
|
||
<div class="flex flex-col gap-[1.5rem] w-full">
|
||
<NuxtLink
|
||
v-for="(link, index) in NAV_LINKS"
|
||
:key="index"
|
||
:to="link.path"
|
||
class="typo-h-5 font-light text-white hover:text-white/70 transition-all"
|
||
>
|
||
{{ link.title }}
|
||
</NuxtLink>
|
||
</div>
|
||
<div class="flex flex-col gap-[.75rem] w-full">
|
||
<NuxtLink
|
||
to="#"
|
||
class="typo-label-md font-light text-slate-400 hover:text-slate-500 transition-all"
|
||
>
|
||
سوالات متدوال
|
||
</NuxtLink>
|
||
<NuxtLink
|
||
to="#"
|
||
class="typo-label-md font-light text-slate-400 hover:text-slate-500 transition-all"
|
||
>
|
||
قوانین و مقررات
|
||
</NuxtLink>
|
||
<NuxtLink
|
||
to="#"
|
||
class="typo-label-md font-light text-slate-400 hover:text-slate-500 transition-all"
|
||
>
|
||
گزارش خطا و باگ
|
||
</NuxtLink>
|
||
<NuxtLink
|
||
to="#"
|
||
class="typo-label-md font-light text-slate-400 hover:text-slate-500 transition-all"
|
||
>
|
||
حریم خصوصی
|
||
</NuxtLink>
|
||
<NuxtLink
|
||
to="#"
|
||
class="typo-label-md font-light text-slate-400 hover:text-slate-500 transition-all"
|
||
>
|
||
تماس با ما
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-end text-white w-full">
|
||
<div class="flex items-center gap-[1rem]">
|
||
<NuxtLink to="#" class="flex-center size-[1.5rem]">
|
||
<Icon
|
||
name="ci:instagram"
|
||
class="**:fill-white"
|
||
size="24"
|
||
/>
|
||
</NuxtLink>
|
||
<NuxtLink to="#" class="flex-center size-[1.5rem]">
|
||
<Icon
|
||
name="ci:facebook"
|
||
class="**:fill-white **:stroke-white"
|
||
size="20"
|
||
/>
|
||
</NuxtLink>
|
||
<NuxtLink to="#" class="flex-center size-[1.5rem]">
|
||
<Icon
|
||
name="ci:tiktok"
|
||
class="**:fill-white **:stroke-white"
|
||
size="20"
|
||
/>
|
||
</NuxtLink>
|
||
<NuxtLink to="#" class="flex-center size-[1.5rem]">
|
||
<Icon
|
||
name="ci:youtube"
|
||
class="**:fill-white"
|
||
size="24"
|
||
/>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</template> |