{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-01",
  "title": "Contact 01",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/contact-01/Contact01.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { CheckCircle2, Mail, MapPin, Phone, Send } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Textarea } from '@/components/ui/textarea'\n\nexport interface Contact01Props {\n  onSubmit?: (payload: {\n    name: string\n    email: string\n    company: string\n    subject: string\n    message: string\n  }) => void\n}\n\nexport function Contact01({ onSubmit }: Contact01Props) {\n  const [name, setName] = React.useState('')\n  const [email, setEmail] = React.useState('')\n  const [company, setCompany] = React.useState('')\n  const [subject, setSubject] = React.useState('sales')\n  const [message, setMessage] = React.useState('')\n  const [sent, setSent] = React.useState(false)\n\n  const canSubmit = !!name && !!email && !!message\n\n  function submit(e: React.FormEvent) {\n    e.preventDefault()\n    if (!canSubmit) return\n    onSubmit?.({ name, email, company, subject, message })\n    setSent(true)\n  }\n\n  return (\n    <section className=\"bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-24\">\n        <div className=\"grid gap-10 lg:grid-cols-2 lg:items-start\">\n          <div className=\"space-y-6\">\n            <p className=\"text-primary text-sm font-medium tracking-widest uppercase\">Contact</p>\n            <h2 className=\"text-3xl font-semibold tracking-tight sm:text-4xl\">Talk to a human</h2>\n            <p className=\"text-muted-foreground text-lg\">\n              Tell us a bit about your team and we'll show you how we'd fit. Average reply: 4 hours.\n            </p>\n\n            <div className=\"space-y-3 pt-4\">\n              <div className=\"flex items-center gap-3\">\n                <div className=\"bg-primary/10 text-primary rounded-lg p-2\">\n                  <Mail className=\"size-4\" />\n                </div>\n                <div>\n                  <p className=\"text-muted-foreground text-xs uppercase\">Email</p>\n                  <a href=\"mailto:hello@acme.test\" className=\"text-sm font-medium hover:underline\"> hello@acme.test </a>\n                </div>\n              </div>\n              <div className=\"flex items-center gap-3\">\n                <div className=\"bg-primary/10 text-primary rounded-lg p-2\">\n                  <Phone className=\"size-4\" />\n                </div>\n                <div>\n                  <p className=\"text-muted-foreground text-xs uppercase\">Phone</p>\n                  <p className=\"text-sm font-medium\">+1 (415) 555-0142</p>\n                </div>\n              </div>\n              <div className=\"flex items-center gap-3\">\n                <div className=\"bg-primary/10 text-primary rounded-lg p-2\">\n                  <MapPin className=\"size-4\" />\n                </div>\n                <div>\n                  <p className=\"text-muted-foreground text-xs uppercase\">Office</p>\n                  <p className=\"text-sm font-medium\">120 Howard St, San Francisco</p>\n                </div>\n              </div>\n            </div>\n\n            <div className=\"bg-muted/40 mt-6 flex h-48 items-center justify-center rounded-lg border border-dashed\">\n              <p className=\"text-muted-foreground text-sm\">Map placeholder</p>\n            </div>\n          </div>\n\n          <Card>\n            {!sent ? (\n              <>\n                <CardHeader>\n                  <CardTitle>Send us a message</CardTitle>\n                  <CardDescription>We reply during business hours (PT)</CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <form className=\"space-y-4\" onSubmit={submit}>\n                    <div className=\"grid gap-4 sm:grid-cols-2\">\n                      <div className=\"grid gap-2\">\n                        <Label htmlFor=\"contact-name\">Name</Label>\n                        <Input id=\"contact-name\" value={name} onChange={(e) => setName(e.target.value)} required />\n                      </div>\n                      <div className=\"grid gap-2\">\n                        <Label htmlFor=\"contact-email\">Work email</Label>\n                        <Input id=\"contact-email\" value={email} onChange={(e) => setEmail(e.target.value)} type=\"email\" required />\n                      </div>\n                    </div>\n                    <div className=\"grid gap-2\">\n                      <Label htmlFor=\"contact-company\">Company</Label>\n                      <Input id=\"contact-company\" value={company} onChange={(e) => setCompany(e.target.value)} />\n                    </div>\n                    <div className=\"grid gap-2\">\n                      <Label htmlFor=\"contact-subject\">I'm interested in</Label>\n                      <Select value={subject} onValueChange={setSubject}>\n                        <SelectTrigger id=\"contact-subject\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"sales\">Talking to sales</SelectItem>\n                          <SelectItem value=\"support\">Customer support</SelectItem>\n                          <SelectItem value=\"partnership\">Partnerships</SelectItem>\n                          <SelectItem value=\"other\">Something else</SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                    <div className=\"grid gap-2\">\n                      <Label htmlFor=\"contact-message\">Message</Label>\n                      <Textarea id=\"contact-message\" value={message} onValueChange={setMessage} placeholder=\"How can we help?\" required />\n                    </div>\n                    <Button type=\"submit\" className=\"w-full\" disabled={!canSubmit}>\n                      Send message\n                      <Send className=\"ml-2 size-4\" />\n                    </Button>\n                  </form>\n                </CardContent>\n              </>\n            ) : (\n              <CardContent className=\"space-y-4 pt-8 text-center\">\n                <div className=\"mx-auto flex size-12 items-center justify-center rounded-full bg-[var(--success)]/10 text-[var(--success)]\">\n                  <CheckCircle2 className=\"size-6\" />\n                </div>\n                <div className=\"space-y-1\">\n                  <h3 className=\"text-lg font-semibold\">Message sent</h3>\n                  <p className=\"text-muted-foreground text-sm\">Thanks {name}, we'll be in touch within a few hours.</p>\n                </div>\n                <Button variant=\"outline\" onClick={() => setSent(false)}>Send another</Button>\n              </CardContent>\n            )}\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/Contact01.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/input.json",
    "https://uipkge.dev/r/react/label.json",
    "https://uipkge.dev/r/react/select.json",
    "https://uipkge.dev/r/react/textarea.json"
  ],
  "description": "Two-column contact section. Left column has eyebrow, headline, lede, three icon-prefixed contact rows (email / phone / office), and a map placeholder. Right column is a Card-wrapped form (name / email / company / subject Select / message Textarea) that swaps to a success state after submit. Emits \"submit\" with the form payload.",
  "categories": [
    "marketing"
  ]
}