contact-2

1import { type LucideIcon, PlusIcon } from "lucide-react";
2import type React from "react";
3import { cn } from "@/lib/utils";
4 
5type ContactInfoProps = React.ComponentProps<"div"> & {
6  icon: LucideIcon;
7  label: string;
8  value: string;
9};
10 
11type ContactCardProps = React.ComponentProps<"div"> & {
12  // Content props
13  title?: string;
14  description?: string;
15  contactInfo?: ContactInfoProps[];
16  formSectionClassName?: string;
17};
18 
19export function ContactCard({
20  title = "Contact With Us",
21  description = "If you have any questions regarding our Services or need help, please fill out the form here. We do our best to respond within 1 business day.",
22  contactInfo,
23  className,
24  formSectionClassName,
25  children,
26  ...props
27}: ContactCardProps) {
28  return (
29    <div
30      className={cn(
31        "relative grid h-full w-full border md:grid-cols-2 lg:grid-cols-3",
32        className
33      )}
34      {...props}
35    >
36      <PlusIcon
37        className="-top-[12.5px] -left-[12.5px] absolute h-6 w-6"
38        strokeWidth={1}
39      />
40      <PlusIcon
41        className="-top-[12.5px] -right-[12.5px] absolute h-6 w-6"
42        strokeWidth={1}
43      />
44      <PlusIcon
45        className="-bottom-[12.5px] -left-[12.5px] absolute h-6 w-6"
46        strokeWidth={1}
47      />
48      <PlusIcon
49        className="-right-[12.5px] -bottom-[12.5px] absolute h-6 w-6"
50        strokeWidth={1}
51      />
52 
53      <div className="col-span-1 flex flex-col justify-between bg-secondary/50 lg:col-span-2 dark:bg-background">
54        <div className="relative h-full space-y-4 px-4 py-8 md:p-8">
55          <h1 className="font-semibold text-3xl md:text-4xl lg:text-5xl">
56            {title}
57          </h1>
58          <p className="max-w-xl text-muted-foreground text-sm md:text-base lg:text-lg">
59            {description}
60          </p>
61          <div className="grid gap-4 md:grid md:grid-cols-2 lg:grid-cols-3">
62            {contactInfo?.map((info) => (
63              <ContactInfo key={info.label} {...info} />
64            ))}
65          </div>
66        </div>
67      </div>
68      <div
69        className={cn(
70          "col-span-1 flex h-full w-full items-center border-t bg-card px-4 py-8 md:border-t-0 md:border-l dark:bg-card/50",
71          formSectionClassName
72        )}
73      >
74        {children}
75      </div>
76    </div>
77  );
78}
79 
80function ContactInfo({
81  icon: Icon,
82  label,
83  value,
84  className,
85  ...props
86}: ContactInfoProps) {
87  return (
88    <div className={cn("flex items-center gap-3 py-3", className)} {...props}>
89// … truncated