contact-4

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";
6 
7const contactInfo = [
8	{
9		icon: (
10			<IconPlaceholder
11				hugeicons="MailSend01Icon"
12				lucide="MailIcon"
13				phosphor="EnvelopeIcon"
14				remixicon="RiMailLine"
15				tabler="IconMail"
16			/>
17		),
18		label: "Email",
19		value: "mail@example.com",
20	},
21	{
22		icon: (
23			<IconPlaceholder
24				hugeicons="Call02Icon"
25				lucide="PhoneIcon"
26				phosphor="PhoneIcon"
27				remixicon="RiPhoneLine"
28				tabler="IconPhone"
29			/>
30		),
31		label: "Phone",
32		value: "+92 312 1234567",
33	},
34];
35 
36export function ContactSection() {
37	return (
38		<div className="relative mx-auto grid h-full w-full max-w-4xl rounded-2xl border md:grid-cols-[1fr_0.70fr]">
39			<div className="col-span-1 flex flex-col space-y-4 p-8 lg:p-10">
40				<h1 className="font-medium text-2xl tracking-wide md:text-3xl">
41					Contact With Us
42				</h1>
43				<p className="max-w-md text-muted-foreground text-sm leading-relaxed md:text-base">
44					If you have any questions regarding our Services or need help, please
45					fill out the form here.
46				</p>
47				<p className="max-w-md text-muted-foreground text-xs leading-relaxed md:text-sm">
48					We do our best to respond within 1 business day.
49				</p>
50				<div className="grid gap-4">
51					{contactInfo?.map((info) => (
52						<ContactInfo key={info.label} {...info} />
53					))}
54				</div>
55			</div>
56			<div className="col-span-1 flex items-center border-t p-8 md:border-t-0 md:border-l">
57				<ContactForm />
58			</div>
59		</div>
60	);
61}
62 
63function ContactForm() {
64	return (
65		<form className="w-full">
66			<FieldGroup>
67				<Field>
68					<FieldLabel htmlFor="full-name">Full name</FieldLabel>
69					<Input autoComplete="off" id="full-name" placeholder="John Doe" />
70				</Field>
71				<Field>
72					<FieldLabel htmlFor="email">Email</FieldLabel>
73					<Input
74						autoComplete="off"
75						id="email"
76						placeholder="johndoe@example.com"
77						type="email"
78					/>
79				</Field>
80				<Field>
81					<FieldLabel htmlFor="phone">Phone</FieldLabel>
82					<Input
83						autoComplete="off"
84						id="phone"
85						placeholder="+1 (555) 123-4567"
86						type="tel"
87					/>
88				</Field>
89				<Field>
90					<FieldLabel htmlFor="message">Message</FieldLabel>
91					<Textarea
92						autoComplete="off"
93						id="message"
94						placeholder="Your message"
95					/>
96				</Field>
97// … truncated