contact-1

1import { cn } from "@/lib/utils";
2import { FullWidthDivider } from "@/components/full-width-divider";
3 
4const data = [
5	{
6		title: "Call Us Today!",
7		value: "+1 (555) 123-4567",
8		icon: (
9			<IconPlaceholder
10				hugeicons="Call02Icon"
11				lucide="Phone"
12				phosphor="PhoneIcon"
13				remixicon="RiPhoneLine"
14				tabler="IconPhone"
15			/>
16		),
17	},
18	{
19		title: "Send an Email",
20		value: "mail@example.com",
21		icon: (
22			<IconPlaceholder
23				hugeicons="MailSend01Icon"
24				lucide="Mail"
25				phosphor="EnvelopeIcon"
26				remixicon="RiMailLine"
27				tabler="IconMail"
28			/>
29		),
30	},
31	{
32		title: "Visit Our Office",
33		value: "100 Smith Street, VIC",
34		icon: (
35			<IconPlaceholder
36				hugeicons="Location01Icon"
37				lucide="MapPin"
38				phosphor="MapPinIcon"
39				remixicon="RiMapPinLine"
40				tabler="IconMapPin"
41			/>
42		),
43	},
44];
45 
46export function Contact() {
47	return (
48		<div className="mx-auto max-w-4xl">
49			<h2 className="mb-6 font-medium text-lg md:text-2xl">
50				Have Questions? Get in Touch!
51			</h2>
52			<div className="relative">
53				<FullWidthDivider position="top" />
54				<div className="grid gap-px overflow-hidden bg-border px-px md:grid-cols-3">
55					{data.map((item) => (
56						<div
57							className="flex items-center gap-3 bg-background p-2 shadow-xs"
58							key={item.title}
59						>
60							<div
61								className={cn(
62									"flex size-12 shrink-0 items-center justify-center rounded-lg bg-muted/50",
63									"[&_svg]:size-4 [&_svg]:text-muted-foreground"
64								)}
65							>
66								{item.icon}
67							</div>
68							<div className={cn("flex flex-col gap-y-0.5")}>
69								<h2 className="text-sm">{item.title}</h2>
70								<p className="text-muted-foreground text-xs">{item.value}</p>
71							</div>
72						</div>
73					))}
74				</div>
75				<FullWidthDivider position="bottom" />
76			</div>
77		</div>
78	);
79}