feat: New design and optimization
This commit is contained in:
@@ -10,10 +10,12 @@ import {
|
||||
} 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>
|
||||
@@ -21,64 +23,79 @@ export default function Contact() {
|
||||
<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">
|
||||
Connect with Kaleen Carpets
|
||||
{t('pages.contact.sections.first.title')}
|
||||
</h1>
|
||||
<p className="text-center text-sm">
|
||||
We are here to assist you with any inquiries,
|
||||
bespoke design requests, or partnership
|
||||
opportunities. <br /> Reach out to our team through
|
||||
our offices or the contact form below.
|
||||
{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">
|
||||
Our Global Offices
|
||||
{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">
|
||||
Soorya Carpet Industries
|
||||
{t(
|
||||
'pages.contact.sections.second.soorya.title',
|
||||
)}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
Our global presence to serve you better.
|
||||
{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} /> G.P.O Box 1765 2
|
||||
Swet Binayak Marg Thapathali -11,
|
||||
Kathmandu, Nepal
|
||||
<MapPin size={16} />{' '}
|
||||
{t(
|
||||
'pages.contact.sections.second.soorya.address',
|
||||
)}
|
||||
</li>{' '}
|
||||
<li className="flex items-center gap-2 text-sm">
|
||||
<Phone size={16} /> [+977-1] 4780923,
|
||||
4783003
|
||||
<Phone size={16} />{' '}
|
||||
{t(
|
||||
'pages.contact.sections.second.soorya.phone',
|
||||
)}
|
||||
</li>{' '}
|
||||
<li className="flex items-center gap-2 text-sm">
|
||||
<Mail size={16} />{' '}
|
||||
sooryacarpets@gmail.com
|
||||
{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">
|
||||
Kaleen Studio
|
||||
{t(
|
||||
'pages.contact.sections.second.kaleen.title',
|
||||
)}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
Our global presence to serve you better.
|
||||
{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} /> Kadel Chautari
|
||||
Prasuti Griha Marg Ward No. 11,
|
||||
Babarmahal Kathmandu, Nepal
|
||||
<MapPin size={16} />{' '}
|
||||
{t(
|
||||
'pages.contact.sections.second.kaleen.address',
|
||||
)}
|
||||
</li>{' '}
|
||||
<li className="flex items-center gap-2 text-sm">
|
||||
<Phone size={16} /> 9802341880
|
||||
<Phone size={16} />{' '}
|
||||
{t(
|
||||
'pages.contact.sections.second.kaleen.phone',
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
<a
|
||||
@@ -90,7 +107,9 @@ export default function Contact() {
|
||||
className="w-full cursor-pointer border border-primary text-primary ring-primary"
|
||||
variant={'outline'}
|
||||
>
|
||||
Visit Studio
|
||||
{t(
|
||||
'pages.contact.sections.second.kaleen.button',
|
||||
)}
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
@@ -100,36 +119,55 @@ export default function Contact() {
|
||||
<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">
|
||||
Send us a Message
|
||||
{t('pages.contact.sections.third.title')}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
Fill out the form below and we'll get back to
|
||||
you as soon as possible.
|
||||
{t('pages.contact.sections.third.subTitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Form action={'/'} className="flex flex-col gap-2">
|
||||
<div>
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Label htmlFor="name">
|
||||
{t(
|
||||
'pages.contact.sections.third.form.name.label',
|
||||
)}
|
||||
</Label>
|
||||
<Input
|
||||
placeholder="Full Name"
|
||||
placeholder={t(
|
||||
'pages.contact.sections.third.form.name.input',
|
||||
)}
|
||||
id="name"
|
||||
name="name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Label htmlFor="email">
|
||||
{t(
|
||||
'pages.contact.sections.third.form.email.label',
|
||||
)}
|
||||
</Label>
|
||||
<Input
|
||||
placeholder="your.email@example.com"
|
||||
placeholder={t(
|
||||
'pages.contact.sections.third.form.email.input',
|
||||
)}
|
||||
id="email"
|
||||
name="email"
|
||||
/>
|
||||
</div>{' '}
|
||||
<div>
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Label htmlFor="email">
|
||||
{t(
|
||||
'pages.contact.sections.third.form.inquiry.label',
|
||||
)}
|
||||
</Label>
|
||||
<Select>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select an inquiry type" />
|
||||
<SelectValue
|
||||
placeholder={t(
|
||||
'pages.contact.sections.third.form.inquiry.input',
|
||||
)}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="problem">
|
||||
@@ -142,31 +180,38 @@ export default function Contact() {
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="message">Message</Label>
|
||||
<Label htmlFor="message">
|
||||
{t(
|
||||
'pages.contact.sections.third.form.message.label',
|
||||
)}
|
||||
</Label>
|
||||
<Textarea
|
||||
id="message"
|
||||
placeholder="Tell us how can we help you"
|
||||
placeholder={t(
|
||||
'pages.contact.sections.third.form.message.input',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" className="my-4">
|
||||
Send Message
|
||||
{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">
|
||||
Direct Engagement
|
||||
{t('pages.contact.sections.fourth.title')}
|
||||
</h4>
|
||||
<p className="text-center text-sm text-gray-500">
|
||||
Prefer to speak with us directly or send a quick
|
||||
email? <br /> Our team is ready to assist.
|
||||
{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 /> Call Us Now
|
||||
<Phone />{' '}
|
||||
{t('pages.contact.sections.fourth.callBtn')}
|
||||
</Button>
|
||||
</a>
|
||||
<a href="mailto:info@soory.com">
|
||||
@@ -174,7 +219,10 @@ export default function Contact() {
|
||||
variant={'outline'}
|
||||
className="cursor-pointer border border-primary text-primary ring-primary"
|
||||
>
|
||||
<Mail /> Email Our Team
|
||||
<Mail />{' '}
|
||||
{t(
|
||||
'pages.contact.sections.fourth.emailBtn',
|
||||
)}
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user