hossein-por-shop/frontend/components/global/Footer.vue

<template>
    <footer class="bg-black relative overflow-hidden">
        <!-- <NuxtImg
            src="/img/footer-bg.jpg"
            alt=""
            loading="lazy"
            fetch-priority="low"
            class="absolute z-10 object-cover opacity-45"
            :style="{
                mask: 'linear-gradient(to bottom, black 0%, rgba(0,0,0,0)  100%',
            }"
        /> -->

        <ClientOnly>
            <div class="absolute top-0 w-full max-md:scale-200 origin-top">
                <LightRays
                    rays-color="#007bff"
                    :rays-speed="1.75"
                />
            </div>
        </ClientOnly>

        <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:pt-[100px] lg:pb-[50px] justify-center">
                <img
                    src="/img/heymlz/heymlz-small-idle.gif"
                    loading="lazy"
                    fetch-priority="low"
                    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>

            <div
                class="w-full flex max-lg:flex-col justify-between pt-16 pb-12 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-lg 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 max-lg:text-xs">
                        هی‌ملز یک فروشگاه چندمنظوره با تنوع کالایی گسترده است که تجربه‌ای سریع، مطمئن و حرفه‌ای از خرید
                        آنلاین ارائه می‌دهد. تمرکز ما بر کیفیت، دسترسی آسان و پاسخ‌گویی به نیازهای متنوع مشتریان است.
                    </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 max-lg:text-xs">
                            <li>شماره تماس مدیریت: ۰۹۰۲۶۶۶۳۴۸۸</li>
                            <li>شماره تماس پشتیبانی: ۰۹۰۲۲۲۰۲۳۱۱</li>
                            <li>ایمیل: npsayna@gmail.com</li>
                            <li><NuxtLink to="contact-us">تیکت</NuxtLink></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 max-lg:text-xs">
                            <li>رویه های بازگرداندن کالا</li>
                            <li>پرسش های متداول</li>
                            <li>حریم خصوصی</li>
                            <li><NuxtLink to="contact-us">گزارش باگ</NuxtLink></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 max-lg:text-xs">
                            <li>
                                <NuxtLink to="profile"> پنل کاربری </NuxtLink>
                            </li>
                            <li>
                                <NuxtLink to="products"> محصولات </NuxtLink>
                            </li>
                            <li>قوانین و مقرارت</li>
                            <li>
                                <NuxtLink to="contact-us">ارتباط با ما</NuxtLink>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="container w-full">
                <div class="w-full border-t border-white/35 pt-12 pb-12 flex items-center max-xs:justify-center">
                    <img
                        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQwIiBoZWlnaHQ9IjM2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGQ9Im0xMjAgMjQzbDk0LTU0IDAtMTA5IC05NCA1NCAwIDEwOSAwIDB6IiBmaWxsPSIjODA4Mjg1Ii8+Cgk8cGF0aCBkPSJtMTIwIDI1NGwtMTAzLTYwIDAtMTE5IDEwMy02MCAxMDMgNjAgMCAxMTkgLTEwMyA2MHoiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS13aWR0aDo1O3N0cm9rZTojMDBhZWVmIi8+Cgk8cGF0aCBkPSJtMjE0IDgwbC05NC01NCAtOTQgNTQgOTQgNTQgOTQtNTR6IiBmaWxsPSIjMDBhZWVmIi8+Cgk8cGF0aCBkPSJtMjYgODBsMCAxMDkgOTQgNTQgMC0xMDkgLTk0LTU0IDAgMHoiIGZpbGw9IiM1ODU5NWIiLz4KCTxwYXRoIGQ9Im0xMjAgMTU3bDQ3LTI3IDAtMjMgLTQ3LTI3IC00NyAyNyAwIDU0IDQ3IDI3IDQ3LTI3IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6MTU7c3Ryb2tlOiNmZmYiLz4KCTx0ZXh0IHg9IjE1IiB5PSIzMDAiIGZvbnQtc2l6ZT0iMjVweCIgZm9udC1mYW1pbHk9IidCIFlla2FuJyIgc3R5bGU9ImZpbGw6IzI5Mjk1Mjtmb250LXdlaWdodDpib2xkIj7Yudi22Ygg2KfYqtit2KfYr9uM2Ycg2qnYtNmI2LHbjDwvdGV4dD4KCTx0ZXh0IHg9IjgiIHk9IjM0MyIgZm9udC1zaXplPSIyNXB4IiBmb250LWZhbWlseT0iJ0IgWWVrYW4nIiBzdHlsZT0iZmlsbDojMjkyOTUyO2ZvbnQtd2VpZ2h0OmJvbGQiPtqp2LPYqCDZiCDaqdin2LHZh9in24wg2YXYrNin2LLbjDwvdGV4dD4KPC9zdmc+ "
                        alt=""
                        onclick="
                            window.open(
                                'https://ecunion.ir/verify/heymlz.com?token=95844486981e01070569',
                                'Popup',
                                'toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, resizable=0, width=580, height=600, top=30',
                            )
                        "
                       class="cursor-pointer w-24"
                    />
                </div>
            </div>
        </div>
    </footer>
</template>