marzban-dev
121 lines
5.5 KiB
Vue
121 lines
5.5 KiB
Vue
<template>
|
|
<div class="bg-black relative overflow-hidden">
|
|
<NuxtImg
|
|
src="/img/footer-bg.jpg"
|
|
alt=""
|
|
class="absolute z-10 object-cover opacity-45"
|
|
/>
|
|
|
|
<div
|
|
class="flex flex-col gap-4 items-center justify-center relative z-20"
|
|
>
|
|
<div
|
|
class="flex items-center flex-col gap-8 pb-[10px] pt-[80px] lg:py-[150px] justify-center"
|
|
>
|
|
<img
|
|
src="/img/heymlz/heymlz-small-idle.gif"
|
|
class="size-[150px] lg:size-[220px] rounded-full drop-shadow-2xl"
|
|
/>
|
|
<span
|
|
class="font-bold text-2xl lg:text-5xl text-gradient bg-gradient-to-l from-blue-500 to-blue-700"
|
|
>
|
|
فروشگاه هی ملز
|
|
</span>
|
|
</div>
|
|
|
|
<footer
|
|
class="w-full flex max-lg:flex-col justify-between py-[64px] max-lg:gap-16 container items-center lg:items-start relative z-20"
|
|
>
|
|
<div class="flex flex-col gap-4 max-w-[300px]">
|
|
<h3
|
|
class="font-bold text-xl xl:text-3xl max-lg:text-center text-white"
|
|
>
|
|
با ما در ارتباط باشید...
|
|
</h3>
|
|
|
|
<p
|
|
class="text-md font-thin leading-[175%] mt-4 max-lg:text-center text-slate-300"
|
|
>
|
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنگی با
|
|
تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان
|
|
گرافیک است. چاپگرها
|
|
</p>
|
|
<div
|
|
class="flex items-center gap-4 mt-6 max-lg:justify-center"
|
|
>
|
|
<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 class="flex justify-center lg:justify-end flex-1">
|
|
<div class="flex flex-col gap-6 max-lg:text-center">
|
|
<h3 class="font-bold text-white">لینک های مفید</h3>
|
|
<ul
|
|
class="flex flex-col gap-4 font-thin text-slate-300"
|
|
>
|
|
<li>از طراحان گرافیک است</li>
|
|
<li>تولید نامفهوم</li>
|
|
<li>ستون و سطرآنچنان که لازم</li>
|
|
<li>روزنامه و مجله در ستون</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end flex-1">
|
|
<div class="flex flex-col gap-6 max-lg:text-center">
|
|
<h3 class="font-bold text-white">لینک های مفید</h3>
|
|
<ul
|
|
class="flex flex-col gap-4 font-thin text-slate-300"
|
|
>
|
|
<li>از طراحان گرافیک است</li>
|
|
<li>تولید نامفهوم</li>
|
|
<li>ستون و سطرآنچنان که لازم</li>
|
|
<li>روزنامه و مجله در ستون</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end flex-1">
|
|
<div class="flex flex-col gap-6 max-lg:text-center">
|
|
<h3 class="font-bold w-full text-white">
|
|
لینک های مفید
|
|
</h3>
|
|
<ul
|
|
class="flex flex-col gap-4 font-thin text-slate-300"
|
|
>
|
|
<li>از طراحان گرافیک است</li>
|
|
<li>تولید نامفهوم</li>
|
|
<li>ستون و سطرآنچنان که لازم</li>
|
|
<li>روزنامه و مجله در ستون</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</template>
|