contact-5

1import { cn } from "@/lib/utils";
2import { Button } from "@/components/ui/button";
3import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
4import { Input } from "@/components/ui/input";
5import { Textarea } from "@/components/ui/textarea";
6import { DecorIcon } from "@/components/decor-icon";
7 
8const data = [
9	{
10		title: "Call Us Today!",
11		value: "+1 (555) 123-4567",
12		icon: (
13			<IconPlaceholder
14				hugeicons="Call02Icon"
15				lucide="Phone"
16				phosphor="PhoneIcon"
17				remixicon="RiPhoneLine"
18				tabler="IconPhone"
19			/>
20		),
21	},
22	{
23		title: "Send an Email",
24		value: "mail@example.com",
25		icon: (
26			<IconPlaceholder
27				hugeicons="MailSend01Icon"
28				lucide="Mail"
29				phosphor="EnvelopeIcon"
30				remixicon="RiMailLine"
31				tabler="IconMail"
32			/>
33		),
34	},
35];
36 
37export function ContactSection() {
38	return (
39		<div className="relative mx-auto w-full max-w-lg border">
40			<div className="border-b px-6 py-8">
41				<div className="mb-8 flex flex-col gap-2">
42					<h1 className="font-semibold text-xl md:text-2xl">Get in touch</h1>{" "}
43					<p className="text-muted-foreground text-sm">
44						Have a question, feedback, or want to collaborate? <br /> We'd love
45						to hear from you.
46					</p>
47				</div>
48 
49				<div className="grid gap-2 md:grid-cols-2">
50					{data.map((item) => (
51						<div className="flex items-center gap-4 p-2" key={item.title}>
52							<div className="[&_svg]:size-5 [&_svg]:text-muted-foreground">
53								{item.icon}
54							</div>
55							<div className={cn("flex flex-col gap-y-0.5")}>
56								<h2 className="text-sm">{item.title}</h2>
57								<p className="text-muted-foreground text-xs">{item.value}</p>
58							</div>
59						</div>
60					))}
61				</div>
62			</div>
63 
64			<div className="px-6 py-8">
65				<div className="mb-8 flex flex-col gap-1.5">
66					<h2 className="font-medium text-xl">Send a message</h2>{" "}
67					<p className="text-muted-foreground text-sm">
68						Fill out the form below and our team will get back to you shortly.
69					</p>
70				</div>
71				<ContactForm />
72			</div>
73			<DecorIcon position="top-left" />
74			<DecorIcon position="top-right" />
75			<DecorIcon position="bottom-left" />
76			<DecorIcon position="bottom-right" />
77		</div>
78	);
79}
80 
81function ContactForm() {
82	return (
83		<form className="w-full">
84			<FieldGroup>
85				<div className="grid grid-cols-2 gap-4">
86					<Field>
87						<FieldLabel htmlFor="first-name">First name</FieldLabel>
88						<Input autoComplete="off" id="first-name" placeholder="John" />
89					</Field>
90					<Field>
91// … truncated