init git

components/app/desktop/footer/AboutUs.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="about-us">
+        <div>
+            <img src="/images/logo.svg" alt="logo" />
+            <p>{{ $t("aboutUsDesc") }}</p>
+        </div>
+        <ul>
+            <li v-for="item in items" :key="item">
+                <i :class="`isax isax-${item.icon}`" />
+                <span>{{ $t(item.title) }}</span>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup>
+const items = reactive([
+    { icon: "call", title: "aboutUsPhone" },
+    { icon: "sms", title: "aboutUsPostalCode" },
+    { icon: "location", title: "aboutUsAddress" },
+]);
+</script>
+
+<style lang="scss">
+footer .about-us {
+    @apply flex flex-col gap-6 p-8 font-vazir;
+    @apply w-full h-auto bg-zinc-100 rounded-2xl border-2 border-neutral-200;
+    @apply sm:w-[32.7rem] sm:h-[31.3rem];
+    @apply lg:flex-row lg:w-[57.7rem] lg:h-auto;
+    @apply xl:flex-col xl:w-[32.7rem] xl:h-[31.3rem];
+
+    &>div {
+        @apply flex flex-col gap-6;
+
+        img {
+            @apply w-60 h-10;
+        }
+
+        p {
+            @apply w-auto sm:w-[28.1rem] text-zinc-800 text-lg leading-[1.9rem];
+        }
+    }
+
+    ul {
+        @apply flex flex-col gap-4 mt-4;
+
+        li {
+            @apply flex gap-3 h-max;
+
+            i {
+                @apply text-2xl h-[1.9rem];
+            }
+
+            span {
+                @apply text-zinc-800 text-base font-medium leading-[1.9rem];
+            }
+        }
+    }
+}
+</style>

components/app/desktop/footer/CustomerServices.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="customer-services">
+        <h2>{{ $t("customer-services") }}</h2>
+        <ul>
+            <li v-for="(service, i) in services" :key="i">
+                <a :href="service.url">
+                    <span>{{ $t(service.title) }}</span>
+                </a>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup>
+const services = reactive([
+    { url: "/contact-us", title: "contactUs" },
+    { url: "/about-us", title: "aboutUs" },
+    { url: "/search", title: "shop" },
+    { url: "/blog", title: "media" },
+]);
+</script>
+
+<style lang="scss">
+footer .customer-services {
+    @apply flex flex-col gap-4 w-max font-vazir items-center sm:items-start;
+
+    h2 {
+        @apply text-zinc-800 text-xl font-bold leading-[1.9rem];
+    }
+
+    ul {
+        @apply flex gap-4 sm:flex-col justify-between sm:gap-2;
+
+        li {
+            a {
+                span {
+                    @apply text-stone-500 text-[0.9em] leading-[1.9rem] hover:text-primary-600;
+                }
+            }
+        }
+    }
+}
+</style>

components/app/desktop/footer/Index.vue

@@ -0,0 +1,32 @@
+<template>
+    <footer>
+        <AppDesktopFooterAboutUs />
+        <div>
+            <AppDesktopFooterNewsletters />
+            <AppDesktopFooterSocialNetworks />
+            <div>
+                <AppDesktopFooterCustomerServices />
+                <AppDesktopFooterPurchaseGuide />
+                <AppDesktopFooterTrustSymbols />
+            </div>
+        </div>
+    </footer>
+</template>
+
+<script setup></script>
+
+<style lang="scss">
+footer {
+    @apply w-full flex flex-col sm:items-center justify-center bg-[#F5F5F5];
+    @apply gap-4 px-3 py-12;
+    @apply xl:flex-row xl:gap-[6.7rem] 2xl:py-[6.3rem];
+
+    &>div:not([class]) {
+        @apply flex flex-col gap-6;
+
+        &>div:not([class]) {
+            @apply flex flex-col items-center sm:items-start sm:flex-row justify-center gap-8 mt-4 lg:justify-between xl:gap-6 xl:mt-10;
+        }
+    }
+}
+</style>

components/app/desktop/footer/Newsletters.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="newsletters">
+        <h2>{{ $t("newslettersDesc") }}</h2>
+        <form>
+            <div>
+                <i class="isax isax-sms" />
+                <span>|</span>
+                <input v-model="email" :class="{ '!ltr': email }" :placeholder="$t('emailAddress')" />
+            </div>
+            <Button :label="$t('submit')" :loading="loading" @click="submit()" />
+        </form>
+    </div>
+</template>
+
+<script setup>
+const { toast, t } = inject('service')
+const loading = ref(false)
+const email = ref()
+
+const submit = async () => {
+    if (email.value.includes('@')) {
+        loading.value = true;
+        const { status, error } = await useFetch('/api/news', { method: 'post', body: { email: email.value } })
+        loading.value = false;
+        email.value = '';
+
+        if (status.value == 'success')
+            toast.add({
+                life: 3000,
+                severity: 'success',
+                summary: t('success'),
+                detail: t('submitedSuccessfully')
+            })
+        else
+            toast.add({
+                life: 3000,
+                severity: 'error',
+                summary: t('error'),
+                detail: error.value
+            })
+    }
+
+}
+</script>
+
+<style lang="scss">
+footer .newsletters {
+    @apply bg-zinc-100 rounded-xl border-2 border-neutral-200;
+    @apply flex flex-col items-center justify-between p-3 font-vazir;
+    @apply w-full h-auto gap-4 py-4;
+    @apply lg:w-[57.7rem] lg:h-[4.5rem] lg:flex-row;
+
+    h2 {
+        @apply text-zinc-800 text-lg font-medium leading-[1.9rem] mr-3;
+    }
+
+    form {
+        @apply flex gap-2;
+
+        div {
+            @apply w-[16.9rem] md:w-[21.5rem] h-12 bg-neutral-200 rounded-lg flex gap-3 items-center p-3;
+
+            i {
+                @apply text-2xl;
+            }
+
+            input {
+                @apply h-12 bg-transparent w-full rtl text-neutral-600 font-medium outline-none;
+
+                &:placeholder {
+                    @apply text-neutral-600;
+                }
+            }
+        }
+
+        button {
+            @apply w-[4.5rem] h-12 bg-[#47B556] rounded-md text-white text-base font-medium #{!important};
+        }
+    }
+}
+</style>

components/app/desktop/footer/PurchaseGuide.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="purchase-guide">
+        <h2>{{ $t("purchaseGuideFromAM") }}</h2>
+        <ul>
+            <li v-for="(guide, i) in guides" :key="i">
+                <a :href="guide.url">
+                    <span>{{ $t(guide.title) }}</span>
+                </a>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup>
+const guides = reactive([
+    { url: "/", title: "howToPlaceOrder" },
+    { url: "/", title: "orderSendingProcedure" },
+    { url: "/", title: "paymentMethods" },
+]);
+</script>
+
+<style lang="scss">
+footer .purchase-guide {
+    @apply flex flex-col gap-4 sm:gap-[1.4rem] w-max font-vazir items-center sm:items-start;
+
+    h2 {
+        @apply text-zinc-800 text-xl font-bold leading-[1.9rem];
+    }
+
+    ul {
+        @apply flex gap-4 sm:flex-col sm:gap-2;
+
+        li {
+            a {
+                span {
+                    @apply text-stone-500 text-[0.9em] leading-[1.9rem] hover:text-primary-600;
+                }
+            }
+        }
+    }
+}
+</style>

components/app/desktop/footer/SocialNetworks.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="social-networks">
+        <h2>{{ $t("followUs") }}</h2>
+        <ul>
+            <li v-for="({url, icon}, i) in socials" :key="i">
+                <a :href="url" target="_blank">
+                    <img :src="`/icons/${icon}.svg`" />
+                </a>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup>
+const socials = reactive([
+    { url: "/", icon: "linkedin" },
+    { url: "/", icon: "telegram" },
+    { url: "/", icon: "whatsapp" },
+    { url: "/", icon: "instagram" },
+]);
+</script>
+
+<style lang="scss">
+footer .social-networks {
+    @apply bg-zinc-100 rounded-xl border-2 border-neutral-200;
+    @apply flex flex-col items-center justify-between px-6;
+    @apply w-full h-auto gap-4 py-4;
+    @apply lg:w-[57.7rem] lg:h-[4.5rem] md:flex-row;
+
+    h2 {
+        @apply text-zinc-800 text-lg font-medium font-vazir leading-[1.9rem];
+    }
+
+    ul {
+        @apply flex gap-2;
+
+        li {
+            @apply w-max h-max;
+            a {
+                @apply w-10 h-10 bg-[#B2B2B2] hover:bg-[#43E97B] rounded-full flex items-center justify-center;
+                img {
+                    @apply h-6 w-6 object-scale-down;
+                }
+            }
+        }
+    }
+}
+</style>

components/app/desktop/footer/TrustSymbols.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="trust-symbols">
+        <h2>{{ $t('symbolOfTrust')}}</h2>
+        <div>
+            <picture v-for="(symbol, i) in symbols" :key="i">
+                <img :src="`/images/${symbol}.svg`" />
+            </picture>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const symbols = reactive(['samandehi', 'kasbokar'])
+</script>
+
+<style lang="scss">
+footer .trust-symbols{
+    @apply flex flex-col items-center gap-4;
+    @apply sm:items-start;
+
+    h2{
+        @apply text-zinc-800 text-xl font-bold font-vazir leading-[1.9rem];
+    }
+
+    div{
+        @apply flex gap-4;
+
+        picture{
+            @apply flex w-24 h-32 bg-white rounded-lg border border-neutral-300;
+
+            img{
+                @apply m-auto;
+            }
+        }
+    }
+}
+</style>