INit
This commit is contained in:
Chief-spartan-117
186
resources/js/pages/contact.tsx
Normal file
186
resources/js/pages/contact.tsx
Normal file
@@ -0,0 +1,186 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user