contact-two

1<script>
2	import Button from "$COMPONENTS$/ui/button/button.svelte";
3	import { Card } from "$COMPONENTS$/ui/card";
4	import Input from "$COMPONENTS$/ui/input/input.svelte";
5	import Label from "$COMPONENTS$/ui/label/label.svelte";
6	import * as Select from "$COMPONENTS$/ui/select/index.js";
7	import { Textarea } from "$COMPONENTS$/ui/textarea";
8</script>
9 
10<section class="py-32">
11	<div class="mx-auto max-w-4xl px-4 lg:px-0">
12		<h1 class="mb-12 text-center text-4xl font-semibold lg:text-5xl">
13			Help us route your inquiry
14		</h1>
15 
16		<div class="grid divide-y border md:grid-cols-2 md:gap-4 md:divide-x md:divide-y-0">
17			<div class="flex flex-col justify-between space-y-8 p-6 sm:p-12">
18				<div>
19					<h2 class="mb-3 text-lg font-semibold">Collaborate</h2>
20					<a
21						href="mailto:hello@tailus.io"
22						class="text-lg text-blue-600 hover:underline dark:text-blue-400"
23					>
24						hello@tailus.io
25					</a>
26					<p class="mt-3 text-sm">+243 000 000 000</p>
27				</div>
28			</div>
29			<div class="flex flex-col justify-between space-y-8 p-6 sm:p-12">
30				<div>
31					<h3 class="mb-3 text-lg font-semibold">Press</h3>
32					<a
33						href="mailto:press@tailus.io"
34						class="text-lg text-blue-600 hover:underline dark:text-blue-400"
35					>
36						press@tailus.io
37					</a>
38					<p class="mt-3 text-sm">+243 000 000 000</p>
39				</div>
40			</div>
41		</div>
42 
43		<div
44			class="h-3 border-x bg-[repeating-linear-gradient(-45deg,var(--color-border),var(--color-border)_1px,transparent_1px,transparent_6px)]"
45		></div>
46		<form action="" class="border px-4 py-12 lg:px-0 lg:py-24">
47			<Card class="mx-auto max-w-lg p-8 sm:p-16">
48				<h3 class="text-xl font-semibold">Let's get you to the right place</h3>
49				<p class="mt-4 text-sm">
50					Reach out to our sales team! We’re eager to learn more about how you plan to use
51					our application.
52				</p>
53 
54				<div class="mt-12 space-y-6 *:space-y-3 **:[&>label]:block">
55					<div>
56						<Label for="name" class="space-y-2">Full name</Label>
57						<Input type="text" id="name" placeholder="John Doe" required />
58					</div>
59					<div>
60						<Label for="email" class="space-y-2">Work Email</Label>
61						<Input type="email" id="email" placeholder="you@company.com" required />
62					</div>
63					<div>
64						<Label for="country" class="space-y-2">Country/Region</Label>
65						<Select.Root type="single">
66							<Select.Trigger>Select a country</Select.Trigger>
67							<Select.Content>
68								<Select.Item value="1">DR Congo</Select.Item>
69// … truncated