contact-1

1"use client";
2 
3import { type LucideIcon, Mail, MapPin, Phone } from "lucide-react";
4import type React from "react";
5import { cn } from "@/lib/utils";
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,
15      href: "#",
16      label: "GitHub",
17    },
18    {
19      icon: XIcon,
20      href: "#",
21      label: "Twitter",
22    },
23  ];
24 
25  return (
26    <div className="mx-auto h-full min-h-screen max-w-5xl lg: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 freddy.
31        </p>
32      </div>
33      <BorderSeparator />
34      <div className="grid md:grid-cols-3">
35        <Box
36          description="We respond to all emails within 24 hours."
37          icon={Mail}
38          title="Email"
39        >
40          <a
41            className="font-medium font-mono text-sm tracking-wide hover:underline"
42            href={`mailto:${APP_EMAIL}`}
43          >
44            {APP_EMAIL}
45          </a>
46        </Box>
47        <Box
48          description="Drop by our office for a chat."
49          icon={MapPin}
50          title="Office"
51        >
52          <span className="font-medium font-mono text-sm tracking-wide">
53            Office # 100, 101 Second Floor Kohinoor 1, Faisalabad, Pakistan
54          </span>
55        </Box>
56        <Box
57          className="border-b-0 md:border-r-0"
58          description="We're available Mon-Fri, 9am-5pm."
59          icon={Phone}
60          title="Phone"
61        >
62          <div>
63            <a
64              className="block font-medium font-mono text-sm tracking-wide hover:underline"
65              href={`tel:${APP_PHONE}`}
66            >
67              {APP_PHONE}
68            </a>
69            <a
70              className="block font-medium font-mono text-sm tracking-wide hover:underline"
71              href={`tel:${APP_PHONE_2}`}
72            >
73              {APP_PHONE_2}
74            </a>
75          </div>
76        </Box>
77      </div>
78      <BorderSeparator />
79      <div className="z-1 flex h-full flex-col items-center justify-center gap-4 py-24">
80        <h2 className="text-center font-medium text-2xl text-muted-foreground tracking-tight md:text-3xl">
81          Find us <span className="text-foreground">online</span>
82// … truncated