init git

2024-06-16 00:22:14 +04:30
commit ec84dfd222
322 changed files with 77942 additions and 0 deletions
@@ -0,0 +1,93 @@
+<template>
+    <NuxtLayout :name="device" :config="config">
+        <main class="about-us">
+            <section>
+                <h1>{{ $t("aboutUs") }}</h1>
+                <ul>
+                    <li v-for="({ title, content }, i) in items" :key="i">
+                        <span />
+                        <div>
+                            <h2>{{ title }}</h2>
+                            <div v-html="content" />
+                        </div>
+                    </li>
+                </ul>
+            </section>
+        </main>
+    </NuxtLayout>
+</template>
+
+<script setup>
+definePageMeta({ path: '/about-us' })
+
+const config = reactive({
+    mobile: {
+        header: { search: true, menu: true },
+        navigation: false
+    },
+})
+const { device } = inject('service')
+
+const items = ref([])
+
+const { status, data, error } = await useFetch('/api/abouts')
+
+if (status.value == 'success')
+    items.value = data.value
+else throw createError(error.value)
+</script>
+
+<style lang="scss">
+.about-us {
+    @apply w-full flex pt-8 pb-5 lg:pt-[6.5rem] lg:pb-[9.3rem];
+
+    section {
+        @apply w-full flex flex-col gap-6 lg:gap-[4.1rem];
+
+        h1 {
+            @apply mx-auto text-zinc-800 font-black font-vazir text-lg lg:text-3xl;
+        }
+
+        ul {
+            @apply flex flex-col;
+
+            li {
+                &:nth-child(odd) {
+                    @apply bg-slate-100;
+                }
+
+                &:nth-child(even) {
+                    @apply bg-zinc-100;
+                }
+
+
+                @apply w-full flex overflow-hidden;
+                @apply h-[14.7rem] gap-[1.1rem] p-6;
+                @apply lg:h-[17.8rem] lg:gap-[5.5rem] lg:px-[5.3rem] lg:py-[4.4rem] lg:items-center;
+
+                span {
+                    @apply max-lg:hidden w-36 h-36 bg-white shrink-0;
+                }
+
+                &>div {
+                    @apply flex flex-col font-vazir gap-[1.1rem] xl:gap-6;
+
+                    h2 {
+                        @apply w-max text-primary-600 font-black border-b-2 border-current pb-2;
+                        @apply text-lg lg:text-3xl lg:border-b-4 lg:pb-2.5;
+                    }
+
+                    div {
+                        p {
+                            @apply text-zinc-800 font-normal font-vazir;
+                            @apply w-auto max-w-[53.5rem] text-sm lg:text-xl leading-6;
+                        }
+                    }
+
+                }
+
+            }
+        }
+    }
+}
+</style>
@@ -0,0 +1,239 @@
+<template>
+    <NuxtLayout :name="device" :config="config">
+        <main class="contact-us">
+            <div>
+                <h3>{{ $t("usAccompany") }}</h3>
+                <span />
+                <ul>
+                    <li v-for="(social, i) in socials" :key="i">
+                        <router-link :to="social.url">
+                            <img :src="`/icons/${social.icon}.svg`" />
+                        </router-link>
+                    </li>
+                </ul>
+            </div>
+            <section>
+                <form @input="clearError()">
+                    <h2>{{ $t('contactUs') }}</h2>
+                    <p>{{ $t('enterContantAndMessage') }}</p>
+                    <ul>
+                        <li v-for="(item, key) in fields" :key="key" :error="item.error">
+                            <component :is="item.is" :id="key" v-model="form[key]" v-bind="item.props" />
+                            <label :for="key">{{ item.label }}</label>
+                        </li>
+                    </ul>
+                    <Button :label="$t('sendMessage')" :loading="loading" @click="send()" />
+                </form>
+                <div>
+                    <ul>
+                        <li v-for="(way, i) in ways" :key="i">
+                            <i class="isax" :class="way.icon"></i>
+                            <label>{{ $t(way.label) }}:</label>
+                            <span>{{ way.value }}</span>
+                        </li>
+                    </ul>
+                </div>
+                <div>
+                    <div>
+                        <LMap ref="leaflet" v-bind="map.props">
+                            <LTileLayer v-bind="map.layer" />
+                        </LMap>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </NuxtLayout>
+</template>
+
+<script setup>
+import init from '../../initialize/contact-us.js'
+const { socials, fields, ways, map } = init()
+
+definePageMeta({ path: '/contact-us' })
+
+const config = reactive({
+    mobile: {
+        header: { search: true, menu: true },
+        navigation: false
+    },
+})
+
+const { t, toast, device } = inject('service')
+
+const form = ref({})
+
+const loading = ref(false)
+
+const send = async () => {
+    clearError()
+    loading.value = true
+    const { status, error } = await useFetch('/api/contactus', { method: 'post', body: form.value })
+    loading.value = false
+
+    if (status.value == 'success') {
+        toast.add({
+            life: 3000, severity: 'success', summary: t('success'), detail: t('sendSuccessfully')
+        })
+        form.value = {}
+    } else if (error.value.statusCode == 422) {
+        const data = error.value.data
+        delete data.phoneNumber
+        Object.entries(data).forEach(([key, value]) => {
+            fields[key].error = value
+            fields[key].props.class = '!border-red-500'
+        })
+    } else toast.add({
+        life: 3000, severity: 'error', summary: t('error'), detail: error.value.message
+    })
+}
+
+const clearError = () => {
+    Object.keys(fields).forEach((key) => {
+        delete fields[key].error
+        delete fields[key].props.class
+    })
+}
+</script>
+
+<style lang="scss">
+.contact-us {
+    @apply w-full flex px-6 lg:px-20 my-8 lg:mt-16 lg:pb-[9.4rem] relative;
+
+    &>div {
+        @apply hidden lg:w-[1.6rem] lg:h-[20rem] lg:flex flex-col items-center gap-4;
+
+        &>h3 {
+            @screen sm {
+                writing-mode: vertical-rl;
+            }
+
+            @apply whitespace-nowrap text-zinc-400 font-vazir sm:-scale-100;
+        }
+
+        &>span {
+            @apply h-px w-[4.4rem] sm:w-px sm:h-[4.4rem] bg-[#E5E5E5];
+        }
+
+        &>ul {
+            @apply flex sm:flex-col gap-4 mt-auto;
+
+            li {
+                @apply opacity-60;
+
+                img{
+                    @apply brightness-[0.4];
+                }
+            }
+        }
+    }
+
+    &>section {
+        @apply container flex flex-col flex-wrap lg:flex-row justify-center items-center md:justify-start;
+        @apply xl:gap-x-[8.5rem] md:h-[37rem] lg:h-auto lg:justify-center;
+
+        &>form {
+            @apply w-[21.4rem] lg:w-[35.3rem] flex flex-col;
+
+            h2 {
+                @apply text-[#333333] text-lg lg:text-3xl font-black font-vazir flex flex-col gap-2.5 lg:gap-5;
+
+                &::after {
+                    @apply content-['_'] w-10 h-0.5 lg:w-20 lg:h-1 bg-primary-600 rounded-xl;
+                }
+            }
+
+            p {
+                @apply text-[#7F7F7F] text-sm lg:text-xl font-vazir mt-5 lg:mt-4 mb-auto;
+            }
+
+            ul {
+                @apply flex flex-col gap-6 mt-10 lg:mt-12;
+
+                li {
+                    @apply w-full relative flex items-center;
+
+                    label {
+                        @apply w-max absolute right-3 top-3.5 px-1 bg-white transition-['top'];
+                        @apply text-[#999999] text-base font-medium font-vazir cursor-text;
+                    }
+
+                    input {
+                        @apply h-14;
+                    }
+
+                    textarea {
+                        @apply h-[7.6rem] lg:h-[12.6rem];
+                    }
+
+                    input,
+                    textarea {
+                        @apply rtl w-full rounded-[0.6rem] border shadow-none;
+                        @apply border-[#F2F2F2] text-zinc-800 font-vazir;
+                    }
+
+                    &:has(input:focus),
+                    &:has(textarea:focus),
+                    &:has(input:not(:placeholder-shown)),
+                    &:has(textarea:not(:placeholder-shown)) {
+                        label {
+                            @apply -top-2 h-4;
+                            @apply text-zinc-800 text-xs font-normal font-vazir;
+                        }
+                    }
+
+                    &::after {
+                        content: attr(error);
+                        @apply text-red-500 text-sm absolute -bottom-5 left-0 font-vazir;
+                    }
+                }
+            }
+
+            button {
+                @apply w-full h-12 lg:h-14 mt-5 #{!important};
+
+                .p-button-label {
+                    @apply text-white text-sm font-normal lg:text-xl lg:font-medium font-iran-sans;
+                }
+            }
+        }
+
+        &>div:first-of-type {
+            @apply flex md:order-last mt-14 lg:mt-[6.3rem];
+
+            &>ul {
+                @apply flex flex-col sm:flex-wrap sm:flex-row;
+                @apply w-full h-auto gap-4;
+                @apply max-w-[21.4rem] lg:max-w-[80.7rem] lg:h-[5.4rem] lg:gap-x-20 lg:gap-y-8;
+
+                li {
+                    i {
+                        @apply ml-3 lg:ml-4 text-[1.1em] lg:text-2xl text-[#7F7F7F] align-middle;
+                    }
+
+                    label {
+                        @apply ml-2 text-[#7F7F7F] text-sm lg:text-[1.1em] font-medium font-vazir whitespace-nowrap;
+                    }
+
+                    span {
+                        @apply text-[#333333] text-sm lg:text-[1.1em] font-medium font-vazir;
+                    }
+                }
+            }
+        }
+
+        &>div:last-of-type {
+            @apply flex relative w-[21.4rem] h-[17.3rem] lg:w-[37rem] lg:h-[37rem] max-md:mt-5 lg:mt-20 2xl:mt-0;
+
+            &::before {
+                @apply lg:content-['_'] absolute bg-primary-600 rounded-2xl top-0 left-0;
+                @apply w-[14.5rem] h-[29rem];
+            }
+
+            &>div {
+                @apply rounded-[0.6rem] bg-yellow-300 overflow-hidden my-auto;
+                @apply w-full h-full lg:w-[33.8rem] lg:h-[33.8rem] z-0;
+            }
+        }
+    }
+}
+</style>
@@ -0,0 +1,13 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss">
+
+</style>
@@ -0,0 +1,13 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss">
+
+</style>