contact-one

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-3xl px-8 lg:px-0">
12		<h1 class="text-center text-4xl font-semibold lg:text-5xl">Contact Sales</h1>
13		<p class="mt-4 text-center">
14			We'll help you find the right plan and pricing for your business.
15		</p>
16 
17		<Card class="mx-auto mt-12 max-w-lg p-8 shadow-md sm:p-16">
18			<div>
19				<h2 class="text-xl font-semibold">Let's get you to the right place</h2>
20				<p class="mt-4 text-sm">
21					Reach out to our sales team! We're eager to learn more about how you plan to use
22					our application.
23				</p>
24			</div>
25 
26			<form action="" class="mt-12 space-y-6 *:space-y-3 **:[&>label]:block">
27				<div>
28					<Label for="name">Full name</Label>
29					<Input type="text" id="name" placeholder="John Doe" required />
30				</div>
31 
32				<div>
33					<Label for="email">Work Email</Label>
34					<Input type="email" id="email" placeholder="you@company.com" required />
35				</div>
36 
37				<div>
38					<Label for="country">Country/Region</Label>
39					<Select.Root type="single">
40						<Select.Trigger>Select Country/Region</Select.Trigger>
41						<Select.Content>
42							<Select.Item value="1">DR Congo</Select.Item>
43							<Select.Item value="2">United States</Select.Item>
44							<Select.Item value="3">France</Select.Item>
45						</Select.Content>
46					</Select.Root>
47				</div>
48 
49				<div>
50					<Label for="website">Company Website</Label>
51					<Input type="url" id="website" placeholder="https://company.com" />
52					<span class="inline-block text-sm text-muted-foreground"
53						>Must start with 'https'</span
54					>
55				</div>
56 
57				<div>
58					<Label for="job">Job function</Label>
59					<Select.Root type="single">
60						<Select.Trigger>Select Job Function</Select.Trigger>
61						<Select.Content>
62							<Select.Item value="1">Finance</Select.Item>
63							<Select.Item value="2">Education</Select.Item>
64							<Select.Item value="3">Legal</Select.Item>
65							<Select.Item value="4">More</Select.Item>
66						</Select.Content>
67					</Select.Root>
68				</div>
69 
70				<div>
71					<Label for="msg">Message</Label>
72					<Textarea id="msg" rows={3} placeholder="Tell us about your needs..." />
73				</div>
74 
75// … truncated