{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["button","@efferd/x-icon"],"name":"contact-2","description":"Three-card contact layout with email, community, and social links.","categories":["contact"],"files":[{"path":"registry/blocks/contact/2/contact.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport { XIcon } from \"@/components/icons/x-icon\";\nimport { Button } from \"@/components/ui/button\";\n\nconst APP_EMAIL = \"mail@example.com\";\n\nconst data = [\n\t{\n\t\ttitle: \"Email Us\",\n\t\tdescription: \"We respond to all emails within 24 hours.\",\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\thref: `mailto:${APP_EMAIL}`,\n\t\tlabel: APP_EMAIL,\n\t},\n\t{\n\t\ttitle: \"Send us DM\",\n\t\tdescription: \"Send us a direct message on X for quick answers.\",\n\t\ticon: <XIcon />,\n\t\thref: \"#\",\n\t\tlabel: \"@efferdui\",\n\t},\n\t{\n\t\ttitle: \"Join the community\",\n\t\tdescription: \"Join our community to connect with other users.\",\n\t\ticon: (\n\t\t\t<IconPlaceholder\n\t\t\t\thugeicons=\"UserGroupIcon\"\n\t\t\t\tlucide=\"Users\"\n\t\t\t\tphosphor=\"UsersIcon\"\n\t\t\t\tremixicon=\"RiGroupLine\"\n\t\t\t\ttabler=\"IconUsers\"\n\t\t\t/>\n\t\t),\n\t\thref: \"#\",\n\t\tlabel: \"Join Discord\",\n\t},\n];\n\nexport function Contact() {\n\treturn (\n\t\t<div className=\"mx-auto max-w-4xl\">\n\t\t\t<div className=\"mb-12 flex max-w-md flex-col justify-center gap-2\">\n\t\t\t\t<h1 className=\"font-bold text-2xl md:text-3xl\">Contact Us</h1>\n\t\t\t\t<p className=\"text-base text-muted-foreground\">\n\t\t\t\t\tWe&apos;re here to help and answer any question you might have, We\n\t\t\t\t\tlook forward to hearing from you.\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t\t<div className=\"grid gap-0.5 overflow-hidden rounded-lg bg-muted p-0.5 md:grid-cols-3 dark:bg-muted/50\">\n\t\t\t\t{data.map((item) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"flex flex-col gap-3 rounded-lg bg-background px-6 py-6 shadow-xs\"\n\t\t\t\t\t\tkey={item.title}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"flex items-center gap-x-2\",\n\t\t\t\t\t\t\t\t\"[&_svg]:size-4 [&_svg]:text-muted-foreground\"\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{item.icon}\n\t\t\t\t\t\t\t<h2 className=\"text-sm\">{item.title}</h2>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<p className=\"text-muted-foreground text-sm\">{item.description}</p>\n\t\t\t\t\t\t<div className=\"mt-1 flex items-center gap-x-2\">\n\t\t\t\t\t\t\t<Button asChild variant=\"link\">\n\t\t\t\t\t\t\t\t<a href={item.href}>{item.label}</a>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"}]}