{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["button","field","input","textarea","@efferd/decor-icon"],"name":"contact-5","description":"Bordered contact section with key details and a two-column form.","categories":["contact"],"files":[{"path":"registry/blocks/contact/5/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\";\nimport { DecorIcon } from \"@/components/decor-icon\";\n\nconst data = [\n\t{\n\t\ttitle: \"Call Us Today!\",\n\t\tvalue: \"+1 (555) 123-4567\",\n\t\ticon: (\n\t\t\t<IconPlaceholder\n\t\t\t\thugeicons=\"Call02Icon\"\n\t\t\t\tlucide=\"Phone\"\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},\n\t{\n\t\ttitle: \"Send an Email\",\n\t\tvalue: \"mail@example.com\",\n\t\ticon: (\n\t\t\t<IconPlaceholder\n\t\t\t\thugeicons=\"MailSend01Icon\"\n\t\t\t\tlucide=\"Mail\"\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},\n];\n\nexport function ContactSection() {\n\treturn (\n\t\t<div className=\"relative mx-auto w-full max-w-lg border\">\n\t\t\t<div className=\"border-b px-6 py-8\">\n\t\t\t\t<div className=\"mb-8 flex flex-col gap-2\">\n\t\t\t\t\t<h1 className=\"font-semibold text-xl md:text-2xl\">Get in touch</h1>{\" \"}\n\t\t\t\t\t<p className=\"text-muted-foreground text-sm\">\n\t\t\t\t\t\tHave a question, feedback, or want to collaborate? <br /> We'd love\n\t\t\t\t\t\tto hear from you.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"grid gap-2 md:grid-cols-2\">\n\t\t\t\t\t{data.map((item) => (\n\t\t\t\t\t\t<div className=\"flex items-center gap-4 p-2\" key={item.title}>\n\t\t\t\t\t\t\t<div className=\"[&_svg]:size-5 [&_svg]:text-muted-foreground\">\n\t\t\t\t\t\t\t\t{item.icon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className={cn(\"flex flex-col gap-y-0.5\")}>\n\t\t\t\t\t\t\t\t<h2 className=\"text-sm\">{item.title}</h2>\n\t\t\t\t\t\t\t\t<p className=\"text-muted-foreground text-xs\">{item.value}</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div className=\"px-6 py-8\">\n\t\t\t\t<div className=\"mb-8 flex flex-col gap-1.5\">\n\t\t\t\t\t<h2 className=\"font-medium text-xl\">Send a message</h2>{\" \"}\n\t\t\t\t\t<p className=\"text-muted-foreground text-sm\">\n\t\t\t\t\t\tFill out the form below and our team will get back to you shortly.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t\t<ContactForm />\n\t\t\t</div>\n\t\t\t<DecorIcon position=\"top-left\" />\n\t\t\t<DecorIcon position=\"top-right\" />\n\t\t\t<DecorIcon position=\"bottom-left\" />\n\t\t\t<DecorIcon position=\"bottom-right\" />\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<div className=\"grid grid-cols-2 gap-4\">\n\t\t\t\t\t<Field>\n\t\t\t\t\t\t<FieldLabel htmlFor=\"first-name\">First name</FieldLabel>\n\t\t\t\t\t\t<Input autoComplete=\"off\" id=\"first-name\" placeholder=\"John\" />\n\t\t\t\t\t</Field>\n\t\t\t\t\t<Field>\n\t\t\t\t\t\t<FieldLabel htmlFor=\"last-name\">Last name</FieldLabel>\n\t\t\t\t\t\t<Input autoComplete=\"off\" id=\"last-name\" placeholder=\"Doe\" />\n\t\t\t\t\t</Field>\n\t\t\t\t</div>\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"}]}