{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth-10",
  "description": "Modern split layout sign-up form with social authentication options.",
  "registryDependencies": [
    "button",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "registry/blocks/auth/10/signup-form.tsx",
      "content": "\"use client\";\n\nimport { CheckIcon, EyeIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { LogoIcon } from \"@/components/logo\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\n\nexport function SignupForm() {\n  const [showPassword, setShowPassword] = useState(false);\n\n  return (\n    <div className=\"grid min-h-screen w-full lg:grid-cols-2\">\n      {/* Left Side: Marketing/Benefits Panel */}\n      <div className=\"relative hidden flex-col justify-between border-white/5 border-r bg-zinc-950 p-12 text-white lg:flex\">\n        <div className=\"absolute inset-0 z-0 overflow-hidden\">\n          <div className=\"-top-1/4 -left-1/4 absolute h-full w-full animate-pulse rounded-full bg-blue-500/10 blur-[160px]\" />\n          <div className=\"-bottom-1/4 -right-1/4 absolute h-full w-full animate-pulse rounded-full bg-purple-500/10 blur-[160px] [animation-delay:2s]\" />\n          <div className=\"absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 brightness-100 contrast-150\" />\n        </div>\n\n        <div className=\"relative z-10\">\n          <div className=\"flex items-center gap-2\">\n            <LogoIcon className=\"size-6 invert dark:invert-0\" />\n            <span className=\"font-bold text-lg tracking-tight\">Freddy UI</span>\n          </div>\n\n          <div className=\"mt-24 space-y-8\">\n            <h1 className=\"font-bold text-5xl leading-[1.1] tracking-tightest xl:text-6xl\">\n              Elevate your <br />\n              <span className=\"text-blue-400\">development</span> <br />\n              workflow.\n            </h1>\n            <p className=\"max-w-md font-medium text-lg text-zinc-400\">\n              Join 10,000+ developers building faster with our premium shadcn/ui\n              blocks.\n            </p>\n\n            <ul className=\"space-y-5 pt-12\">\n              {[\n                \"Access to 100+ premium blocks\",\n                \"Weekly updates & new components\",\n                \"Advanced animation primitives\",\n                \"Component-level accessibility\",\n              ].map((benefit) => (\n                <li\n                  className=\"flex items-center gap-4 font-medium text-sm text-zinc-300\"\n                  key={benefit}\n                >\n                  <div className=\"flex size-5 shrink-0 items-center justify-center rounded-full bg-blue-500/10 text-blue-400 ring-1 ring-blue-500/20\">\n                    <CheckIcon className=\"size-3\" strokeWidth={3} />\n                  </div>\n                  {benefit}\n                </li>\n              ))}\n            </ul>\n          </div>\n        </div>\n\n        <div className=\"relative z-10 border-white/10 border-t pt-10\">\n          <blockquote className=\"space-y-4\">\n            <p className=\"font-medium text-base text-zinc-300 italic leading-relaxed\">\n              \"The best component library I've used. It saved us months of work\n              on our latest SaaS project.\"\n            </p>\n            <footer className=\"flex items-center gap-3\">\n              <div className=\"size-8 rounded-full border border-zinc-700 bg-zinc-800\" />\n              <div>\n                <p className=\"font-bold text-white text-xs uppercase tracking-widest\">\n                  Sarah Chen\n                </p>\n                <p className=\"mt-0.5 font-semibold text-[10px] text-zinc-500 uppercase tracking-widest\">\n                  CTO at TechFlow\n                </p>\n              </div>\n            </footer>\n          </blockquote>\n        </div>\n      </div>\n\n      {/* Right Side: Form */}\n      <div className=\"flex items-center justify-center bg-background p-6 md:p-12 lg:p-24\">\n        <div className=\"w-full max-w-[420px] space-y-10\">\n          <div className=\"flex flex-col space-y-3 text-center lg:text-left\">\n            <LogoIcon className=\"mx-auto size-8 lg:mx-0 lg:hidden\" />\n            <h2 className=\"font-bold text-4xl tracking-tightest\">\n              Create account\n            </h2>\n            <p className=\"font-medium text-base text-muted-foreground\">\n              Join the future of UI development.\n            </p>\n          </div>\n\n          {/* Social Grid (Tailark Style 2x2) */}\n          <div className=\"grid grid-cols-2 gap-4\">\n            {[\n              { label: \"Google\", icon: GoogleIcon },\n              { label: \"GitHub\", icon: GithubIcon },\n              { label: \"Apple\", icon: AppleIcon },\n              { label: \"Discord\", icon: DiscordIcon },\n            ].map((social) => (\n              <Button\n                className=\"h-12 rounded-xl border-zinc-200 bg-zinc-50/50 font-bold text-xs uppercase tracking-widest transition-all hover:border-zinc-300 hover:bg-background hover:shadow-sm dark:border-zinc-800 dark:bg-zinc-900/50 dark:hover:border-zinc-700\"\n                key={social.label}\n                type=\"button\"\n                variant=\"outline\"\n              >\n                <social.icon className=\"mr-2.5 size-4\" />\n                {social.label}\n              </Button>\n            ))}\n          </div>\n\n          <div className=\"relative\">\n            <div className=\"absolute inset-0 flex items-center\">\n              <span className=\"w-full border-zinc-100 border-t dark:border-zinc-800\" />\n            </div>\n            <div className=\"relative flex justify-center font-bold text-[10px] uppercase tracking-[0.2em]\">\n              <span className=\"bg-background px-4 text-muted-foreground/60\">\n                Or email signup\n              </span>\n            </div>\n          </div>\n\n          <form className=\"grid gap-6\" onSubmit={(e) => e.preventDefault()}>\n            <div className=\"grid gap-2.5\">\n              <Label\n                className=\"ml-1 font-bold text-[10px] text-muted-foreground/80 uppercase tracking-widest\"\n                htmlFor=\"full-name\"\n              >\n                Full Name\n              </Label>\n              <Input\n                className=\"h-12 rounded-xl border-zinc-200 bg-zinc-50/50 px-4 transition-all focus:bg-background dark:border-zinc-800 dark:bg-zinc-900/50\"\n                id=\"full-name\"\n                placeholder=\"John Doe\"\n              />\n            </div>\n            <div className=\"grid gap-2.5\">\n              <Label\n                className=\"ml-1 font-bold text-[10px] text-muted-foreground/80 uppercase tracking-widest\"\n                htmlFor=\"email\"\n              >\n                Email Address\n              </Label>\n              <Input\n                className=\"h-12 rounded-xl border-zinc-200 bg-zinc-50/50 px-4 transition-all focus:bg-background dark:border-zinc-800 dark:bg-zinc-900/50\"\n                id=\"email\"\n                placeholder=\"name@example.com\"\n              />\n            </div>\n            <div className=\"grid gap-2.5\">\n              <Label\n                className=\"ml-1 font-bold text-[10px] text-muted-foreground/80 uppercase tracking-widest\"\n                htmlFor=\"password\"\n                title=\"password\"\n              >\n                Password\n              </Label>\n              <div className=\"relative\">\n                <Input\n                  className=\"h-12 rounded-xl border-zinc-200 bg-zinc-50/50 pr-12 pl-4 transition-all focus:bg-background dark:border-zinc-800 dark:bg-zinc-900/50\"\n                  id=\"password\"\n                  placeholder=\"Create a password\"\n                  type={showPassword ? \"text\" : \"password\"}\n                />\n                <button\n                  className=\"-translate-y-1/2 absolute top-1/2 right-4 text-muted-foreground/60 transition-colors hover:text-foreground\"\n                  onClick={() => setShowPassword(!showPassword)}\n                  type=\"button\"\n                >\n                  <EyeIcon className=\"size-4\" />\n                </button>\n              </div>\n            </div>\n            <Button\n              className=\"mt-4 h-12 rounded-xl font-bold text-sm tracking-tight shadow-primary/20 shadow-xl transition-all hover:scale-[1.02] active:scale-[0.98]\"\n              size=\"lg\"\n            >\n              Get Started Free\n            </Button>\n          </form>\n\n          <p className=\"text-center font-medium text-muted-foreground text-sm\">\n            Already have an account?{\" \"}\n            <a\n              className=\"font-bold text-primary underline-offset-4 transition-all hover:underline\"\n              href=\"#\"\n            >\n              Sign In\n            </a>\n          </p>\n\n          <footer className=\"px-6 text-center font-medium text-[10px] text-muted-foreground/50 leading-relaxed\">\n            By signing up, you agree to our{\" \"}\n            <a\n              className=\"underline-offset-4 hover:text-primary hover:underline\"\n              href=\"#\"\n            >\n              Terms of Service\n            </a>{\" \"}\n            and{\" \"}\n            <a\n              className=\"underline-offset-4 hover:text-primary hover:underline\"\n              href=\"#\"\n            >\n              Privacy Policy\n            </a>\n            .\n          </footer>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nconst GoogleIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg fill=\"currentColor\" viewBox=\"0 0 24 24\" {...props}>\n    <title>Google</title>\n    <path d=\"M12.479,14.265v-3.279h11.049c0.108,0.571,0.164,1.247,0.164,1.979c0,2.46-0.672,5.502-2.84,7.669   C18.744,22.829,16.051,24,12.483,24C5.869,24,0.308,18.613,0.308,12S5.869,0,12.483,0c3.659,0,6.265,1.436,8.223,3.307L18.392,5.62   c-1.404-1.317-3.307-2.341-5.913-2.341C7.65,3.279,3.873,7.171,3.873,12s3.777,8.721,8.606,8.721c3.132,0,4.916-1.258,6.059-2.401   c0.927-0.927,1.537-2.251,1.777-4.059L12.479,14.265z\" />\n  </svg>\n);\n\nconst GithubIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg fill=\"currentColor\" viewBox=\"0 0 24 24\" {...props}>\n    <title>GitHub</title>\n    <path d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.73.084-.73 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.43.372.823 1.102.823 2.222 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\" />\n  </svg>\n);\n\nconst AppleIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg fill=\"currentColor\" viewBox=\"0 0 24 24\" {...props}>\n    <title>Apple</title>\n    <path d=\"M17.066 3.033c.883-1.072 1.488-2.559 1.326-4.033-1.268.051-2.803.844-3.711 1.905-.815.938-1.528 2.464-1.336 3.896 1.413.111 2.84-.7 3.721-1.768zm3.038 9.721c.023-2.14 1.761-3.161 1.841-3.208-1.002-1.465-2.556-1.666-3.106-1.688-1.319-.133-2.571.776-3.241.776-.668 0-1.693-.759-2.812-.738-1.47.021-2.826.855-3.583 2.171-1.53 2.651-.39 6.581 1.089 8.715.724 1.043 1.583 2.21 2.71 2.167 1.085-.043 1.493-.701 2.805-.701 1.312 0 1.678.701 2.822.68 1.164-.022 1.916-1.053 2.628-2.1 1.127-1.638 1.583-2.923 1.597-2.999-.033-.015-3.04-1.166-3.013-4.711z\" />\n  </svg>\n);\n\nconst DiscordIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg fill=\"currentColor\" viewBox=\"0 0 24 24\" {...props}>\n    <title>Discord</title>\n    <path d=\"M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.874.89.076.076 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.419-2.157 2.419zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.419-2.157 2.419z\" />\n  </svg>\n);\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "800px",
    "isPinned": true,
    "createdAt": "2024-03-27"
  },
  "categories": [
    "auth"
  ],
  "type": "registry:block"
}