Initial commit: Nuxt site
This commit is contained in:
Noro Studio
@@ -0,0 +1,176 @@
|
||||
<script setup lang="ts">
|
||||
const { portfolioCategories, site, messengersLabel } = useNoroData()
|
||||
|
||||
useHead({
|
||||
title: 'تماس — استودیو نورو'
|
||||
})
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
category: '',
|
||||
message: ''
|
||||
})
|
||||
|
||||
const submitted = ref(false)
|
||||
|
||||
function handleSubmit() {
|
||||
submitted.value = true
|
||||
}
|
||||
|
||||
const categoryOptions = computed(() =>
|
||||
Object.values(portfolioCategories.value) as Array<{
|
||||
label: string
|
||||
slug: string
|
||||
}>
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<section class="relative overflow-hidden border-b border-noro-border">
|
||||
<GlowBackground />
|
||||
<div class="noro-container relative py-20 sm:py-24">
|
||||
<SectionHeading
|
||||
eyebrow="Contact"
|
||||
title="تماس با استودیو نورو"
|
||||
description="آماده شنیدن ایده‌ها و پروژه‌های شما هستیم."
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="noro-section">
|
||||
<div class="noro-container">
|
||||
<SectionHeading
|
||||
eyebrow="ارتباط"
|
||||
title="راه‌های ارتباطی و ثبت درخواست"
|
||||
description="برای شروع همکاری فرم را پر کنید، یا از طریق ایمیل، تلفن، پیام‌رسان‌ها و شبکه‌های اجتماعی و آدرس استودیو مستقیماً با ما در تماس باشید."
|
||||
/>
|
||||
|
||||
<div class="mt-12 grid items-start gap-8 lg:grid-cols-2 lg:gap-10">
|
||||
<ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-1 lg:gap-5">
|
||||
<li class="noro-card p-5">
|
||||
<p class="text-sm text-noro-muted">ایمیل</p>
|
||||
<a
|
||||
:href="`mailto:${site.email}`"
|
||||
class="mt-1 block font-medium text-noro-text transition hover:text-noro-brand"
|
||||
>
|
||||
{{ site.email }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="noro-card p-5">
|
||||
<p class="text-sm text-noro-muted">تلفن</p>
|
||||
<a
|
||||
:href="`tel:${site.phoneTel}`"
|
||||
class="mt-1 block font-medium text-noro-text transition hover:text-noro-brand"
|
||||
dir="ltr"
|
||||
>
|
||||
{{ site.phone }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="noro-card p-5 sm:col-span-2 lg:col-span-1">
|
||||
<p class="text-sm text-noro-muted">{{ messengersLabel }}</p>
|
||||
<div class="mt-3">
|
||||
<MessengerLinks
|
||||
:messengers="site.messengers"
|
||||
:handle="site.messengerHandle"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
<li class="noro-card p-5 sm:col-span-2 lg:col-span-1">
|
||||
<p class="text-sm text-noro-muted">موقعیت</p>
|
||||
<p class="mt-1 font-medium text-noro-text">{{ site.location }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div>
|
||||
<form
|
||||
v-if="!submitted"
|
||||
class="noro-card h-full space-y-5 p-6 sm:p-8"
|
||||
@submit.prevent="handleSubmit"
|
||||
>
|
||||
<div class="grid gap-5 sm:grid-cols-2">
|
||||
<label class="block">
|
||||
<span class="mb-2 block text-sm text-noro-muted">نام و نام خانوادگی</span>
|
||||
<input
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
required
|
||||
class="w-full rounded-xl border border-noro-border bg-noro-bg px-4 py-3 text-sm text-noro-text outline-none transition focus:border-noro-brand"
|
||||
>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="mb-2 block text-sm text-noro-muted">ایمیل</span>
|
||||
<input
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
required
|
||||
class="w-full rounded-xl border border-noro-border bg-noro-bg px-4 py-3 text-sm text-noro-text outline-none transition focus:border-noro-brand"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-5 sm:grid-cols-2">
|
||||
<label class="block">
|
||||
<span class="mb-2 block text-sm text-noro-muted">شماره تماس</span>
|
||||
<input
|
||||
v-model="form.phone"
|
||||
type="tel"
|
||||
class="w-full rounded-xl border border-noro-border bg-noro-bg px-4 py-3 text-sm text-noro-text outline-none transition focus:border-noro-brand"
|
||||
>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="mb-2 block text-sm text-noro-muted">نوع پروژه</span>
|
||||
<select
|
||||
v-model="form.category"
|
||||
required
|
||||
class="w-full rounded-xl border border-noro-border bg-noro-bg px-4 py-3 text-sm text-noro-text outline-none transition focus:border-noro-brand"
|
||||
>
|
||||
<option value="" disabled>
|
||||
انتخاب کنید
|
||||
</option>
|
||||
<option
|
||||
v-for="cat in categoryOptions"
|
||||
:key="cat.slug"
|
||||
:value="cat.slug"
|
||||
>
|
||||
{{ cat.label }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label class="block">
|
||||
<span class="mb-2 block text-sm text-noro-muted">توضیحات پروژه</span>
|
||||
<textarea
|
||||
v-model="form.message"
|
||||
rows="5"
|
||||
required
|
||||
class="w-full resize-none rounded-xl border border-noro-border bg-noro-bg px-4 py-3 text-sm text-noro-text outline-none transition focus:border-noro-brand"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<UiButton type="submit" size="lg" class="w-full justify-center sm:w-auto">
|
||||
ارسال درخواست
|
||||
</UiButton>
|
||||
</form>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="noro-card flex h-full min-h-[320px] flex-col items-center justify-center p-8 text-center"
|
||||
>
|
||||
<p class="text-4xl">✓</p>
|
||||
<h3 class="mt-4 text-xl font-bold text-noro-text">
|
||||
درخواست شما ثبت شد
|
||||
</h3>
|
||||
<p class="mt-2 text-noro-muted">
|
||||
به زودی با شما تماس خواهیم گرفت.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user