{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "contact-01",
  "title": "Contact 01",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/contact-01/Contact01.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { CheckCircle2, Mail, MapPin, Phone, Send } from 'lucide-vue-next'\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\nconst name = ref('')\nconst email = ref('')\nconst company = ref('')\nconst subject = ref('sales')\nconst message = ref('')\nconst sent = ref(false)\n\nconst canSubmit = computed(() => name.value && email.value && message.value)\n\nconst emit = defineEmits<{\n  (e: 'submit', payload: { name: string; email: string; company: string; subject: string; message: string }): void\n}>()\n\nfunction submit() {\n  if (!canSubmit.value) return\n  emit('submit', {\n    name: name.value,\n    email: email.value,\n    company: company.value,\n    subject: subject.value,\n    message: message.value,\n  })\n  sent.value = true\n}\n</script>\n\n<template>\n  <section class=\"bg-background\">\n    <div class=\"mx-auto max-w-6xl px-6 py-24\">\n      <div class=\"grid gap-10 lg:grid-cols-2 lg:items-start\">\n        <div class=\"space-y-6\">\n          <p class=\"text-primary text-sm font-medium tracking-widest uppercase\">Contact</p>\n          <h2 class=\"text-3xl font-semibold tracking-tight sm:text-4xl\">Talk to a human</h2>\n          <p class=\"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 class=\"space-y-3 pt-4\">\n            <div class=\"flex items-center gap-3\">\n              <div class=\"bg-primary/10 text-primary rounded-lg p-2\">\n                <Mail class=\"size-4\" />\n              </div>\n              <div>\n                <p class=\"text-muted-foreground text-xs uppercase\">Email</p>\n                <a href=\"mailto:hello@acme.test\" class=\"text-sm font-medium hover:underline\"> hello@acme.test </a>\n              </div>\n            </div>\n            <div class=\"flex items-center gap-3\">\n              <div class=\"bg-primary/10 text-primary rounded-lg p-2\">\n                <Phone class=\"size-4\" />\n              </div>\n              <div>\n                <p class=\"text-muted-foreground text-xs uppercase\">Phone</p>\n                <p class=\"text-sm font-medium\">+1 (415) 555-0142</p>\n              </div>\n            </div>\n            <div class=\"flex items-center gap-3\">\n              <div class=\"bg-primary/10 text-primary rounded-lg p-2\">\n                <MapPin class=\"size-4\" />\n              </div>\n              <div>\n                <p class=\"text-muted-foreground text-xs uppercase\">Office</p>\n                <p class=\"text-sm font-medium\">120 Howard St, San Francisco</p>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"bg-muted/40 mt-6 flex h-48 items-center justify-center rounded-lg border border-dashed\">\n            <p class=\"text-muted-foreground text-sm\">Map placeholder</p>\n          </div>\n        </div>\n\n        <Card>\n          <template v-if=\"!sent\">\n            <CardHeader>\n              <CardTitle>Send us a message</CardTitle>\n              <CardDescription>We reply during business hours (PT)</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form class=\"space-y-4\" @submit.prevent=\"submit\">\n                <div class=\"grid gap-4 sm:grid-cols-2\">\n                  <div class=\"grid gap-2\">\n                    <Label for=\"contact-name\">Name</Label>\n                    <Input id=\"contact-name\" v-model=\"name\" required />\n                  </div>\n                  <div class=\"grid gap-2\">\n                    <Label for=\"contact-email\">Work email</Label>\n                    <Input id=\"contact-email\" v-model=\"email\" type=\"email\" required />\n                  </div>\n                </div>\n                <div class=\"grid gap-2\">\n                  <Label for=\"contact-company\">Company</Label>\n                  <Input id=\"contact-company\" v-model=\"company\" />\n                </div>\n                <div class=\"grid gap-2\">\n                  <Label for=\"contact-subject\">I'm interested in</Label>\n                  <Select v-model=\"subject\">\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 class=\"grid gap-2\">\n                  <Label for=\"contact-message\">Message</Label>\n                  <Textarea id=\"contact-message\" v-model=\"message\" placeholder=\"How can we help?\" required />\n                </div>\n                <Button type=\"submit\" class=\"w-full\" :disabled=\"!canSubmit\">\n                  Send message\n                  <Send class=\"ml-2 size-4\" />\n                </Button>\n              </form>\n            </CardContent>\n          </template>\n\n          <template v-else>\n            <CardContent class=\"space-y-4 pt-8 text-center\">\n              <div\n                class=\"mx-auto flex size-12 items-center justify-center rounded-full bg-[var(--success)]/10 text-[var(--success)]\"\n              >\n                <CheckCircle2 class=\"size-6\" />\n              </div>\n              <div class=\"space-y-1\">\n                <h3 class=\"text-lg font-semibold\">Message sent</h3>\n                <p class=\"text-muted-foreground text-sm\">Thanks {{ name }}, we'll be in touch within a few hours.</p>\n              </div>\n              <Button variant=\"outline\" @click=\"sent = false\">Send another</Button>\n            </CardContent>\n          </template>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/Contact01.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/label.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/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"
  ]
}