187 lines
9.4 KiB
TypeScript
187 lines
9.4 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 { Form, Head } from '@inertiajs/react';
|
|
import { Mail, MapPin, Phone } from 'lucide-react';
|
|
|
|
export default function Contact() {
|
|
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">
|
|
Connect with Kaleen Carpets
|
|
</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.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col gap-8">
|
|
<h2 className="text-center font-serif text-3xl font-medium tracking-tight">
|
|
Our Global Offices
|
|
</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
|
|
</p>
|
|
<p className="text-sm text-gray-500">
|
|
Our global presence to serve you better.
|
|
</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
|
|
</li>{' '}
|
|
<li className="flex items-center gap-2 text-sm">
|
|
<Phone size={16} /> [+977-1] 4780923,
|
|
4783003
|
|
</li>{' '}
|
|
<li className="flex items-center gap-2 text-sm">
|
|
<Mail size={16} />{' '}
|
|
sooryacarpets@gmail.com
|
|
</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
|
|
</p>
|
|
<p className="text-sm text-gray-500">
|
|
Our global presence to serve you better.
|
|
</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
|
|
</li>{' '}
|
|
<li className="flex items-center gap-2 text-sm">
|
|
<Phone size={16} /> 9802341880
|
|
</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'}
|
|
>
|
|
Visit Studio
|
|
</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">
|
|
Send us a Message
|
|
</h3>
|
|
<p className="text-sm text-gray-500">
|
|
Fill out the form below and we'll get back to
|
|
you as soon as possible.
|
|
</p>
|
|
</div>
|
|
|
|
<Form action={'/'} className="flex flex-col gap-2">
|
|
<div>
|
|
<Label htmlFor="name">Name</Label>
|
|
<Input
|
|
placeholder="Full Name"
|
|
id="name"
|
|
name="name"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input
|
|
placeholder="your.email@example.com"
|
|
id="email"
|
|
name="email"
|
|
/>
|
|
</div>{' '}
|
|
<div>
|
|
<Label htmlFor="email">Email</Label>
|
|
<Select>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue placeholder="Select an inquiry type" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="problem">
|
|
Problem in product
|
|
</SelectItem>
|
|
<SelectItem value="contact">
|
|
Contacting
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="message">Message</Label>
|
|
<Textarea
|
|
id="message"
|
|
placeholder="Tell us how can we help you"
|
|
/>
|
|
</div>
|
|
<Button type="submit" className="my-4">
|
|
Send Message
|
|
</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
|
|
</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.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<a href="tel:9802341880">
|
|
<Button className="cursor-pointer">
|
|
<Phone /> Call Us Now
|
|
</Button>
|
|
</a>
|
|
<a href="mailto:info@soory.com">
|
|
<Button
|
|
variant={'outline'}
|
|
className="cursor-pointer border border-primary text-primary ring-primary"
|
|
>
|
|
<Mail /> Email Our Team
|
|
</Button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Layout>
|
|
</>
|
|
);
|
|
}
|