{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "signup-07",
  "title": "Signup 07",
  "description": "A simple signup block",
  "dependencies": [
    "react-hook-form",
    "@hookform/resolvers",
    "zod",
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "field",
    "input",
    "separator"
  ],
  "files": [
    {
      "path": "src/registry/blocks/radix/signup-07/components/signup.tsx",
      "content": "import Link from \"next/link\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport { Separator } from \"@/registry/bases/radix/ui/separator\";\nimport { GoogleLogo } from \"@/registry/blocks/radix/signup-07/components/icons\";\nimport { Logo } from \"@/registry/blocks/radix/signup-07/components/logo\";\nimport { SignUpForm } from \"@/registry/blocks/radix/signup-07/components/signup-form\";\nimport { Testimonials } from \"./testimonials\";\n\nconst SignUp = () => (\n  <div className=\"grid grid-cols-1 lg:grid-cols-2 lg:divide-x\">\n    <div className=\"flex h-screen items-center justify-center\">\n      <div className=\"mx-auto w-full max-w-md px-10 py-14 sm:rounded-2xl sm:border sm:bg-card sm:shadow-2xl/5\">\n        <Logo className=\"mx-auto size-9\" />\n        <h1 className=\"mt-3 text-center font-medium text-2xl tracking-[-0.015em]\">\n          Sign up to Shadcn UI Blocks\n        </h1>\n\n        <div className=\"mt-10\">\n          <Button className=\"w-full\" size=\"lg\" type=\"button\">\n            <GoogleLogo className=\"mr-2 size-4\" />\n            Continue with Google\n          </Button>\n\n          <div className=\"my-6 flex items-center justify-center gap-2 overflow-hidden\">\n            <Separator />\n            <span className=\"text-muted-foreground text-sm\">OR</span>\n            <Separator />\n          </div>\n\n          <SignUpForm />\n        </div>\n\n        <p className=\"mt-6 text-center text-sm\">\n          Already have an account?{\" \"}\n          <Link className=\"text-muted-foreground\" href=\"#\">\n            Login\n          </Link>\n        </p>\n      </div>\n    </div>\n    <div className=\"relative flex h-full w-full flex-col overflow-hidden bg-muted/50 dark:bg-muted/30\">\n      <img\n        alt=\"Sign up\"\n        className=\"absolute inset-0 size-full object-cover\"\n        src=\"/images/ascii-art.png\"\n      />\n\n      <Testimonials />\n    </div>\n  </div>\n);\n\nexport default SignUp;\n",
      "type": "registry:component"
    },
    {
      "path": "src/registry/blocks/radix/signup-07/components/signup-form.tsx",
      "content": "\"use client\";\n\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { Mail } from \"lucide-react\";\nimport { Controller, useForm } from \"react-hook-form\";\nimport { z } from \"zod\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\";\nimport { Input } from \"@/registry/bases/radix/ui/input\";\n\nconst formSchema = z.object({\n  email: z.string().email({\n    message: \"Invalid email address.\",\n  }),\n  password: z.string().min(8, {\n    message: \"Password must be at least 8 characters.\",\n  }),\n});\n\nexport const SignUpForm = () => {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      email: \"\",\n      password: \"\",\n    },\n  });\n\n  function onSubmit(values: z.infer<typeof formSchema>) {\n    // Handle form submission\n    console.log(values);\n  }\n\n  return (\n    <form onSubmit={form.handleSubmit(onSubmit)}>\n      <div className=\"space-y-5\">\n        <Controller\n          control={form.control}\n          name=\"email\"\n          render={({ field, fieldState }) => (\n            <Field data-invalid={fieldState.invalid}>\n              <FieldLabel>Email</FieldLabel>\n              <Input\n                aria-invalid={fieldState.invalid}\n                placeholder=\"Enter your email\"\n                type=\"email\"\n                {...field}\n              />\n              <FieldDescription>\n                We'll never share your email with anyone else.\n              </FieldDescription>\n              <FieldError errors={[fieldState.error]} />\n            </Field>\n          )}\n        />\n\n        <Controller\n          control={form.control}\n          name=\"password\"\n          render={({ field, fieldState }) => (\n            <Field data-invalid={fieldState.invalid}>\n              <FieldLabel>Password</FieldLabel>\n              <Input\n                aria-invalid={fieldState.invalid}\n                placeholder=\"Enter your password\"\n                type=\"password\"\n                {...field}\n              />\n              <FieldError errors={[fieldState.error]} />\n            </Field>\n          )}\n        />\n      </div>\n      <Button className=\"mt-6 w-full\" size=\"lg\">\n        <Mail className=\"mr-2\" />\n        Continue with Email\n      </Button>\n    </form>\n  );\n};\n",
      "type": "registry:component"
    },
    {
      "path": "src/registry/blocks/radix/signup-07/components/icons.tsx",
      "content": "import type { SVGProps } from \"react\";\n\nexport const GoogleLogo = (props: SVGProps<SVGSVGElement>) => {\n  return (\n    <svg\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <title>Google</title>\n      <path\n        d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n};\n",
      "type": "registry:component"
    },
    {
      "path": "src/registry/blocks/radix/signup-07/components/testimonials.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport {\n  Carousel,\n  type CarouselApi,\n  CarouselContent,\n  CarouselItem,\n} from \"@/registry/bases/radix/ui/carousel\";\nimport { cn } from \"@/lib/utils\";\n\nconst testimonials = [\n  {\n    name: \"Sarah Johnson\",\n    role: \"Product Designer at Canva\",\n    avatar: \"https://mockmind-api.uifaces.co/content/human/97.jpg\",\n    testimonial:\n      \"This product completely changed the way I work. The interface is intuitive and the performance is top-notch.\",\n  },\n  {\n    name: \"Raj Mehta\",\n    role: \"Frontend Developer at Zomato\",\n    avatar: \"https://mockmind-api.uifaces.co/content/human/80.jpg\",\n    testimonial:\n      \"It's rare to find a tool that blends design and usability so well. Highly recommend it to all developers!\",\n  },\n  {\n    name: \"Emily Chen\",\n    role: \"Marketing Manager at HubSpot\",\n    avatar: \"https://mockmind-api.uifaces.co/content/human/113.jpg\",\n    testimonial:\n      \"The experience has been seamless from day one. Great support, fast delivery, and amazing value at a great price.\",\n  },\n  {\n    name: \"Daniel Kim\",\n    role: \"CTO at NextLaunch\",\n    avatar: \"https://mockmind-api.uifaces.co/content/human/90.jpg\",\n    testimonial:\n      \"We integrated this solution into our workflow and saw an instant boost in productivity and collaboration.\",\n  },\n  {\n    name: \"Aisha Patel\",\n    role: \"Software Engineer at Swiggy\",\n    avatar: \"https://mockmind-api.uifaces.co/content/human/116.jpg\",\n    testimonial:\n      \"I've used several tools in this category, but nothing matches the polish, performance, and reliability of this one.\",\n  },\n  {\n    name: \"Liam Garcia\",\n    role: \"Startup Founder\",\n    avatar: \"https://mockmind-api.uifaces.co/content/human/112.jpg\",\n    testimonial:\n      \"As a founder, I care about speed and simplicity. This product delivers on both fronts beautifully and the support is top-notch.\",\n  },\n];\n\nexport const Testimonials = () => {\n  const [api, setApi] = React.useState<CarouselApi | null>(null);\n  const [count, setCount] = React.useState(0);\n  const [current, setCurrent] = React.useState(0);\n\n  React.useEffect(() => {\n    if (!api) {\n      return;\n    }\n\n    setCount(api.scrollSnapList().length);\n    setCurrent(api.selectedScrollSnap() + 1);\n\n    api.on(\"select\", () => {\n      setCurrent(api.selectedScrollSnap() + 1);\n    });\n  }, [api]);\n\n  return (\n    <div className=\"dark isolate mx-auto my-auto flex h-full w-full max-w-7xl flex-col justify-center bg-black/70 px-10 py-12 sm:py-14\">\n      <h2 className=\"text-balance text-center font-medium text-4xl text-foreground tracking-tight\">\n        Trusted by Thousands\n      </h2>\n      <p className=\"mt-2 text-balance text-center text-foreground/80 text-lg tracking-normal sm:mt-3 sm:text-2xl\">\n        Real stories from real users who&apos;ve seen real results\n      </p>\n\n      <div className=\"mx-auto mt-20 w-full max-w-3xl md:mt-16\">\n        <Carousel\n          opts={{\n            align: \"start\",\n          }}\n          setApi={setApi}\n        >\n          <CarouselContent className=\"select-none\">\n            {testimonials.map(({ name, avatar, role, testimonial }, index) => (\n              <CarouselItem key={index}>\n                <div className=\"relative flex h-full gap-8 rounded-lg border bg-white/30 p-8 pt-16 pr-8 md:pt-8\">\n                  {/* Quote */}\n                  <span className=\"absolute top-4 left-6 font-mono text-7xl md:hidden\">\n                    &#8220;\n                  </span>\n\n                  <div className=\"flex flex-col items-center gap-2 text-white\">\n                    <p className=\"grow text-pretty text-center font-medium text-xl leading-relaxed tracking-normal sm:text-2xl sm:leading-[1.45]\">\n                      {testimonial}\n                    </p>\n                    <div className=\"mt-6 flex items-center gap-2\">\n                      <img\n                        alt=\"\"\n                        className=\"aspect-square h-12 rounded-full\"\n                        src={avatar}\n                      />\n                      <div className=\"flex flex-col\">\n                        <p className=\"font-medium text-lg\">{name}</p>\n                        <p className=\"text-sm text-white/80\">{role}</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n        </Carousel>\n\n        {/* Pagination */}\n        <div className=\"mt-6 flex items-center justify-center gap-2\">\n          {Array.from({ length: count }).map((_, index) => (\n            <div\n              className={cn(\n                \"h-2 w-2 rounded-full\",\n                current === index + 1 ? \"bg-primary\" : \"bg-primary/20\"\n              )}\n              key={index}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:component"
    },
    {
      "path": "src/registry/blocks/radix/signup-07/components/logo.tsx",
      "content": "import type { SVGProps } from \"react\";\n\nexport const Logo = (props: SVGProps<SVGSVGElement>) => {\n  return (\n    <svg\n      fill=\"currentColor\"\n      height=\"200\"\n      viewBox=\"0 0 200 200\"\n      width=\"200\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <g clip-path=\"url(#clip0_1113_5014)\">\n        <path d=\"M168.89 31.1101C159.969 21.5141 149.206 13.8146 137.243 8.4716C125.28 3.12858 112.363 0.251692 99.2637 0.0127915C86.1641 -0.226109 73.1507 2.17789 61.001 7.08116C48.8513 11.9844 37.8146 19.2864 28.5503 28.5507C19.2859 37.8151 11.9839 48.8518 7.08067 61.0015C2.1774 73.1512 -0.226597 86.1646 0.0123033 99.2642C0.251203 112.364 3.1281 125.281 8.47111 137.244C13.8141 149.207 21.5136 159.97 31.1096 168.89C40.0301 178.486 50.7932 186.186 62.756 191.529C74.7189 196.872 87.6359 199.749 100.736 199.987C113.835 200.226 126.849 197.822 138.998 192.919C151.148 188.016 162.185 180.714 171.449 171.45C180.713 162.185 188.015 151.148 192.919 138.999C197.822 126.849 200.226 113.836 199.987 100.736C199.748 87.6364 196.871 74.7193 191.528 62.7565C186.185 50.7937 178.486 40.0306 168.89 31.1101ZM1.49965 97.5001C1.50727 80.0254 6.28449 62.8842 15.3163 47.9245C24.3481 32.9648 37.2918 20.7541 52.7521 12.6088C68.2124 4.46343 85.6027 0.692494 103.048 1.70249C120.494 2.71248 137.333 8.4651 151.75 18.3401C136.818 9.57797 119.813 4.97194 102.5 5.00014H98.9996C85.5712 4.99313 72.312 7.99717 60.1978 13.7912C48.0836 19.5853 37.4227 28.0218 28.9996 38.4801C15.5955 53.8715 7.35712 73.0798 5.44476 93.4C3.53241 113.72 8.04243 134.128 18.3396 151.75C7.35031 135.795 1.47677 116.874 1.49965 97.5001ZM87.7197 181.59C75.8751 180.407 64.4235 176.691 54.1418 170.693C43.8601 164.694 34.9889 156.555 28.13 146.826C21.2712 137.097 16.5852 126.007 14.39 114.308C12.1948 102.608 12.5417 90.5736 15.4072 79.0202C18.2728 67.4668 23.5899 56.6649 30.9978 47.3474C38.4057 38.0299 47.731 30.4148 58.3412 25.0188C68.9514 19.6228 80.5981 16.572 92.4911 16.0736C104.384 15.5752 116.245 17.6408 127.27 22.1301C116.428 18.3302 104.912 16.8361 93.4598 17.7437C82.0073 18.6512 70.8706 21.9404 60.7628 27.4006C50.6549 32.8607 41.7987 40.3715 34.7612 49.452C27.7237 58.5325 22.66 68.9826 19.8944 80.1331C17.1288 91.2836 16.7222 102.889 18.7007 114.205C20.6792 125.522 24.9992 136.301 31.384 145.852C37.7687 155.402 46.0776 163.515 55.7786 169.669C65.4796 175.823 76.3588 179.883 87.7197 181.59ZM99.9996 73.7301C128.08 27.4001 201.45 96.1901 99.9996 151.53C-1.45035 96.1901 71.9196 27.4001 99.9996 73.7301ZM131 176.46C143.047 171.577 153.77 163.915 162.294 154.1C170.818 144.285 176.901 132.594 180.048 119.981C183.195 107.368 183.316 94.1893 180.402 81.5204C177.488 68.8515 171.621 57.0507 163.28 47.0801C151.945 32.3368 136.085 21.7208 118.134 16.8616C100.184 12.0025 81.1341 13.1687 63.9102 20.1814C46.6863 27.194 32.2398 39.6655 22.7883 55.6814C13.3368 71.6973 9.40259 90.3724 11.5896 108.84C9.65527 96.6398 10.3014 84.1693 13.4863 72.2342C16.6712 60.2991 22.324 49.1647 30.0796 39.5501C38.8869 29.402 49.7301 21.2196 61.9051 15.5344C74.0801 9.84913 87.3148 6.78813 100.75 6.55014C123.096 6.98528 144.45 15.8593 160.523 31.39C176.596 46.9206 186.197 67.9575 187.399 90.2756C188.6 112.594 181.313 134.54 167 151.706C152.688 168.873 132.41 179.988 110.24 182.82C117.404 181.602 124.382 179.464 131 176.46ZM32.1996 167.8C19.5769 154.243 11.1518 137.32 7.94319 119.076C4.73459 100.833 6.87988 82.0503 14.1196 65.0001C8.21457 81.7197 7.37989 99.811 11.7204 117.003C16.0609 134.195 25.3831 149.722 38.5169 161.635C51.6508 173.548 68.0109 181.316 85.5438 183.963C103.077 186.611 121.001 184.021 137.067 176.517C153.133 169.014 166.624 156.932 175.848 141.788C185.071 126.644 189.616 109.113 188.911 91.3952C188.206 73.6776 182.284 56.5629 171.886 42.1994C161.489 27.8359 147.081 16.8637 130.47 10.6601C144.385 14.918 157.15 22.2836 167.8 32.2001C184.692 50.3981 193.873 74.4361 193.411 99.2617C192.949 124.087 182.882 147.767 165.324 165.325C147.767 182.882 124.087 192.95 99.2612 193.411C74.4356 193.873 50.3976 184.693 32.1996 167.8ZM102.5 198.5C83.1263 198.523 64.2047 192.649 48.2496 181.66C66.8611 192.543 88.5543 196.952 109.937 194.197C131.32 191.442 151.188 181.678 166.433 166.433C181.678 151.188 191.441 131.321 194.196 109.938C196.951 88.5548 192.543 66.8616 181.66 48.2501C191.535 62.6671 197.287 79.5061 198.297 96.9516C199.307 114.397 195.536 131.787 187.391 147.248C179.246 162.708 167.035 175.652 152.075 184.684C137.116 193.715 119.974 198.493 102.5 198.5Z\" />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_1113_5014\">\n          <rect height=\"200\" width=\"200\" />\n        </clipPath>\n      </defs>\n    </svg>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}