{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"contact-04","type":"registry:component","title":"Contact 04","description":"A hero-style contact component with full-width background image, gradient overlay, and floating form card. Features immersive background design with customizable overlay, compelling hero content with features and statistics, project type and timeline selection, trust indicators, and glassmorphism form card. Perfect for agencies, creative studios, and service providers requiring high-impact visual presentation with comprehensive project inquiry forms.","dependencies":["lucide-react","react-hook-form","@hookform/resolvers","zod"],"registryDependencies":["badge","button","card","input","textarea","form"],"files":[{"path":"src/registry/blocks/marketing/landing-pages/contact/contact-04.tsx","content":"\"use client\";\n\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport {\n  Calendar,\n  type LucideIcon,\n  MessageCircle,\n  Send,\n  Zap,\n} from \"lucide-react\";\nimport Image from \"next/image\";\nimport { useForm } from \"react-hook-form\";\nimport { z } from \"zod\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Badge } from \"@/registry/ui/badge\";\nimport { Button } from \"@/registry/ui/button\";\nimport { Card, CardContent } from \"@/registry/ui/card\";\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/ui/form\";\nimport { Input } from \"@/registry/ui/input\";\nimport { Textarea } from \"@/registry/ui/textarea\";\n\ninterface ContactFeature {\n  icon: LucideIcon;\n  title: string;\n  description: string;\n}\n\ninterface ContactStat {\n  value: string;\n  label: string;\n}\n\ninterface ProjectType {\n  value: string;\n  label: string;\n}\n\ninterface Timeline {\n  value: string;\n  label: string;\n}\n\nconst formSchema = z.object({\n  firstName: z.string().min(2, \"First name must be at least 2 characters\"),\n  lastName: z.string().min(2, \"Last name must be at least 2 characters\"),\n  email: z.string().email(\"Please enter a valid email address\"),\n  phone: z.string().optional(),\n  projectType: z.string().optional(),\n  timeline: z.string().optional(),\n  message: z.string().min(10, \"Message must be at least 10 characters\"),\n  updates: z.boolean().optional(),\n});\n\ntype FormValues = z.infer<typeof formSchema>;\n\nexport interface Contact04Props {\n  className?: string;\n}\n\nconst content: {\n  header: {\n    title: string;\n    subtitle: string;\n    description: string;\n    badge: {\n      text: string;\n      icon: LucideIcon;\n    };\n  };\n  features: ContactFeature[];\n  stats: ContactStat[];\n  form: {\n    title: string;\n    description: string;\n    buttonText: string;\n    buttonIcon: LucideIcon;\n    showUpdatesCheckbox: boolean;\n    updatesText: string;\n    disclaimer: string;\n    trustIndicators: string[];\n    projectTypes: ProjectType[];\n    timelines: Timeline[];\n  };\n  background: {\n    image: string;\n  };\n} = {\n  header: {\n    title: \"Ready to Start Your\",\n    subtitle: \"Next Project?\",\n    description:\n      \"We're excited to learn about your vision and help bring it to life. Let's discuss how we can work together to achieve your goals.\",\n    badge: {\n      text: \"Let's Talk\",\n      icon: MessageCircle,\n    },\n  },\n  features: [\n    {\n      icon: MessageCircle,\n      title: \"Quick Response\",\n      description: \"Get a reply within 2 hours during business hours\",\n    },\n    {\n      icon: Calendar,\n      title: \"Free Consultation\",\n      description: \"Schedule a 30-minute discovery call at no cost\",\n    },\n    {\n      icon: Zap,\n      title: \"Fast Turnaround\",\n      description: \"Most projects start within 1-2 weeks\",\n    },\n  ],\n  stats: [\n    { value: \"500+\", label: \"Projects Completed\" },\n    { value: \"98%\", label: \"Client Satisfaction\" },\n    { value: \"24h\", label: \"Average Response\" },\n  ],\n  form: {\n    title: \"Let's Get Started\",\n    description: \"Tell us about your project and we'll get back to you soon\",\n    buttonText: \"Send Project Details\",\n    buttonIcon: Send,\n    showUpdatesCheckbox: true,\n    updatesText: \"Send me updates about similar projects and services\",\n    disclaimer: \"By submitting this form, you agree to our privacy policy\",\n    trustIndicators: [\"✓ No spam\", \"✓ Secure & private\", \"✓ Quick response\"],\n    projectTypes: [\n      { value: \"\", label: \"Project type\" },\n      { value: \"web-development\", label: \"Web Development\" },\n      { value: \"mobile-app\", label: \"Mobile App\" },\n      { value: \"design\", label: \"UI/UX Design\" },\n      { value: \"consulting\", label: \"Consulting\" },\n      { value: \"other\", label: \"Other\" },\n    ],\n    timelines: [\n      { value: \"\", label: \"Timeline\" },\n      { value: \"asap\", label: \"ASAP\" },\n      { value: \"1-month\", label: \"Within 1 month\" },\n      { value: \"3-months\", label: \"Within 3 months\" },\n      { value: \"6-months\", label: \"Within 6 months\" },\n      { value: \"flexible\", label: \"Flexible\" },\n    ],\n  },\n  background: {\n    image:\n      \"https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2669&q=80\",\n  },\n};\n\nexport function Contact04({ className }: Contact04Props) {\n  const form = useForm<FormValues>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      firstName: \"\",\n      lastName: \"\",\n      email: \"\",\n      phone: \"\",\n      projectType: \"\",\n      timeline: \"\",\n      message: \"\",\n      updates: false,\n    },\n  });\n\n  const onSubmit = (values: FormValues) => {\n    console.log(\"Form submitted:\", values);\n    form.reset();\n  };\n\n  const BadgeIcon = content.header.badge.icon;\n  const ButtonIcon = content.form.buttonIcon;\n\n  return (\n    <section\n      className={cn(\"relative overflow-hidden py-16 px-6 md:px-10\", className)}\n      data-testid=\"contact-section\"\n    >\n      {/* Background */}\n      <div className=\"absolute inset-0\">\n        <Image\n          src={content.background.image}\n          alt=\"Contact background\"\n          fill\n          className=\"object-cover rounded-2xl\"\n          priority\n        />\n        <div className=\"absolute inset-0 bg-slate-900/70 dark:bg-background/80 rounded-2xl\" />\n      </div>\n\n      {/* Content */}\n      <div className={cn(\"relative z-10 max-w-6xl mx-auto\")}>\n        <div className={cn(\"grid lg:grid-cols-2 gap-12 items-center\")}>\n          {/* Left Side - Hero Content */}\n          <div className=\"text-white space-y-8\" data-testid=\"hero-content\">\n            <div className=\"space-y-6\">\n              <Badge\n                className=\"bg-background/20 text-white border-border backdrop-blur-sm\"\n                data-testid=\"contact-badge\"\n              >\n                {BadgeIcon && <BadgeIcon className=\"w-3 h-3 mr-1\" />}\n                {content.header.badge.text}\n              </Badge>\n              <h2\n                className=\"text-4xl md:text-5xl font-bold leading-tight\"\n                data-testid=\"hero-title\"\n              >\n                {content.header.title}\n                <span className=\"block text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-400\">\n                  {content.header.subtitle}\n                </span>\n              </h2>\n              <p\n                className=\"text-xl text-white/90 leading-relaxed\"\n                data-testid=\"hero-description\"\n              >\n                {content.header.description}\n              </p>\n            </div>\n\n            {/* Contact Options */}\n            <div className=\"space-y-4\" data-testid=\"contact-features\">\n              {content.features.map((feature, index) => {\n                const IconComponent = feature.icon;\n                return (\n                  <div\n                    key={index}\n                    className=\"flex items-center gap-4 p-4 bg-background/20 backdrop-blur-sm rounded-lg border border-white/20\"\n                    data-testid={`feature-${index}`}\n                  >\n                    <div className=\"w-12 h-12 bg-background/10 dark:bg-background/40 rounded-lg flex items-center justify-center\">\n                      <IconComponent className=\"h-6 w-6 text-white\" />\n                    </div>\n                    <div>\n                      <p className=\"font-semibold text-white\">\n                        {feature.title}\n                      </p>\n                      <p className=\"text-white/80 text-sm\">\n                        {feature.description}\n                      </p>\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n\n            {/* Stats */}\n            <div\n              className=\"grid grid-cols-3 gap-6 pt-4\"\n              data-testid=\"contact-stats\"\n            >\n              {content.stats.map((stat, index) => (\n                <div\n                  key={index}\n                  className=\"text-center\"\n                  data-testid={`stat-${index}`}\n                >\n                  <div className=\"text-3xl font-bold text-white mb-1\">\n                    {stat.value}\n                  </div>\n                  <div className=\"text-sm text-white/70\">{stat.label}</div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          {/* Right Side - Contact Form */}\n          <div className=\"flex justify-center lg:justify-end\">\n            <Card\n              className=\"w-full max-w-lg bg-background/95 backdrop-blur-sm border-0 shadow-2xl\"\n              data-testid=\"contact-card\"\n            >\n              <CardContent className=\"p-8\">\n                <div className=\"space-y-6\">\n                  <div className=\"text-center space-y-2\">\n                    <h3 className=\"text-2xl font-bold\" data-testid=\"form-title\">\n                      {content.form.title}\n                    </h3>\n                    <p\n                      className=\"text-muted-foreground\"\n                      data-testid=\"form-description\"\n                    >\n                      {content.form.description}\n                    </p>\n                  </div>\n\n                  <Form {...form}>\n                    <form\n                      onSubmit={form.handleSubmit(onSubmit)}\n                      className=\"space-y-4\"\n                      data-testid=\"contact-form\"\n                    >\n                      <div\n                        className=\"grid grid-cols-2 gap-3\"\n                        data-testid=\"form-grid-fields\"\n                      >\n                        <FormField\n                          control={form.control}\n                          name=\"firstName\"\n                          render={({ field }) => (\n                            <FormItem data-testid=\"form-field-firstName\">\n                              <FormLabel\n                                className=\"sr-only\"\n                                data-testid=\"label-firstName\"\n                              >\n                                First Name *\n                              </FormLabel>\n                              <FormControl>\n                                <Input\n                                  placeholder=\"First name\"\n                                  className=\"bg-background border-border\"\n                                  data-testid=\"input-firstName\"\n                                  {...field}\n                                />\n                              </FormControl>\n                              <FormMessage />\n                            </FormItem>\n                          )}\n                        />\n                        <FormField\n                          control={form.control}\n                          name=\"lastName\"\n                          render={({ field }) => (\n                            <FormItem data-testid=\"form-field-lastName\">\n                              <FormLabel\n                                className=\"sr-only\"\n                                data-testid=\"label-lastName\"\n                              >\n                                Last Name *\n                              </FormLabel>\n                              <FormControl>\n                                <Input\n                                  placeholder=\"Last name\"\n                                  className=\"bg-background border-border\"\n                                  data-testid=\"input-lastName\"\n                                  {...field}\n                                />\n                              </FormControl>\n                              <FormMessage />\n                            </FormItem>\n                          )}\n                        />\n                      </div>\n\n                      <FormField\n                        control={form.control}\n                        name=\"email\"\n                        render={({ field }) => (\n                          <FormItem data-testid=\"form-field-email\">\n                            <FormLabel\n                              className=\"sr-only\"\n                              data-testid=\"label-email\"\n                            >\n                              Email Address *\n                            </FormLabel>\n                            <FormControl>\n                              <Input\n                                type=\"email\"\n                                placeholder=\"Email address\"\n                                className=\"bg-background border-border\"\n                                data-testid=\"input-email\"\n                                {...field}\n                              />\n                            </FormControl>\n                            <FormMessage />\n                          </FormItem>\n                        )}\n                      />\n\n                      <FormField\n                        control={form.control}\n                        name=\"phone\"\n                        render={({ field }) => (\n                          <FormItem data-testid=\"form-field-phone\">\n                            <FormLabel\n                              className=\"sr-only\"\n                              data-testid=\"label-phone\"\n                            >\n                              Phone Number\n                            </FormLabel>\n                            <FormControl>\n                              <Input\n                                type=\"tel\"\n                                placeholder=\"Phone number\"\n                                className=\"bg-background border-border\"\n                                data-testid=\"input-phone\"\n                                {...field}\n                              />\n                            </FormControl>\n                            <FormMessage />\n                          </FormItem>\n                        )}\n                      />\n\n                      <FormField\n                        control={form.control}\n                        name=\"projectType\"\n                        render={({ field }) => (\n                          <FormItem data-testid=\"form-field-projectType\">\n                            <FormLabel\n                              className=\"sr-only\"\n                              data-testid=\"label-projectType\"\n                            >\n                              Project Type\n                            </FormLabel>\n                            <FormControl>\n                              <select\n                                className=\"w-full h-10 px-3 bg-background border border-border rounded-md text-sm\"\n                                data-testid=\"select-projectType\"\n                                {...field}\n                              >\n                                {content.form.projectTypes.map((type) => (\n                                  <option key={type.value} value={type.value}>\n                                    {type.label}\n                                  </option>\n                                ))}\n                              </select>\n                            </FormControl>\n                            <FormMessage />\n                          </FormItem>\n                        )}\n                      />\n\n                      <FormField\n                        control={form.control}\n                        name=\"timeline\"\n                        render={({ field }) => (\n                          <FormItem data-testid=\"form-field-timeline\">\n                            <FormLabel\n                              className=\"sr-only\"\n                              data-testid=\"label-timeline\"\n                            >\n                              Timeline\n                            </FormLabel>\n                            <FormControl>\n                              <select\n                                className=\"w-full h-10 px-3 bg-background border border-border rounded-md text-sm\"\n                                data-testid=\"select-timeline\"\n                                {...field}\n                              >\n                                {content.form.timelines.map((timeline) => (\n                                  <option\n                                    key={timeline.value}\n                                    value={timeline.value}\n                                  >\n                                    {timeline.label}\n                                  </option>\n                                ))}\n                              </select>\n                            </FormControl>\n                            <FormMessage />\n                          </FormItem>\n                        )}\n                      />\n\n                      <FormField\n                        control={form.control}\n                        name=\"message\"\n                        render={({ field }) => (\n                          <FormItem data-testid=\"form-field-message\">\n                            <FormLabel\n                              className=\"sr-only\"\n                              data-testid=\"label-message\"\n                            >\n                              Project Details *\n                            </FormLabel>\n                            <FormControl>\n                              <Textarea\n                                placeholder=\"Tell us about your project, goals, and any specific requirements...\"\n                                className=\"bg-background border-border min-h-[100px]\"\n                                data-testid=\"textarea-message\"\n                                {...field}\n                              />\n                            </FormControl>\n                            <FormMessage />\n                          </FormItem>\n                        )}\n                      />\n\n                      {content.form.showUpdatesCheckbox && (\n                        <FormField\n                          control={form.control}\n                          name=\"updates\"\n                          render={({ field }) => (\n                            <FormItem data-testid=\"updates-section\">\n                              <div className=\"flex items-center space-x-2\">\n                                <FormControl>\n                                  <input\n                                    type=\"checkbox\"\n                                    className=\"rounded\"\n                                    checked={field.value}\n                                    onChange={field.onChange}\n                                    data-testid=\"checkbox-updates\"\n                                  />\n                                </FormControl>\n                                <FormLabel\n                                  className=\"text-sm text-muted-foreground cursor-pointer\"\n                                  data-testid=\"label-updates\"\n                                >\n                                  {content.form.updatesText}\n                                </FormLabel>\n                              </div>\n                              <FormMessage />\n                            </FormItem>\n                          )}\n                        />\n                      )}\n\n                      <Button\n                        type=\"submit\"\n                        className=\"w-full\"\n                        size=\"lg\"\n                        disabled={form.formState.isSubmitting}\n                        data-testid=\"form-submit-button\"\n                      >\n                        {ButtonIcon && <ButtonIcon className=\"mr-2 h-4 w-4\" />}\n                        {form.formState.isSubmitting\n                          ? \"Submitting...\"\n                          : content.form.buttonText}\n                      </Button>\n\n                      <div className=\"text-center space-y-2\">\n                        <p className=\"text-xs text-muted-foreground\">\n                          {content.form.disclaimer}\n                        </p>\n                        {content.form.trustIndicators.length > 0 && (\n                          <div className=\"flex items-center justify-center gap-4 text-xs text-muted-foreground\">\n                            {content.form.trustIndicators.map(\n                              (indicator, index) => (\n                                <span key={index}>{indicator}</span>\n                              ),\n                            )}\n                          </div>\n                        )}\n                      </div>\n                    </form>\n                  </Form>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:component"},{"path":"src/registry/lib/utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","type":"registry:lib"}]}