added contact us

2025-01-28 23:31:57 +03:30
parent 9cc00d0583
commit e42d7c44f0
1 changed files with 142 additions and 0 deletions
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+// state
+
+const contactInfo = ref({
+    name: "",
+    email: "",
+    phone: "",
+    requestType: "",
+    message: "",
+});
+
+const requestTypes = ref(["انتقادات", "پیشنهادات", "پیگیری سفارش"]);
+
+const contactWays = ref([
+    {
+        title: "آدرس",
+        ways: [
+            {
+                type: "link",
+                title: "mlz@gmail.com",
+                path: "mailto:mlz@gmail.com",
+            },
+        ],
+    },
+    {
+        title: "آدرس الکترونیکی",
+        ways: [
+            {
+                type: "link",
+                title: "mlz2@gmail.com",
+                path: "mailto:mlz2@gmail.com",
+            },
+            {
+                type: "link",
+                title: "mlz3@gmail.com",
+                path: "mailto:mlz3@gmail.com",
+            },
+        ],
+    },
+    {
+        title: "تلفن",
+        ways: [
+            {
+                type: "link",
+                title: "+33 (0) 31-305-210",
+                path: "tel:12345678",
+            },
+        ],
+    },
+]);
+</script>
+
+<template>
+    <div class="w-full container flex flex-col">
+        <div class="w-full flex-center py-[5rem]">
+            <div
+                class="flex flex-col items-center gap-[1.5rem] text-black w-full"
+            >
+                <h1 class="typo-h-3">ارتباط با ما</h1>
+                <p>
+                    ما اینجا هستیم تا کمک کنیم. برای پشتیبانی، بازخورد یا هر
+                    سوالی که ممکن است داشته باشید تماس بگیرید.
+                </p>
+            </div>
+        </div>
+        <div class="w-full flex items-start justify-between">
+            <div class="w-8/12 flex flex-col items-start gap-16">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-[.6rem] w-full">
+                    <div class="flex flex-col items-start w-full">
+                        <Input
+                            class="w-full"
+                            placeholder="نام و نام خانوادگی"
+                        />
+                    </div>
+                    <div class="flex flex-col items-start w-full">
+                        <Input class="w-full" placeholder="پست الکترونیکی" />
+                    </div>
+                    <div class="flex flex-col items-start w-full">
+                        <Input class="w-full" placeholder="شماره تلفن" />
+                    </div>
+                    <div class="flex flex-col items-start w-full relative">
+                        <Select
+                            v-model="contactInfo.requestType"
+                            :options="requestTypes"
+                            placeholder="نوع درخواست"
+                        />
+                    </div>
+                    <div
+                        class="flex flex-col items-start col-span-1 md:col-span-2 h-[10rem] max-h-[12rem]"
+                    >
+                        <textarea
+                            placeholder="پیغام شما"
+                            class="w-full flex items-center resize-none bg-slate-50 border-slate-200 hover:border-black focus:border-black h-[10rem] max-h-[12rem] text-black justify-between cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3.5 selection:bg-slate-100 rounded-100 outline-none flex-1 !text-sm placeholder-slate-400"
+                        ></textarea>
+                    </div>
+                </div>
+                <div
+                    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 w-full"
+                >
+                    <div
+                        v-for="(way, index) in contactWays"
+                        :key="index"
+                        class="flex flex-col gap-3"
+                    >
+                        <span class="text-slate-500 typo-p-md">
+                            {{ way.title }}
+                        </span>
+                        <div
+                            v-for="(link, index) in way.ways"
+                            class="flex flex-col"
+                        >
+                            <a :href="link.path" class="text-black underline">{{
+                                link.title
+                            }}</a>
+                        </div>
+                    </div>
+                    <div class="flex flex-col gap-3">
+                        <span class="text-slate-500 typo-p-md">
+                            شبکه های اجتماعی
+                        </span>
+                        <div class="flex items-center gap-3">
+                            <a href="#" class="">
+                                <Icon name="bi:telegram" size="20" />
+                            </a>
+                            <a href="#" class="">
+                                <Icon name="bi:instagram" size="20" />
+                            </a>
+                            <a href="#" class="">
+                                <Icon name="bi:twitter-x" size="20" />
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="w-4/12 h-full bg-red-300">
+                <img src="/mlz.jpeg" class="-mt-16" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>