responsived and added new contact us gif
This commit is contained in:
Mamalizz
@@ -53,18 +53,15 @@ const contactWays = ref([
|
||||
<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>
|
||||
ما اینجا هستیم تا کمک کنیم. برای پشتیبانی، بازخورد یا هر
|
||||
سوالی که ممکن است داشته باشید تماس بگیرید.
|
||||
<div class="flex flex-col items-center gap-3 text-black w-full">
|
||||
<h1 class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4">ارتباط با ما</h1>
|
||||
<p class="text-slate-500 text-center max-w-[750px] max-lg:text-sm leading-[175%]">
|
||||
ما اینجا هستیم تا کمک کنیم. برای پشتیبانی، بازخورد یا هر سوالی که ممکن است داشته باشید تماس بگیرید.
|
||||
</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="w-full flex flex-col-reverse max-lg:-mt-14 lg:flex-row items-start justify-between">
|
||||
<div class="w-full lg:w-8/12 flex flex-col items-start gap-10">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-[.6rem] w-full">
|
||||
<div class="flex flex-col items-start w-full">
|
||||
<Input
|
||||
@@ -73,10 +70,16 @@ const contactWays = ref([
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col items-start w-full">
|
||||
<Input class="w-full" placeholder="پست الکترونیکی" />
|
||||
<Input
|
||||
class="w-full"
|
||||
placeholder="پست الکترونیکی"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col items-start w-full">
|
||||
<Input class="w-full" placeholder="شماره تلفن" />
|
||||
<Input
|
||||
class="w-full"
|
||||
placeholder="شماره تلفن"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col items-start w-full relative">
|
||||
<Select
|
||||
@@ -85,55 +88,89 @@ const contactWays = ref([
|
||||
placeholder="نوع درخواست"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col items-start col-span-1 md:col-span-2 h-[10rem] max-h-[12rem]"
|
||||
>
|
||||
<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"
|
||||
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 placeholder:text-xs lg:placeholder:text-sm placeholder:font-normal"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 w-full"
|
||||
>
|
||||
|
||||
<div class="w-full flex-center pb-10 border-b border-slate-200">
|
||||
<!-- @click="handleSubmit"
|
||||
:loading="createTicketIsPending || uploadAttachmentIsPending" -->
|
||||
<Button
|
||||
class="rounded-full w-[14rem] h-11"
|
||||
size="md"
|
||||
>
|
||||
<!-- <Icon
|
||||
v-if="createTicketIsPending"
|
||||
:name="createTicketIsPending ? 'svg-spinners:3-dots-bounce' : 'bi:send'"
|
||||
/> -->
|
||||
<span>ارسال پیغام</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 w-full max-lg:gap-10">
|
||||
<div
|
||||
v-for="(way, index) in contactWays"
|
||||
:key="index"
|
||||
class="flex flex-col gap-3"
|
||||
class="flex flex-col max-lg:items-center gap-3"
|
||||
>
|
||||
<span class="text-slate-500 typo-p-md">
|
||||
<span class="text-slate-500 max-lg:text-sm">
|
||||
{{ way.title }}
|
||||
</span>
|
||||
<div
|
||||
v-for="(link, index) in way.ways"
|
||||
:key="index"
|
||||
class="flex flex-col"
|
||||
>
|
||||
<a :href="link.path" class="text-black underline">{{
|
||||
link.title
|
||||
}}</a>
|
||||
<a
|
||||
:href="link.path"
|
||||
class="text-black underline max-lg:text-xs lg:text-sm"
|
||||
>{{ link.title }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<span class="text-slate-500 typo-p-md">
|
||||
شبکه های اجتماعی
|
||||
</span>
|
||||
<div class="flex flex-col max-lg:items-center 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
|
||||
href="#"
|
||||
class=""
|
||||
>
|
||||
<Icon
|
||||
name="bi:telegram"
|
||||
class="lg:text-lg"
|
||||
/>
|
||||
</a>
|
||||
<a href="#" class="">
|
||||
<Icon name="bi:instagram" size="20" />
|
||||
<a
|
||||
href="#"
|
||||
class=""
|
||||
>
|
||||
<Icon
|
||||
name="bi:instagram"
|
||||
class="lg:text-lg"
|
||||
/>
|
||||
</a>
|
||||
<a href="#" class="">
|
||||
<Icon name="bi:twitter-x" size="20" />
|
||||
<a
|
||||
href="#"
|
||||
class=""
|
||||
>
|
||||
<Icon
|
||||
name="bi:twitter-x"
|
||||
class="lg:text-lg"
|
||||
/>
|
||||
</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 class="w-full lg:w-4/12 h-full flex-center">
|
||||
<NuxtImg
|
||||
src="/img/heymlz/contact-us.gif"
|
||||
class="size-2/3 -mt-5 lg:scale-150 drop-shadow-2xl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user