{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-sections",
  "type": "registry:component",
  "title": "Contact Sections",
  "author": "Toby Belhome",
  "description": "Facilitate communication with elegantly designed Tailwind CSS contact sections. These layouts combine clean forms, contact details, and subtle visuals to encourage user inquiries and feedback. Perfect for business sites, portfolios, and SaaS platforms seeking a modern, approachable, and user-friendly way for visitors to get in touch.",
  "dependencies": [
    "lucide-react",
    "react-hook-form",
    "zod",
    "@hookform/resolvers"
  ],
  "registryDependencies": [
    "card",
    "form",
    "input",
    "button",
    "textarea"
  ],
  "files": [
    {
      "path": "examples/blocks/marketing/contact-sections/01/page.tsx",
      "content": "\"use client\";\n\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Building2, Clock, Mail, Phone } from \"lucide-react\";\nimport { useForm } from \"react-hook-form\";\nimport { z } from \"zod\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { Form, FormControl, FormField, FormItem, FormLabel } from \"@/components/ui/form\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue\n} from \"@/components/ui/select\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nconst formSchema = z.object({\n  firstName: z.string().trim().min(1).max(20),\n  lastName: z.string().trim().min(1).max(20),\n  email: z.string().email(),\n  subject: z.string().trim().min(1),\n  message: z.string().trim().min(2).max(255)\n});\n\nexport default function ContactSection() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      firstName: \"\",\n      lastName: \"\",\n      email: \"\",\n      subject: \"\",\n      message: \"\"\n    }\n  });\n\n  function onSubmit(values: z.infer<typeof formSchema>) {\n    const { firstName, lastName, email, subject, message } = values;\n    window.location.href = `mailto:leomirandadev@gmail.com?subject=${subject}&body=Hello I am ${firstName} ${lastName}, my Email is ${email}. %0D%0A${message}`;\n  }\n\n  return (\n    <section className=\"py-12 lg:py-20\">\n      <div className=\"mx-auto max-w-5xl px-4\">\n        <header className=\"mb-6 max-w-3xl space-y-4 lg:mb-10\">\n          <h3 className=\"font-heading text-4xl text-balance md:text-5xl\">\n            Get Connect With Us access\n          </h3>\n          <p className=\"text-muted-foreground text-lg text-balance\">\n            Stay in touch with us for updates, support, and valuable insights. We’re here to help\n            you every step of the way!\n          </p>\n        </header>\n\n        <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n          <div className=\"order-2 md:order-1\">\n            <div className=\"flex flex-col gap-4 *:rounded-lg *:p-6\">\n              <div className=\"bg-muted/50\">\n                <div className=\"mb-2 flex items-center gap-3\">\n                  <Building2 className=\"text-muted-foreground size-4\" />\n                  <div className=\"font-semibold\">Location:</div>\n                </div>\n                <div className=\"text-muted-foreground text-sm\">\n                  123 Maple Lane, Springfield, IL 62704\n                </div>\n              </div>\n\n              <div className=\"bg-muted/50\">\n                <div className=\"mb-2 flex items-center gap-3\">\n                  <Phone className=\"text-muted-foreground size-4\" />\n                  <div className=\"font-semibold\">Call us:</div>\n                </div>\n                <div className=\"text-muted-foreground text-sm\">+1 (555) 987-6543</div>\n              </div>\n\n              <div className=\"bg-muted/50\">\n                <div className=\"mb-2 flex items-center gap-3\">\n                  <Mail className=\"text-muted-foreground size-4\" />\n                  <div className=\"font-semibold\">Email us:</div>\n                </div>\n                <div className=\"text-muted-foreground text-sm\">contact@ourcompany.com</div>\n              </div>\n\n              <div className=\"bg-muted/50\">\n                <div className=\"mb-2 flex items-center gap-3\">\n                  <Clock className=\"text-muted-foreground size-4\" />\n                  <div className=\"font-semibold\">Business Hours:</div>\n                </div>\n                <div className=\"text-muted-foreground text-sm\">\n                  Tuesday to Saturday, 9 AM - 5 PM\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <Card className=\"bg-muted/50 order-1 border-0 shadow-none md:order-2\">\n            <CardContent>\n              <Form {...form}>\n                <form onSubmit={form.handleSubmit(onSubmit)} className=\"grid w-full gap-6\">\n                  <div className=\"flex flex-col gap-4 md:flex-row!\">\n                    <FormField\n                      control={form.control}\n                      name=\"firstName\"\n                      render={({ field }) => (\n                        <FormItem className=\"w-full gap-4\">\n                          <FormLabel className=\"font-semibold\">Firstname</FormLabel>\n                          <FormControl>\n                            <Input className=\"bg-background\" placeholder=\"Leopoldo\" {...field} />\n                          </FormControl>\n                        </FormItem>\n                      )}\n                    />\n                    <FormField\n                      control={form.control}\n                      name=\"lastName\"\n                      render={({ field }) => (\n                        <FormItem className=\"w-full gap-4\">\n                          <FormLabel className=\"font-semibold\">Lastname</FormLabel>\n                          <FormControl>\n                            <Input className=\"bg-background\" placeholder=\"Miranda\" {...field} />\n                          </FormControl>\n                        </FormItem>\n                      )}\n                    />\n                  </div>\n\n                  <div className=\"flex flex-col gap-1.5\">\n                    <FormField\n                      control={form.control}\n                      name=\"email\"\n                      render={({ field }) => (\n                        <FormItem className=\"gap-4\">\n                          <FormLabel className=\"font-semibold\">Email</FormLabel>\n                          <FormControl>\n                            <Input\n                              className=\"bg-background\"\n                              type=\"email\"\n                              placeholder=\"contact@bundui.com\"\n                              {...field}\n                            />\n                          </FormControl>\n                        </FormItem>\n                      )}\n                    />\n                  </div>\n\n                  <div className=\"flex flex-col gap-1.5\">\n                    <FormField\n                      control={form.control}\n                      name=\"subject\"\n                      render={({ field }) => (\n                        <FormItem className=\"gap-4\">\n                          <FormLabel className=\"font-semibold\">Subject</FormLabel>\n                          <Select onValueChange={field.onChange}>\n                            <FormControl>\n                              <SelectTrigger className=\"bg-background w-full\">\n                                <SelectValue placeholder=\"Select a subject\" />\n                              </SelectTrigger>\n                            </FormControl>\n                            <SelectContent>\n                              <SelectItem value=\"Web Development\">Web Development</SelectItem>\n                              <SelectItem value=\"Mobile Development\">Mobile Development</SelectItem>\n                              <SelectItem value=\"Figma Design\">Figma Design</SelectItem>\n                              <SelectItem value=\"REST API\">REST API</SelectItem>\n                              <SelectItem value=\"FullStack Project\">FullStack Project</SelectItem>\n                            </SelectContent>\n                          </Select>\n                        </FormItem>\n                      )}\n                    />\n                  </div>\n\n                  <div className=\"flex flex-col gap-1.5\">\n                    <FormField\n                      control={form.control}\n                      name=\"message\"\n                      render={({ field }) => (\n                        <FormItem className=\"gap-4\">\n                          <FormLabel className=\"font-semibold\">Message</FormLabel>\n                          <FormControl>\n                            <Textarea\n                              rows={5}\n                              placeholder=\"Your message...\"\n                              className=\"bg-background resize-none\"\n                              {...field}\n                            />\n                          </FormControl>\n                        </FormItem>\n                      )}\n                    />\n                  </div>\n\n                  <Button size=\"lg\">Send message</Button>\n                </form>\n              </Form>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/contact-sections.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}