{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-3",
  "title": "Contact With Office Locations",
  "description": "Contact section with a message form beside a static map placeholder and address cards for the San Francisco, Berlin, and Singapore offices.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "card",
    "checkbox",
    "field",
    "input",
    "select",
    "separator",
    "sonner",
    "textarea"
  ],
  "files": [
    {
      "path": "registry/blocks/contact/3/contact-block.tsx",
      "content": "\"use client\"\nimport { toast } from \"sonner\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Field, FieldGroup, FieldLabel } from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Toaster } from \"@/components/ui/sonner\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst TOPICS = [\"General inquiry\", \"Sales\", \"Support\", \"Partnership\", \"Other\"]\n\nconst OFFICES = [\n  {\n    city: \"San Francisco\",\n    address: \"548 Market St, Suite 200, CA 94104\",\n    phone: \"+1 (415) 555-0188\",\n  },\n  {\n    city: \"Berlin\",\n    address: \"Torstraße 35, 10119 Berlin, Germany\",\n    phone: \"+49 30 555 0142\",\n  },\n  {\n    city: \"Singapore\",\n    address: \"12 Marina Blvd, #18-01, 018982\",\n    phone: \"+65 6555 0117\",\n  },\n]\n\nexport default function ContactBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-muted/30 px-6 py-16 text-foreground\">\n      <Toaster />\n      <div className=\"mx-auto w-full max-w-5xl\">\n        <div className=\"mb-10 max-w-2xl\">\n          <Badge variant=\"secondary\">\n            <IconPlaceholder\n              lucide=\"Send\"\n              tabler=\"IconSend\"\n              hugeicons=\"MailSendIcon\"\n              phosphor=\"PaperPlane\"\n              remixicon=\"RiMailSendLine\"\n              data-icon=\"inline-start\"\n            />\n            Contact\n          </Badge>\n          <h2 className=\"mt-4 font-heading text-2xl font-semibold tracking-tight sm:text-3xl\">\n            Let&apos;s talk about your project\n          </h2>\n          <p className=\"mt-2 text-sm text-muted-foreground\">\n            Send the Acme team a message or drop by one of our offices. We reply\n            within one business day.\n          </p>\n        </div>\n\n        <div className=\"grid gap-6 md:grid-cols-2\">\n          <Card className=\"w-full\">\n            <form\n              className=\"flex flex-col gap-(--card-spacing)\"\n              onSubmit={(event) => {\n                event.preventDefault()\n                toast.success(\n                  \"Message sent. We'll reply within one business day.\"\n                )\n              }}\n            >\n              <CardHeader>\n                <CardTitle className=\"text-sm font-semibold\">\n                  Send a message\n                </CardTitle>\n                <CardDescription>\n                  Tell us a bit about what you need.\n                </CardDescription>\n              </CardHeader>\n\n              <Separator />\n\n              <CardContent>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"name\">Full name</FieldLabel>\n                    <Input id=\"name\" type=\"text\" placeholder=\"Jane Doe\" />\n                  </Field>\n\n                  <Field>\n                    <FieldLabel htmlFor=\"email\">Work email</FieldLabel>\n                    <Input\n                      id=\"email\"\n                      type=\"email\"\n                      placeholder=\"jane@company.com\"\n                    />\n                  </Field>\n\n                  <Field>\n                    <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                    <Select name=\"topic\">\n                      <SelectTrigger id=\"topic\" className=\"w-full\">\n                        <SelectValue placeholder=\"Select a topic…\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        {TOPICS.map((topic) => (\n                          <SelectItem key={topic} value={topic}>\n                            {topic}\n                          </SelectItem>\n                        ))}\n                      </SelectContent>\n                    </Select>\n                  </Field>\n\n                  <Field>\n                    <FieldLabel htmlFor=\"message\">Message</FieldLabel>\n                    <Textarea\n                      id=\"message\"\n                      rows={6}\n                      className=\"min-h-32 resize-none\"\n                      placeholder=\"How can we help?\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </CardContent>\n\n              <CardFooter className=\"flex flex-col items-stretch gap-4\">\n                <div className=\"flex items-center gap-2.5\">\n                  <Checkbox id=\"consent\" name=\"consent\" required />\n                  <label\n                    htmlFor=\"consent\"\n                    className=\"text-xs leading-snug font-normal text-muted-foreground\"\n                  >\n                    I agree to the{\" \"}\n                    <a\n                      href=\"#\"\n                      className=\"underline underline-offset-4 hover:text-foreground\"\n                    >\n                      Privacy Policy\n                    </a>\n                    .\n                  </label>\n                </div>\n                <Button type=\"submit\" className=\"w-full\">\n                  <IconPlaceholder\n                    lucide=\"Send\"\n                    tabler=\"IconSend\"\n                    hugeicons=\"MailSendIcon\"\n                    phosphor=\"PaperPlane\"\n                    remixicon=\"RiMailSendLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Send Message\n                </Button>\n              </CardFooter>\n            </form>\n          </Card>\n\n          <div className=\"flex flex-col gap-6\">\n            <div\n              className=\"relative h-52 w-full overflow-hidden rounded-lg border border-border bg-muted/40\"\n              aria-hidden=\"true\"\n            >\n              <div className=\"absolute inset-0 grid grid-cols-6\">\n                {Array.from({ length: 6 }).map((_, i) => (\n                  <div\n                    key={i}\n                    className=\"border-r border-border/40 last:border-r-0\"\n                  />\n                ))}\n              </div>\n              <div className=\"absolute inset-0 grid grid-rows-3\">\n                {Array.from({ length: 3 }).map((_, i) => (\n                  <div\n                    key={i}\n                    className=\"border-b border-border/40 last:border-b-0\"\n                  />\n                ))}\n              </div>\n\n              {/* location radius */}\n              <div className=\"absolute top-1/2 left-1/2 size-44 -translate-x-1/2 -translate-y-1/2 rounded-full border border-primary/15 bg-primary/[0.03]\" />\n              <div className=\"absolute top-1/2 left-1/2 size-24 -translate-x-1/2 -translate-y-1/2 rounded-full border border-primary/20 bg-primary/[0.04]\" />\n\n              <span className=\"absolute top-1/2 left-1/2 flex size-9 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-md ring-4 ring-background/70\">\n                <IconPlaceholder\n                  lucide=\"MapPin\"\n                  tabler=\"IconMapPin2\"\n                  hugeicons=\"MapPinIcon\"\n                  phosphor=\"MapPin\"\n                  remixicon=\"RiMapPin2Line\"\n                  className=\"size-5\"\n                />\n              </span>\n            </div>\n\n            <div className=\"grid gap-4 sm:grid-cols-2 md:grid-cols-1\">\n              {OFFICES.map((office) => (\n                <Card key={office.city}>\n                  <CardContent className=\"flex items-start gap-3\">\n                    <span className=\"flex size-8 shrink-0 items-center justify-center rounded-md border border-border bg-muted\">\n                      <IconPlaceholder\n                        lucide=\"MapPin\"\n                        tabler=\"IconMapPin2\"\n                        hugeicons=\"MapPinIcon\"\n                        phosphor=\"MapPin\"\n                        remixicon=\"RiMapPin2Line\"\n                        className=\"size-4 text-muted-foreground\"\n                        aria-hidden=\"true\"\n                      />\n                    </span>\n                    <div className=\"min-w-0\">\n                      <p className=\"text-sm font-medium\">{office.city}</p>\n                      <p className=\"mt-0.5 text-xs text-muted-foreground\">\n                        {office.address}\n                      </p>\n                      <p className=\"mt-1.5 flex items-center gap-1.5 text-xs text-muted-foreground\">\n                        <IconPlaceholder\n                          lucide=\"Phone\"\n                          tabler=\"IconPhone\"\n                          hugeicons=\"TelephoneIcon\"\n                          phosphor=\"Phone\"\n                          remixicon=\"RiPhoneLine\"\n                          className=\"size-3.5\"\n                          aria-hidden=\"true\"\n                        />\n                        {office.phone}\n                      </p>\n                    </div>\n                  </CardContent>\n                </Card>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/contact-3.tsx"
    }
  ],
  "meta": {
    "height": "850px",
    "tier": "free"
  },
  "categories": [
    "contact"
  ],
  "type": "registry:block"
}