contact-3

1import { cn } from "@/lib/utils";
2import type React from "react";
3import { GithubIcon } from "@/components/icons/github-icon";
4import { XIcon } from "@/components/icons/x-icon";
5import { FullWidthDivider } from "@/components/full-width-divider";
6 
7const APP_EMAIL = "mail@example.com";
8const APP_PHONE = "+92 300 1234567";
9const APP_PHONE_2 = "+92 321 9876543";
10 
11export function Contact() {
12	const socialLinks = [
13		{
14			icon: <GithubIcon className="size-3.5 text-muted-foreground" />,
15			href: "#",
16			label: "GitHub",
17		},
18		{
19			icon: <XIcon className="size-3.5 text-muted-foreground" />,
20			href: "#",
21			label: "Twitter",
22		},
23	];
24 
25	return (
26		<div className="relative mx-auto min-h-screen max-w-5xl border-x">
27			<div className="flex grow flex-col justify-center px-4 py-18 md:items-center">
28				<h1 className="font-bold text-4xl md:text-5xl">Contact Us</h1>
29				<p className="mb-5 text-base text-muted-foreground">
30					Contact the support team at efferd.
31				</p>
32			</div>
33			<FullWidthDivider />
34			<div className="grid md:grid-cols-3">
35				<Box
36					description="We respond to all emails within 24 hours."
37					icon={
38						<IconPlaceholder
39							hugeicons="MailSend01Icon"
40							lucide="Mail"
41							phosphor="EnvelopeIcon"
42							remixicon="RiMailLine"
43							tabler="IconMail"
44						/>
45					}
46					title="Email"
47				>
48					<a
49						className="font-medium font-mono text-sm tracking-wide hover:underline"
50						href={`mailto:${APP_EMAIL}`}
51					>
52						{APP_EMAIL}
53					</a>
54				</Box>
55				<Box
56					description="Drop by our office for a chat."
57					icon={
58						<IconPlaceholder
59							hugeicons="Location01Icon"
60							lucide="MapPin"
61							phosphor="MapPinIcon"
62							remixicon="RiMapPinLine"
63							tabler="IconMapPin"
64						/>
65					}
66					title="Office"
67				>
68					<span className="font-medium font-mono text-sm tracking-wide">
69						Office # 100, 101 Second Floor Kohinoor 1, Faisalabad, Pakistan
70					</span>
71				</Box>
72				<Box
73					className="border-b-0 md:border-r-0"
74					description="We're available Mon-Fri, 9am-5pm."
75					icon={
76						<IconPlaceholder
77							hugeicons="Call02Icon"
78							lucide="Phone"
79							phosphor="PhoneIcon"
80							remixicon="RiPhoneLine"
81							tabler="IconPhone"
82						/>
83					}
84					title="Phone"
85				>
86					<div>
87						<a
88							className="block font-medium font-mono text-sm tracking-wide hover:underline"
89							href={`tel:${APP_PHONE}`}
90						>
91							{APP_PHONE}
92						</a>
93						<a
94// … truncated