{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["@efferd/full-width-divider","@efferd/github-icon","@efferd/x-icon"],"name":"contact-3","description":"Elegant contact page with office info, email, phone, and social links.","categories":["contact"],"files":[{"path":"registry/blocks/contact/3/contact.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport type React from \"react\";\nimport { GithubIcon } from \"@/components/icons/github-icon\";\nimport { XIcon } from \"@/components/icons/x-icon\";\nimport { FullWidthDivider } from \"@/components/full-width-divider\";\n\nconst APP_EMAIL = \"mail@example.com\";\nconst APP_PHONE = \"+92 300 1234567\";\nconst APP_PHONE_2 = \"+92 321 9876543\";\n\nexport function Contact() {\n\tconst socialLinks = [\n\t\t{\n\t\t\ticon: <GithubIcon className=\"size-3.5 text-muted-foreground\" />,\n\t\t\thref: \"#\",\n\t\t\tlabel: \"GitHub\",\n\t\t},\n\t\t{\n\t\t\ticon: <XIcon className=\"size-3.5 text-muted-foreground\" />,\n\t\t\thref: \"#\",\n\t\t\tlabel: \"Twitter\",\n\t\t},\n\t];\n\n\treturn (\n\t\t<div className=\"relative mx-auto min-h-screen max-w-5xl border-x\">\n\t\t\t<div className=\"flex grow flex-col justify-center px-4 py-18 md:items-center\">\n\t\t\t\t<h1 className=\"font-bold text-4xl md:text-5xl\">Contact Us</h1>\n\t\t\t\t<p className=\"mb-5 text-base text-muted-foreground\">\n\t\t\t\t\tContact the support team at efferd.\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t\t<FullWidthDivider />\n\t\t\t<div className=\"grid md:grid-cols-3\">\n\t\t\t\t<Box\n\t\t\t\t\tdescription=\"We respond to all emails within 24 hours.\"\n\t\t\t\t\ticon={\n\t\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\t\thugeicons=\"MailSend01Icon\"\n\t\t\t\t\t\t\tlucide=\"Mail\"\n\t\t\t\t\t\t\tphosphor=\"EnvelopeIcon\"\n\t\t\t\t\t\t\tremixicon=\"RiMailLine\"\n\t\t\t\t\t\t\ttabler=\"IconMail\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\ttitle=\"Email\"\n\t\t\t\t>\n\t\t\t\t\t<a\n\t\t\t\t\t\tclassName=\"font-medium font-mono text-sm tracking-wide hover:underline\"\n\t\t\t\t\t\thref={`mailto:${APP_EMAIL}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t{APP_EMAIL}\n\t\t\t\t\t</a>\n\t\t\t\t</Box>\n\t\t\t\t<Box\n\t\t\t\t\tdescription=\"Drop by our office for a chat.\"\n\t\t\t\t\ticon={\n\t\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\t\thugeicons=\"Location01Icon\"\n\t\t\t\t\t\t\tlucide=\"MapPin\"\n\t\t\t\t\t\t\tphosphor=\"MapPinIcon\"\n\t\t\t\t\t\t\tremixicon=\"RiMapPinLine\"\n\t\t\t\t\t\t\ttabler=\"IconMapPin\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\ttitle=\"Office\"\n\t\t\t\t>\n\t\t\t\t\t<span className=\"font-medium font-mono text-sm tracking-wide\">\n\t\t\t\t\t\tOffice # 100, 101 Second Floor Kohinoor 1, Faisalabad, Pakistan\n\t\t\t\t\t</span>\n\t\t\t\t</Box>\n\t\t\t\t<Box\n\t\t\t\t\tclassName=\"border-b-0 md:border-r-0\"\n\t\t\t\t\tdescription=\"We're available Mon-Fri, 9am-5pm.\"\n\t\t\t\t\ticon={\n\t\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\t\thugeicons=\"Call02Icon\"\n\t\t\t\t\t\t\tlucide=\"Phone\"\n\t\t\t\t\t\t\tphosphor=\"PhoneIcon\"\n\t\t\t\t\t\t\tremixicon=\"RiPhoneLine\"\n\t\t\t\t\t\t\ttabler=\"IconPhone\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\ttitle=\"Phone\"\n\t\t\t\t>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tclassName=\"block font-medium font-mono text-sm tracking-wide hover:underline\"\n\t\t\t\t\t\t\thref={`tel:${APP_PHONE}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{APP_PHONE}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tclassName=\"block font-medium font-mono text-sm tracking-wide hover:underline\"\n\t\t\t\t\t\t\thref={`tel:${APP_PHONE_2}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{APP_PHONE_2}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</div>\n\t\t\t\t</Box>\n\t\t\t</div>\n\t\t\t<FullWidthDivider />\n\t\t\t<div className=\"z-1 flex h-full flex-col items-center justify-center gap-4 py-24\">\n\t\t\t\t<h2 className=\"text-center font-medium text-2xl text-muted-foreground tracking-tight md:text-3xl\">\n\t\t\t\t\tFind us <span className=\"text-foreground\">online</span>\n\t\t\t\t</h2>\n\t\t\t\t<div className=\"flex flex-wrap items-center gap-2\">\n\t\t\t\t\t{socialLinks.map((link) => (\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tclassName=\"flex items-center gap-x-2 rounded-full border bg-card px-3 py-1.5 shadow hover:bg-accent\"\n\t\t\t\t\t\t\thref={link.href}\n\t\t\t\t\t\t\tkey={link.label}\n\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{link.icon}\n\t\t\t\t\t\t\t<span className=\"font-medium font-mono text-xs tracking-wide\">\n\t\t\t\t\t\t\t\t{link.label}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\ntype ContactBox = React.ComponentProps<\"div\"> & {\n\ticon: React.ReactNode;\n\ttitle: string;\n\tdescription: string;\n};\n\nfunction Box({\n\ttitle,\n\tdescription,\n\tclassName,\n\tchildren,\n\t...props\n}: ContactBox) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-col justify-between border-b md:border-r md:border-b-0\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex items-center gap-x-3 border-b bg-secondary/50 p-4 dark:bg-secondary/20\",\n\t\t\t\t\t\"[&_svg]:size-5 [&_svg]:stroke-width-1 [&_svg]:text-muted-foreground\"\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{props.icon}\n\t\t\t\t<h2 className=\"font-heading font-medium text-lg tracking-wider\">\n\t\t\t\t\t{title}\n\t\t\t\t</h2>\n\t\t\t</div>\n\t\t\t<div className=\"flex items-center gap-x-2 p-4 py-12\">{children}</div>\n\t\t\t<div className=\"border-t p-4\">\n\t\t\t\t<p className=\"text-muted-foreground text-sm\">{description}</p>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"}]}