{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-1",
  "type": "registry:block",
  "description": "Elegant contact page with office info, email, phone, and social links.",
  "files": [
    {
      "path": "registry/blocks/contact/1/contact.tsx",
      "content": "\"use client\";\n\nimport { type LucideIcon, Mail, MapPin, Phone } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\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  const socialLinks = [\n    {\n      icon: GithubIcon,\n      href: \"#\",\n      label: \"GitHub\",\n    },\n    {\n      icon: XIcon,\n      href: \"#\",\n      label: \"Twitter\",\n    },\n  ];\n\n  return (\n    <div className=\"mx-auto h-full min-h-screen max-w-5xl lg:border-x\">\n      <div className=\"flex grow flex-col justify-center px-4 py-18 md:items-center\">\n        <h1 className=\"font-bold text-4xl md:text-5xl\">Contact Us</h1>\n        <p className=\"mb-5 text-base text-muted-foreground\">\n          Contact the support team at efferd.\n        </p>\n      </div>\n      <BorderSeparator />\n      <div className=\"grid md:grid-cols-3\">\n        <Box\n          description=\"We respond to all emails within 24 hours.\"\n          icon={Mail}\n          title=\"Email\"\n        >\n          <a\n            className=\"font-medium font-mono text-sm tracking-wide hover:underline\"\n            href={`mailto:${APP_EMAIL}`}\n          >\n            {APP_EMAIL}\n          </a>\n        </Box>\n        <Box\n          description=\"Drop by our office for a chat.\"\n          icon={MapPin}\n          title=\"Office\"\n        >\n          <span className=\"font-medium font-mono text-sm tracking-wide\">\n            Office # 100, 101 Second Floor Kohinoor 1, Faisalabad, Pakistan\n          </span>\n        </Box>\n        <Box\n          className=\"border-b-0 md:border-r-0\"\n          description=\"We're available Mon-Fri, 9am-5pm.\"\n          icon={Phone}\n          title=\"Phone\"\n        >\n          <div>\n            <a\n              className=\"block font-medium font-mono text-sm tracking-wide hover:underline\"\n              href={`tel:${APP_PHONE}`}\n            >\n              {APP_PHONE}\n            </a>\n            <a\n              className=\"block font-medium font-mono text-sm tracking-wide hover:underline\"\n              href={`tel:${APP_PHONE_2}`}\n            >\n              {APP_PHONE_2}\n            </a>\n          </div>\n        </Box>\n      </div>\n      <BorderSeparator />\n      <div className=\"z-1 flex h-full flex-col items-center justify-center gap-4 py-24\">\n        <h2 className=\"text-center font-medium text-2xl text-muted-foreground tracking-tight md:text-3xl\">\n          Find us <span className=\"text-foreground\">online</span>\n        </h2>\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {socialLinks.map((link) => (\n            <a\n              className=\"flex items-center gap-x-2 rounded-full border bg-card px-3 py-1.5 shadow hover:bg-accent\"\n              href={link.href}\n              key={link.label}\n              rel=\"noopener noreferrer\"\n              target=\"_blank\"\n            >\n              <link.icon className=\"size-3.5 text-muted-foreground\" />\n              <span className=\"font-medium font-mono text-xs tracking-wide\">\n                {link.label}\n              </span>\n            </a>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction BorderSeparator({ className }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"absolute inset-x-0 h-px w-full border-b\", className)} />\n  );\n}\n\ntype ContactBox = React.ComponentProps<\"div\"> & {\n  icon: LucideIcon;\n  title: string;\n  description: string;\n};\n\nfunction Box({\n  title,\n  description,\n  className,\n  children,\n  ...props\n}: ContactBox) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col justify-between border-b md:border-r md:border-b-0\",\n        className\n      )}\n    >\n      <div className=\"flex items-center gap-x-3 border-b bg-secondary/50 p-4 dark:bg-secondary/20\">\n        <props.icon className=\"size-5 text-muted-foreground\" strokeWidth={1} />\n        <h2 className=\"font-heading font-medium text-lg tracking-wider\">\n          {title}\n        </h2>\n      </div>\n      <div className=\"flex items-center gap-x-2 p-4 py-12\">{children}</div>\n      <div className=\"border-t p-4\">\n        <p className=\"text-muted-foreground text-sm\">{description}</p>\n      </div>\n    </div>\n  );\n}\n\nconst GithubIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg fill=\"currentColor\" viewBox=\"0 0 1024 1024\" {...props}>\n    <path\n      clipRule=\"evenodd\"\n      d=\"M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      transform=\"scale(64)\"\n    />\n  </svg>\n);\n\nconst XIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg\n    fill=\"currentColor\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path d=\"m18.9,1.153h3.682l-8.042,9.189,9.46,12.506h-7.405l-5.804-7.583-6.634,7.583H.469l8.6-9.831L0,1.153h7.593l5.241,6.931,6.065-6.931Zm-1.293,19.494h2.039L6.482,3.239h-2.19l13.314,17.408Z\" />\n  </svg>\n);\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "contact"
  ]
}