{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["button","field","input","textarea"],"name":"contact-4","description":"Modern contact card with info section and built-in form area.","categories":["contact"],"files":[{"path":"registry/blocks/contact/4/contact-section.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Field, FieldGroup, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nconst contactInfo = [\n\t{\n\t\ticon: (\n\t\t\t<IconPlaceholder\n\t\t\t\thugeicons=\"MailSend01Icon\"\n\t\t\t\tlucide=\"MailIcon\"\n\t\t\t\tphosphor=\"EnvelopeIcon\"\n\t\t\t\tremixicon=\"RiMailLine\"\n\t\t\t\ttabler=\"IconMail\"\n\t\t\t/>\n\t\t),\n\t\tlabel: \"Email\",\n\t\tvalue: \"mail@example.com\",\n\t},\n\t{\n\t\ticon: (\n\t\t\t<IconPlaceholder\n\t\t\t\thugeicons=\"Call02Icon\"\n\t\t\t\tlucide=\"PhoneIcon\"\n\t\t\t\tphosphor=\"PhoneIcon\"\n\t\t\t\tremixicon=\"RiPhoneLine\"\n\t\t\t\ttabler=\"IconPhone\"\n\t\t\t/>\n\t\t),\n\t\tlabel: \"Phone\",\n\t\tvalue: \"+92 312 1234567\",\n\t},\n];\n\nexport function ContactSection() {\n\treturn (\n\t\t<div className=\"relative mx-auto grid h-full w-full max-w-4xl rounded-2xl border md:grid-cols-[1fr_0.70fr]\">\n\t\t\t<div className=\"col-span-1 flex flex-col space-y-4 p-8 lg:p-10\">\n\t\t\t\t<h1 className=\"font-medium text-2xl tracking-wide md:text-3xl\">\n\t\t\t\t\tContact With Us\n\t\t\t\t</h1>\n\t\t\t\t<p className=\"max-w-md text-muted-foreground text-sm leading-relaxed md:text-base\">\n\t\t\t\t\tIf you have any questions regarding our Services or need help, please\n\t\t\t\t\tfill out the form here.\n\t\t\t\t</p>\n\t\t\t\t<p className=\"max-w-md text-muted-foreground text-xs leading-relaxed md:text-sm\">\n\t\t\t\t\tWe do our best to respond within 1 business day.\n\t\t\t\t</p>\n\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t{contactInfo?.map((info) => (\n\t\t\t\t\t\t<ContactInfo key={info.label} {...info} />\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div className=\"col-span-1 flex items-center border-t p-8 md:border-t-0 md:border-l\">\n\t\t\t\t<ContactForm />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction ContactForm() {\n\treturn (\n\t\t<form className=\"w-full\">\n\t\t\t<FieldGroup>\n\t\t\t\t<Field>\n\t\t\t\t\t<FieldLabel htmlFor=\"full-name\">Full name</FieldLabel>\n\t\t\t\t\t<Input autoComplete=\"off\" id=\"full-name\" placeholder=\"John Doe\" />\n\t\t\t\t</Field>\n\t\t\t\t<Field>\n\t\t\t\t\t<FieldLabel htmlFor=\"email\">Email</FieldLabel>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\tid=\"email\"\n\t\t\t\t\t\tplaceholder=\"johndoe@example.com\"\n\t\t\t\t\t\ttype=\"email\"\n\t\t\t\t\t/>\n\t\t\t\t</Field>\n\t\t\t\t<Field>\n\t\t\t\t\t<FieldLabel htmlFor=\"phone\">Phone</FieldLabel>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\tid=\"phone\"\n\t\t\t\t\t\tplaceholder=\"+1 (555) 123-4567\"\n\t\t\t\t\t\ttype=\"tel\"\n\t\t\t\t\t/>\n\t\t\t\t</Field>\n\t\t\t\t<Field>\n\t\t\t\t\t<FieldLabel htmlFor=\"message\">Message</FieldLabel>\n\t\t\t\t\t<Textarea\n\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\tid=\"message\"\n\t\t\t\t\t\tplaceholder=\"Your message\"\n\t\t\t\t\t/>\n\t\t\t\t</Field>\n\t\t\t</FieldGroup>\n\t\t\t<Button className=\"mt-8 w-full\" type=\"button\">\n\t\t\t\tSubmit\n\t\t\t</Button>\n\t\t</form>\n\t);\n}\n\ntype ContactInfoProps = React.ComponentProps<\"div\"> & {\n\ticon: React.ReactNode;\n\tlabel: string;\n\tvalue: string;\n};\n\nfunction ContactInfo({\n\ticon,\n\tlabel,\n\tvalue,\n\tclassName,\n\t...props\n}: ContactInfoProps) {\n\treturn (\n\t\t<div className={cn(\"flex items-center gap-3 py-3\", className)} {...props}>\n\t\t\t<div className=\"rounded-lg border bg-card p-3 shadow-xs [&_svg]:size-5\">\n\t\t\t\t{icon}\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<p className=\"font-medium\">{label}</p>\n\t\t\t\t<p className=\"text-muted-foreground text-xs\">{value}</p>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"}]}