{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-form-01",
  "title": "Contact Form",
  "description": "A complete contact section with supporting details and a responsive inquiry form.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@rivelle/utils",
    "@rivelle/badge",
    "@rivelle/button",
    "@rivelle/input",
    "@rivelle/label",
    "@rivelle/textarea"
  ],
  "files": [
    {
      "path": "registry/nova/blocks/contact-form-01.tsx",
      "content": "import * as React from \"react\";\nimport { ArrowRight, Mail, MessageSquare, Sparkles } from \"lucide-react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { cn } from \"@/lib/utils\";\n\ntype ContactForm01Props = React.ComponentProps<\"section\"> & {\n  eyebrow?: string;\n  heading?: string;\n  description?: string;\n  email?: string;\n  responseNote?: string;\n  submitLabel?: string;\n};\n\nfunction ContactForm01({\n  eyebrow = \"Let’s work together\",\n  heading = \"Tell us what you want to build.\",\n  description = \"Share a little context and our team will reply with useful next steps within two business days.\",\n  email = \"hello@northstar.dev\",\n  responseNote = \"Usually replies in one day\",\n  submitLabel = \"Send inquiry\",\n  className,\n  ...props\n}: ContactForm01Props) {\n  const id = React.useId();\n  const nameId = `${id}-name`;\n  const emailId = `${id}-email`;\n  const companyId = `${id}-company`;\n  const messageId = `${id}-message`;\n\n  return (\n    <section\n      className={cn(\"px-5 py-24 sm:px-8 sm:py-32\", className)}\n      data-slot=\"contact-form-section\"\n      id=\"contact\"\n      {...props}\n    >\n      <div className=\"mx-auto grid max-w-6xl overflow-hidden rounded-[2.25rem] border border-foreground/10 bg-background shadow-[0_45px_120px_-85px_var(--foreground)] lg:grid-cols-[.9fr_1.1fr]\">\n        <div className=\"relative overflow-hidden bg-primary p-7 text-primary-foreground sm:p-10 lg:p-12\">\n          <div className=\"absolute inset-0 opacity-25 [background-image:radial-gradient(circle_at_15%_15%,white,transparent_32%),linear-gradient(to_right,white_1px,transparent_1px),linear-gradient(to_bottom,white_1px,transparent_1px)] [background-size:auto,44px_44px,44px_44px] [mask-image:linear-gradient(to_bottom,black,transparent)]\" />\n          <div className=\"relative\">\n            <Badge\n              className=\"border-white/20 bg-white/10 text-white\"\n              variant=\"outline\"\n            >\n              <Sparkles /> {eyebrow}\n            </Badge>\n            <h2 className=\"mt-7 text-balance text-4xl font-semibold tracking-[-.05em] sm:text-5xl\">\n              {heading}\n            </h2>\n            <p className=\"mt-5 max-w-md text-sm leading-relaxed text-primary-foreground/75\">\n              {description}\n            </p>\n            <div className=\"mt-10 space-y-4 text-sm\">\n              <a className=\"flex items-center gap-3\" href={`mailto:${email}`}>\n                <span className=\"grid size-9 place-items-center rounded-xl bg-white/10\">\n                  <Mail className=\"size-4\" />\n                </span>\n                {email}\n              </a>\n              <p className=\"flex items-center gap-3\">\n                <span className=\"grid size-9 place-items-center rounded-xl bg-white/10\">\n                  <MessageSquare className=\"size-4\" />\n                </span>\n                {responseNote}\n              </p>\n            </div>\n          </div>\n        </div>\n        <form className=\"grid gap-5 p-7 sm:p-10 lg:p-12\">\n          <div className=\"grid gap-5 sm:grid-cols-2\">\n            <div className=\"grid gap-2\">\n              <Label htmlFor={nameId}>Name</Label>\n              <Input id={nameId} name=\"name\" placeholder=\"Your name\" required />\n            </div>\n            <div className=\"grid gap-2\">\n              <Label htmlFor={emailId}>Work email</Label>\n              <Input\n                id={emailId}\n                name=\"email\"\n                placeholder=\"you@company.com\"\n                required\n                type=\"email\"\n              />\n            </div>\n          </div>\n          <div className=\"grid gap-2\">\n            <Label htmlFor={companyId}>Company</Label>\n            <Input\n              id={companyId}\n              name=\"company\"\n              placeholder=\"Company or studio\"\n            />\n          </div>\n          <div className=\"grid gap-2\">\n            <Label htmlFor={messageId}>Project details</Label>\n            <Textarea\n              className=\"min-h-32\"\n              id={messageId}\n              name=\"message\"\n              placeholder=\"What are you hoping to launch?\"\n              required\n            />\n          </div>\n          <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n            <p className=\"max-w-xs text-xs leading-relaxed text-muted-foreground\">\n              By submitting, you agree to our privacy policy.\n            </p>\n            <Button type=\"submit\">\n              {submitLabel} <ArrowRight />\n            </Button>\n          </div>\n        </form>\n      </div>\n    </section>\n  );\n}\n\nexport { ContactForm01 };\nexport type { ContactForm01Props };\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}