235 lines
12 KiB
TypeScript
235 lines
12 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import Layout from '@/layouts/client/layout';
|
|
import { useTranslations } from '@/utils/i18n';
|
|
import { Form, Head } from '@inertiajs/react';
|
|
import { Mail, MapPin, Phone } from 'lucide-react';
|
|
|
|
export default function Contact() {
|
|
const { t } = useTranslations();
|
|
return (
|
|
<>
|
|
<Layout>
|
|
<Head title="Contact Us" />
|
|
<section className="mx-auto flex max-w-screen-2xl flex-col gap-12 px-12 py-12 max-md:px-8">
|
|
<div className="flex flex-col gap-4">
|
|
<h1 className="text-center font-serif text-5xl font-medium tracking-tight max-md:text-3xl">
|
|
{t('pages.contact.sections.first.title')}
|
|
</h1>
|
|
<p className="text-center text-sm">
|
|
{t('pages.contact.sections.first.subTitle')} <br />{' '}
|
|
{t('pages.contact.sections.first.subTitle2')}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col gap-8">
|
|
<h2 className="text-center font-serif text-3xl font-medium tracking-tight">
|
|
{t('pages.contact.sections.second.title')}
|
|
</h2>
|
|
<div className="flex items-start justify-center gap-24 max-md:flex-col max-md:gap-12">
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex flex-col gap-1">
|
|
<p className="font-serif text-xl font-medium tracking-tight">
|
|
{t(
|
|
'pages.contact.sections.second.soorya.title',
|
|
)}
|
|
</p>
|
|
<p className="text-sm text-gray-500">
|
|
{t(
|
|
'pages.contact.sections.second.soorya.subTitle',
|
|
)}
|
|
</p>
|
|
</div>
|
|
|
|
<ul className="flex flex-col gap-2">
|
|
<li className="flex items-center gap-2 text-sm">
|
|
<MapPin size={16} />{' '}
|
|
{t(
|
|
'pages.contact.sections.second.soorya.address',
|
|
)}
|
|
</li>{' '}
|
|
<li className="flex items-center gap-2 text-sm">
|
|
<Phone size={16} />{' '}
|
|
{t(
|
|
'pages.contact.sections.second.soorya.phone',
|
|
)}
|
|
</li>{' '}
|
|
<li className="flex items-center gap-2 text-sm">
|
|
<Mail size={16} />{' '}
|
|
{t(
|
|
'pages.contact.sections.second.soorya.email',
|
|
)}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex flex-col gap-1">
|
|
<p className="font-serif text-xl font-medium tracking-tight">
|
|
{t(
|
|
'pages.contact.sections.second.kaleen.title',
|
|
)}
|
|
</p>
|
|
<p className="text-sm text-gray-500">
|
|
{t(
|
|
'pages.contact.sections.second.kaleen.subTitle',
|
|
)}
|
|
</p>
|
|
</div>
|
|
|
|
<ul className="flex flex-col gap-2">
|
|
<li className="flex items-center gap-2 text-sm">
|
|
<MapPin size={16} />{' '}
|
|
{t(
|
|
'pages.contact.sections.second.kaleen.address',
|
|
)}
|
|
</li>{' '}
|
|
<li className="flex items-center gap-2 text-sm">
|
|
<Phone size={16} />{' '}
|
|
{t(
|
|
'pages.contact.sections.second.kaleen.phone',
|
|
)}
|
|
</li>
|
|
</ul>
|
|
<a
|
|
href="https://maps.app.goo.gl/666dbJEfsVvjJ3fu9"
|
|
target="_blank"
|
|
className="cursor-pointer"
|
|
>
|
|
<Button
|
|
className="w-full cursor-pointer border border-primary text-primary ring-primary"
|
|
variant={'outline'}
|
|
>
|
|
{t(
|
|
'pages.contact.sections.second.kaleen.button',
|
|
)}
|
|
</Button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mx-auto flex w-full max-w-3xl flex-col gap-8 py-12">
|
|
<div className="flex flex-col gap-1">
|
|
<h3 className="font-serif text-3xl font-medium">
|
|
{t('pages.contact.sections.third.title')}
|
|
</h3>
|
|
<p className="text-sm text-gray-500">
|
|
{t('pages.contact.sections.third.subTitle')}
|
|
</p>
|
|
</div>
|
|
|
|
<Form action={'/'} className="flex flex-col gap-2">
|
|
<div>
|
|
<Label htmlFor="name">
|
|
{t(
|
|
'pages.contact.sections.third.form.name.label',
|
|
)}
|
|
</Label>
|
|
<Input
|
|
placeholder={t(
|
|
'pages.contact.sections.third.form.name.input',
|
|
)}
|
|
id="name"
|
|
name="name"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="email">
|
|
{t(
|
|
'pages.contact.sections.third.form.email.label',
|
|
)}
|
|
</Label>
|
|
<Input
|
|
placeholder={t(
|
|
'pages.contact.sections.third.form.email.input',
|
|
)}
|
|
id="email"
|
|
name="email"
|
|
/>
|
|
</div>{' '}
|
|
<div>
|
|
<Label htmlFor="email">
|
|
{t(
|
|
'pages.contact.sections.third.form.inquiry.label',
|
|
)}
|
|
</Label>
|
|
<Select>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue
|
|
placeholder={t(
|
|
'pages.contact.sections.third.form.inquiry.input',
|
|
)}
|
|
/>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="problem">
|
|
Problem in product
|
|
</SelectItem>
|
|
<SelectItem value="contact">
|
|
Contacting
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="message">
|
|
{t(
|
|
'pages.contact.sections.third.form.message.label',
|
|
)}
|
|
</Label>
|
|
<Textarea
|
|
id="message"
|
|
placeholder={t(
|
|
'pages.contact.sections.third.form.message.input',
|
|
)}
|
|
/>
|
|
</div>
|
|
<Button type="submit" className="my-4">
|
|
{t('pages.contact.sections.third.form.button')}
|
|
</Button>
|
|
</Form>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-8">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<h4 className="text-center font-serif text-3xl font-medium tracking-tight">
|
|
{t('pages.contact.sections.fourth.title')}
|
|
</h4>
|
|
<p className="text-center text-sm text-gray-500">
|
|
{t('pages.contact.sections.fourth.desc')} <br />{' '}
|
|
{t('pages.contact.sections.fourth.desc2')}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<a href="tel:9802341880">
|
|
<Button className="cursor-pointer">
|
|
<Phone />{' '}
|
|
{t('pages.contact.sections.fourth.callBtn')}
|
|
</Button>
|
|
</a>
|
|
<a href="mailto:info@soory.com">
|
|
<Button
|
|
variant={'outline'}
|
|
className="cursor-pointer border border-primary text-primary ring-primary"
|
|
>
|
|
<Mail />{' '}
|
|
{t(
|
|
'pages.contact.sections.fourth.emailBtn',
|
|
)}
|
|
</Button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Layout>
|
|
</>
|
|
);
|
|
}
|