Mamalizz
143 lines
5.3 KiB
Vue
143 lines
5.3 KiB
Vue
<script setup lang="ts">
|
|
// state
|
|
|
|
const contactInfo = ref({
|
|
name: "",
|
|
email: "",
|
|
phone: "",
|
|
requestType: undefined,
|
|
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 flex-center">
|
|
<NuxtImg src="/logo.png" class="size-2/3 -mt-5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|