{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth-2",
  "description": "Modern auth page with testimonial sidebar, social logins, and email signup.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "button",
    "input-group"
  ],
  "files": [
    {
      "path": "registry/blocks/auth/2/auth-page.tsx",
      "content": "\"use client\";\n\nimport { AtSignIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { LogoIcon } from \"@/components/logo\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/components/ui/input-group\";\nimport { FloatingPaths } from \"./floating-paths\";\n\nexport function AuthPage() {\n  return (\n    <main className=\"relative md:h-screen md:overflow-hidden lg:grid lg:grid-cols-2\">\n      {/* Left panel — testimonial sidebar */}\n      <div className=\"relative hidden h-full flex-col border-r bg-secondary p-10 lg:flex dark:bg-secondary/20\">\n        <div className=\"absolute inset-0 bg-linear-to-b from-transparent via-transparent to-background\" />\n        <div className=\"absolute inset-0\">\n          <FloatingPaths position={1} />\n          <FloatingPaths position={-1} />\n        </div>\n        <LogoIcon className=\"relative z-10 mr-auto size-7\" />\n        <div className=\"relative z-10 mt-auto\">\n          <blockquote className=\"space-y-3\">\n            <p className=\"text-foreground/90 text-xl leading-relaxed\">\n              &ldquo;This tool cut my workflow time in half. Can&apos;t imagine\n              working without it.&rdquo;\n            </p>\n            <footer className=\"font-mono font-semibold text-muted-foreground text-sm\">\n              — Vartik Anand\n            </footer>\n          </blockquote>\n        </div>\n      </div>\n\n      {/* Right panel — auth form */}\n      <div className=\"relative flex min-h-screen flex-col justify-center p-4\">\n        {/* Decorative radial glows */}\n        <div\n          aria-hidden\n          className=\"-z-10 absolute inset-0 isolate opacity-60 contain-strict\"\n        >\n          <div className=\"-translate-y-87.5 absolute top-0 right-0 h-320 w-140 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,theme(colors.foreground/6%)_0,hsla(0,0%,55%,.02)_50%,theme(colors.foreground/1%)_80%)]\" />\n          <div className=\"absolute top-0 right-0 h-320 w-60 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,theme(colors.foreground/4%)_0,theme(colors.foreground/1%)_80%,transparent_100%)] [translate:5%_-50%]\" />\n          <div className=\"-translate-y-87.5 absolute top-0 right-0 h-320 w-60 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,theme(colors.foreground/4%)_0,theme(colors.foreground/1%)_80%,transparent_100%)]\" />\n        </div>\n\n        <div className=\"mx-auto w-full max-w-sm space-y-6\">\n          {/* Logo + heading */}\n          <div className=\"space-y-3\">\n            <LogoIcon className=\"size-8\" />\n            <div>\n              <h1 className=\"font-bold text-2xl text-foreground tracking-tight\">\n                Welcome back\n              </h1>\n              <p className=\"mt-1 text-muted-foreground text-sm\">\n                Sign in to your account or create a new one.\n              </p>\n            </div>\n          </div>\n\n          {/* OAuth buttons */}\n          <div className=\"space-y-2.5\">\n            <Button\n              className=\"w-full gap-2.5 transition-all hover:shadow-md\"\n              size=\"lg\"\n              type=\"button\"\n              variant=\"outline\"\n            >\n              <GoogleIcon className=\"size-4 shrink-0\" />\n              Continue with Google\n            </Button>\n            <Button\n              className=\"w-full gap-2.5 transition-all hover:shadow-md\"\n              size=\"lg\"\n              type=\"button\"\n              variant=\"outline\"\n            >\n              <AppleIcon className=\"size-4 shrink-0\" />\n              Continue with Apple\n            </Button>\n            <Button\n              className=\"w-full gap-2.5 transition-all hover:shadow-md\"\n              size=\"lg\"\n              type=\"button\"\n              variant=\"outline\"\n            >\n              <GithubIcon className=\"size-4 shrink-0\" />\n              Continue with GitHub\n            </Button>\n          </div>\n\n          {/* Divider */}\n          <div className=\"flex items-center gap-3\">\n            <div className=\"h-px flex-1 bg-border\" />\n            <span className=\"font-medium text-[11px] text-muted-foreground/60 uppercase tracking-wider\">\n              or\n            </span>\n            <div className=\"h-px flex-1 bg-border\" />\n          </div>\n\n          {/* Email form */}\n          <form className=\"space-y-3\">\n            <p className=\"text-muted-foreground text-xs\">\n              Enter your email address to sign in or create an account\n            </p>\n            <InputGroup>\n              <InputGroupInput\n                placeholder=\"your.email@example.com\"\n                type=\"email\"\n              />\n              <InputGroupAddon>\n                <AtSignIcon className=\"size-4\" />\n              </InputGroupAddon>\n            </InputGroup>\n            <Button className=\"w-full\" size=\"lg\" type=\"button\">\n              Continue with Email\n            </Button>\n          </form>\n\n          {/* Terms */}\n          <p className=\"text-center text-[11px] text-muted-foreground/70 leading-relaxed\">\n            By continuing, you agree to our{\" \"}\n            <a\n              className=\"underline underline-offset-4 transition-colors hover:text-foreground\"\n              href=\"#\"\n            >\n              Terms of Service\n            </a>{\" \"}\n            and{\" \"}\n            <a\n              className=\"underline underline-offset-4 transition-colors hover:text-foreground\"\n              href=\"#\"\n            >\n              Privacy Policy\n            </a>\n            .\n          </p>\n        </div>\n      </div>\n    </main>\n  );\n}\n\nconst GoogleIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\" {...props}>\n    <title>Google</title>\n    <g>\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    </g>\n  </svg>\n);\n\nfunction AppleIcon({\n  fill = \"currentColor\",\n  ...props\n}: React.ComponentProps<\"svg\">) {\n  return (\n    <svg aria-hidden=\"true\" fill={fill} viewBox=\"0 0 24 24\" {...props}>\n      <title>Apple</title>\n      <g>\n        <path d=\"M18.546,12.763c0.024-1.87,1.004-3.597,2.597-4.576c-1.009-1.442-2.64-2.323-4.399-2.378    c-1.851-0.194-3.645,1.107-4.588,1.107c-0.961,0-2.413-1.088-3.977-1.056C6.122,5.927,4.25,7.068,3.249,8.867    c-2.131,3.69-0.542,9.114,1.5,12.097c1.022,1.461,2.215,3.092,3.778,3.035c1.529-0.063,2.1-0.975,3.945-0.975    c1.828,0,2.364,0.975,3.958,0.938c1.64-0.027,2.674-1.467,3.66-2.942c0.734-1.041,1.299-2.191,1.673-3.408    C19.815,16.788,18.548,14.879,18.546,12.763z\" />\n        <path d=\"M15.535,3.847C16.429,2.773,16.87,1.393,16.763,0c-1.366,0.144-2.629,0.797-3.535,1.829    c-0.895,1.019-1.349,2.351-1.261,3.705C13.352,5.548,14.667,4.926,15.535,3.847z\" />\n      </g>\n    </svg>\n  );\n}\n\nconst GithubIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg\n    aria-hidden=\"true\"\n    fill=\"currentColor\"\n    viewBox=\"0 0 1024 1024\"\n    {...props}\n  >\n    <title>GitHub</title>\n    <path\n      clipRule=\"evenodd\"\n      d=\"M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      transform=\"scale(64)\"\n    />\n  </svg>\n);\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/auth/2/floating-paths.tsx",
      "content": "import { motion } from \"motion/react\";\n\nexport function FloatingPaths({ position }: { position: number }) {\n  const paths = Array.from({ length: 36 }, (_, i) => ({\n    id: i,\n    d: `M-${380 - i * 5 * position} -${189 + i * 6}C-${\n      380 - i * 5 * position\n    } -${189 + i * 6} -${312 - i * 5 * position} ${216 - i * 6} ${\n      152 - i * 5 * position\n    } ${343 - i * 6}C${616 - i * 5 * position} ${470 - i * 6} ${\n      684 - i * 5 * position\n    } ${875 - i * 6} ${684 - i * 5 * position} ${875 - i * 6}`,\n    color: `rgba(15,23,42,${0.1 + i * 0.03})`,\n    width: 0.5 + i * 0.03,\n  }));\n\n  return (\n    <div className=\"pointer-events-none absolute inset-0\">\n      <svg\n        className=\"h-full w-full text-slate-950 dark:text-white\"\n        fill=\"none\"\n        viewBox=\"0 0 696 316\"\n      >\n        <title>Background Paths</title>\n        {paths.map((path) => (\n          <motion.path\n            animate={{\n              pathLength: 1,\n              opacity: [0.3, 0.6, 0.3],\n              pathOffset: [0, 1, 0],\n            }}\n            d={path.d}\n            initial={{ pathLength: 0.3, opacity: 0.6 }}\n            key={path.id}\n            stroke=\"currentColor\"\n            strokeOpacity={0.1 + path.id * 0.03}\n            strokeWidth={path.width}\n            transition={{\n              duration: 20 + Math.random() * 10,\n              repeat: Number.POSITIVE_INFINITY,\n              ease: \"linear\",\n            }}\n          />\n        ))}\n      </svg>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/logo.tsx",
      "content": "\"use client\";\n\nimport Image from \"next/image\";\nimport { useTheme } from \"next-themes\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype LogoProps = {\n  className?: string;\n};\n\nexport const LogoIcon = ({ className }: LogoProps) => {\n  const { theme, systemTheme } = useTheme();\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted) {\n    return (\n      <span\n        className={cn(\n          \"inline-block size-6 animate-pulse rounded-full bg-muted\",\n          className\n        )}\n      />\n    );\n  }\n\n  const currentTheme = theme === \"system\" ? systemTheme : theme;\n  const src =\n    currentTheme === \"dark\"\n      ? \"/logo/freddy-logo-icon-light.png\"\n      : \"/logo/freddy-logo-icon-dark.png\";\n\n  return (\n    <Image\n      alt=\"Freddy UI\"\n      className={cn(\"size-6 object-contain\", className)}\n      height={250}\n      priority\n      src={src}\n      width={250}\n    />\n  );\n};\n\nexport const Logo = ({ className }: LogoProps) => {\n  const { theme, systemTheme } = useTheme();\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted) {\n    return (\n      <span\n        className={cn(\n          \"inline-block h-6 w-24 animate-pulse rounded bg-muted\",\n          className\n        )}\n      />\n    );\n  }\n\n  const currentTheme = theme === \"system\" ? systemTheme : theme;\n  const src =\n    currentTheme === \"dark\"\n      ? \"/logo/freddy-logo-light.png\"\n      : \"/logo/freddy-logo-dark.png\";\n\n  return (\n    <Image\n      alt=\"Freddy UI\"\n      className={cn(\"h-6 w-auto object-contain\", className)}\n      height={106}\n      priority\n      src={src}\n      width={344}\n    />\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "auth"
  ],
  "type": "registry:block"
}