{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-sections-13",
  "type": "registry:block",
  "description": "Contact information cards with form",
  "registryDependencies": [
    "button",
    "card",
    "input",
    "label",
    "textarea"
  ],
  "files": [
    {
      "path": "creative-tim-ui/blocks/contact-sections-13/page.tsx",
      "content": "\"use client\"\n\nimport { Clock, Mail, MapPin, Phone } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nconst CONTACT_INFO = [\n  {\n    icon: MapPin,\n    title: \"Visit us\",\n    info: \"123 Main Street, New York, NY 10001\",\n  },\n  {\n    icon: Phone,\n    title: \"Call us\",\n    info: \"+1 (424) 535-3523\",\n  },\n  {\n    icon: Mail,\n    title: \"Email us\",\n    info: \"hello@mail.com\",\n  },\n  {\n    icon: Clock,\n    title: \"Working hours\",\n    info: \"Mon - Fri, 9:00 AM - 6:00 PM\",\n  },\n]\n\nexport default function ContactSections13() {\n  return (\n    <section className=\"py-16\">\n      <div className=\"container mx-auto\">\n        <div className=\"mb-16 text-center\">\n          <h2 className=\"mb-4 text-3xl font-bold\">Contact Information</h2>\n          <p className=\"text-muted-foreground mx-auto max-w-2xl text-lg\">\n            We're here to answer any questions you may have about our services.\n            Reach out to us and we'll respond as soon as we can.\n          </p>\n        </div>\n        <div className=\"mb-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4\">\n          {CONTACT_INFO.map(({ icon: Icon, title, info }, key) => (\n            <Card key={key} className=\"p-6 text-center\">\n              <div className=\"bg-primary/10 mx-auto mb-4 grid h-12 w-12 place-items-center rounded-full\">\n                <Icon className=\"text-primary h-6 w-6\" />\n              </div>\n              <h3 className=\"mb-2 font-semibold\">{title}</h3>\n              <p className=\"text-muted-foreground text-sm\">{info}</p>\n            </Card>\n          ))}\n        </div>\n        <Card className=\"mx-auto max-w-2xl p-8\">\n          <h3 className=\"mb-6 text-2xl font-bold\">Send us a message</h3>\n          <form action=\"#\" className=\"space-y-6\">\n            <div className=\"grid grid-cols-1 gap-6 sm:grid-cols-2\">\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"name\">Name</Label>\n                <Input id=\"name\" placeholder=\"Your name\" />\n              </div>\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input id=\"email\" type=\"email\" placeholder=\"your@email.com\" />\n              </div>\n            </div>\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"message\">Message</Label>\n              <Textarea\n                id=\"message\"\n                placeholder=\"How can we help you?\"\n                rows={5}\n              />\n            </div>\n            <Button className=\"w-full\">Send Message</Button>\n          </form>\n        </Card>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/contact-sections-13/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "1200px",
    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-center md:py-20 justify-center min-w-0",
    "mobile": "component"
  },
  "categories": [
    "contact"
  ]
}