{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-02",
  "title": "Split contact with details",
  "description": "Two-column layout pairing a copy block plus email / phone / locations on the left with a long form on the right.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "input"
  ],
  "files": [
    {
      "path": "content/components/contact/contact-02.tsx",
      "content": "import { Mail, MapPin, Phone } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\n\nexport default function Contact02() {\n  return (\n    <section className=\"bg-background py-20 sm:py-28\">\n      <div className=\"mx-auto max-w-6xl px-6\">\n        <div className=\"grid gap-10 lg:grid-cols-[1fr_1.1fr] lg:items-center\">\n          <div className=\"flex flex-col gap-5\">\n            <span className=\"text-xs font-medium uppercase tracking-widest text-muted-foreground\">\n              Contact\n            </span>\n            <h2 className=\"text-balance font-semibold text-3xl tracking-tight sm:text-4xl\">\n              Let&apos;s build something together\n            </h2>\n            <p className=\"max-w-md text-muted-foreground\">\n              Sales, support or partnership — pick the channel that fits and\n              someone real will reply.\n            </p>\n            <ul className=\"mt-2 flex flex-col gap-3 text-sm\">\n              <Detail icon={Mail} label=\"hey@blockus.dev\" />\n              <Detail icon={Phone} label=\"+1 (415) 555-0140\" />\n              <Detail icon={MapPin} label=\"Geneva · Lisbon · Brooklyn\" />\n            </ul>\n          </div>\n\n          <form className=\"flex flex-col gap-4 rounded-2xl border border-border bg-card p-6 shadow-sm shadow-black/5 sm:p-8\">\n            <div className=\"grid gap-3 sm:grid-cols-2\">\n              <Input placeholder=\"First name\" />\n              <Input placeholder=\"Last name\" />\n            </div>\n            <Input type=\"email\" placeholder=\"Work email\" />\n            <Input placeholder=\"Company\" />\n            <textarea\n              rows={4}\n              placeholder=\"What are you working on?\"\n              className=\"flex w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-foreground/40\"\n            />\n            <Button size=\"lg\" className=\"w-full rounded-lg\">\n              Send message\n            </Button>\n          </form>\n        </div>\n      </div>\n    </section>\n  )\n}\n\nfunction Detail({\n  icon: Icon,\n  label,\n}: {\n  icon: React.ComponentType<{ className?: string }>\n  label: string\n}) {\n  return (\n    <li className=\"flex items-center gap-3 text-foreground\">\n      <span className=\"grid size-8 place-items-center rounded-full border border-border bg-card\">\n        <Icon className=\"size-3.5 text-muted-foreground\" />\n      </span>\n      {label}\n    </li>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/contact-02.tsx"
    }
  ],
  "categories": [
    "contact"
  ],
  "type": "registry:block"
}