{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["@efferd/logo","@efferd/auth-divider","@efferd/apple-icon","@efferd/github-icon","@efferd/google-icon","button","input-group"],"name":"auth-5","description":"Modern signup page with testimonial sidebar and social sign-in.","dependencies":["motion"],"categories":["auth"],"files":[{"path":"registry/blocks/auth/5/index.tsx","target":"~/components/auth-page.tsx","type":"registry:component","content":"\"use client\";\n\nimport { AppleIcon } from \"@/components/icons/apple-icon\";\nimport { GithubIcon } from \"@/components/icons/github-icon\";\nimport { GoogleIcon } from \"@/components/icons/google-icon\";\nimport { Logo } from \"@/components/logo\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n\tInputGroup,\n\tInputGroupAddon,\n\tInputGroupInput,\n} from \"@/components/ui/input-group\";\nimport { AuthDivider } from \"@/components/auth-divider\";\nimport { FloatingPaths } from \"@/components/floating-paths\";\n\nexport function AuthPage() {\n\treturn (\n\t\t<main className=\"relative md:h-screen md:overflow-hidden lg:grid lg:grid-cols-2\">\n\t\t\t<div className=\"relative hidden h-full flex-col border-r bg-secondary p-10 lg:flex dark:bg-secondary/20\">\n\t\t\t\t<div className=\"absolute inset-0 bg-linear-to-b from-transparent via-transparent to-background\" />\n\t\t\t\t<Logo className=\"mr-auto h-4.5\" />\n\n\t\t\t\t<div className=\"z-10 mt-auto\">\n\t\t\t\t\t<blockquote className=\"space-y-2\">\n\t\t\t\t\t\t<p className=\"text-xl\">\n\t\t\t\t\t\t\t&ldquo;This Platform has helped me to save time and serve my\n\t\t\t\t\t\t\tclients faster than ever before.&rdquo;\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<footer className=\"font-mono font-semibold text-sm\">\n\t\t\t\t\t\t\t~ Ali Hassan\n\t\t\t\t\t\t</footer>\n\t\t\t\t\t</blockquote>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"absolute inset-0\">\n\t\t\t\t\t<FloatingPaths position={1} />\n\t\t\t\t\t<FloatingPaths position={-1} />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div className=\"relative flex min-h-screen flex-col justify-center px-8\">\n\t\t\t\t{/* Top Shades */}\n\t\t\t\t<div\n\t\t\t\t\taria-hidden\n\t\t\t\t\tclassName=\"absolute inset-0 isolate -z-10 opacity-60 contain-strict\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"absolute top-0 right-0 h-320 w-140 -translate-y-87.5 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,--theme(--color-foreground/.06)_0,hsla(0,0%,55%,.02)_50%,--theme(--color-foreground/.01)_80%)]\" />\n\t\t\t\t\t<div className=\"absolute top-0 right-0 h-320 w-60 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,--theme(--color-foreground/.04)_0,--theme(--color-foreground/.01)_80%,transparent_100%)] [translate:5%_-50%]\" />\n\t\t\t\t\t<div className=\"absolute top-0 right-0 h-320 w-60 -translate-y-87.5 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,--theme(--color-foreground/.04)_0,--theme(--color-foreground/.01)_80%,transparent_100%)]\" />\n\t\t\t\t</div>\n\t\t\t\t<Button asChild className=\"absolute top-7 left-5\" variant=\"ghost\">\n\t\t\t\t\t<a href=\"#\">\n\t\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\t\tdata-icon=\"inline-start\"\n\t\t\t\t\t\t\thugeicons=\"ArrowLeft01Icon\"\n\t\t\t\t\t\t\tlucide=\"ChevronLeftIcon\"\n\t\t\t\t\t\t\tphosphor=\"CaretLeftIcon\"\n\t\t\t\t\t\t\tremixicon=\"RiArrowLeftSLine\"\n\t\t\t\t\t\t\ttabler=\"IconChevronLeft\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\tHome\n\t\t\t\t\t</a>\n\t\t\t\t</Button>\n\n\t\t\t\t<div className=\"mx-auto space-y-4 sm:w-sm\">\n\t\t\t\t\t<Logo className=\"h-4.5 lg:hidden\" />\n\t\t\t\t\t<div className=\"flex flex-col space-y-1\">\n\t\t\t\t\t\t<h1 className=\"font-bold text-2xl tracking-wide\">\n\t\t\t\t\t\t\tSign In or Join Now!\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t<p className=\"text-base text-muted-foreground\">\n\t\t\t\t\t\t\tlogin or create your efferd account.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"space-y-2\">\n\t\t\t\t\t\t<Button className=\"w-full\">\n\t\t\t\t\t\t\t<GoogleIcon data-icon=\"inline-start\" />\n\t\t\t\t\t\t\tContinue with Google\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button className=\"w-full\">\n\t\t\t\t\t\t\t<AppleIcon data-icon=\"inline-start\" />\n\t\t\t\t\t\t\tContinue with Apple\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button className=\"w-full\">\n\t\t\t\t\t\t\t<GithubIcon data-icon=\"inline-start\" />\n\t\t\t\t\t\t\tContinue with GitHub\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<AuthDivider>OR</AuthDivider>\n\n\t\t\t\t\t<form className=\"space-y-2\">\n\t\t\t\t\t\t<p className=\"text-start text-muted-foreground text-xs\">\n\t\t\t\t\t\t\tEnter your email address to sign in or create an account\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<InputGroup>\n\t\t\t\t\t\t\t<InputGroupInput\n\t\t\t\t\t\t\t\tplaceholder=\"your.email@example.com\"\n\t\t\t\t\t\t\t\ttype=\"email\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<InputGroupAddon align=\"inline-start\">\n\t\t\t\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\t\t\t\thugeicons=\"AtIcon\"\n\t\t\t\t\t\t\t\t\tlucide=\"AtSignIcon\"\n\t\t\t\t\t\t\t\t\tphosphor=\"AtIcon\"\n\t\t\t\t\t\t\t\t\tremixicon=\"RiAtLine\"\n\t\t\t\t\t\t\t\t\ttabler=\"IconAt\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</InputGroupAddon>\n\t\t\t\t\t\t</InputGroup>\n\n\t\t\t\t\t\t<Button className=\"w-full\" type=\"button\">\n\t\t\t\t\t\t\tContinue With Email\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</form>\n\t\t\t\t\t<p className=\"mt-8 text-muted-foreground text-sm\">\n\t\t\t\t\t\tBy clicking continue, you agree to our{\" \"}\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tclassName=\"underline underline-offset-4 hover:text-primary\"\n\t\t\t\t\t\t\thref=\"#\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tTerms of Service\n\t\t\t\t\t\t</a>{\" \"}\n\t\t\t\t\t\tand{\" \"}\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tclassName=\"underline underline-offset-4 hover:text-primary\"\n\t\t\t\t\t\t\thref=\"#\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tPrivacy Policy\n\t\t\t\t\t\t</a>\n\t\t\t\t\t\t.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</main>\n\t);\n}\n"},{"path":"registry/blocks/auth/5/floating-paths.tsx","type":"registry:component","content":"\"use client\";\nimport { motion } from \"motion/react\";\n\nexport function FloatingPaths({ position }: { position: number }) {\n\tconst paths = Array.from({ length: 36 }, (_, i) => ({\n\t\tid: i,\n\t\td: `M-${380 - i * 5 * position} -${189 + i * 6}C-${\n\t\t\t380 - i * 5 * position\n\t\t} -${189 + i * 6} -${312 - i * 5 * position} ${216 - i * 6} ${\n\t\t\t152 - i * 5 * position\n\t\t} ${343 - i * 6}C${616 - i * 5 * position} ${470 - i * 6} ${\n\t\t\t684 - i * 5 * position\n\t\t} ${875 - i * 6} ${684 - i * 5 * position} ${875 - i * 6}`,\n\t\tcolor: `rgba(15,23,42,${0.1 + i * 0.03})`,\n\t\twidth: 0.5 + i * 0.03,\n\t}));\n\n\treturn (\n\t\t<div className=\"pointer-events-none absolute inset-0\">\n\t\t\t<svg\n\t\t\t\tclassName=\"h-full w-full text-primary\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tviewBox=\"0 0 696 316\"\n\t\t\t>\n\t\t\t\t<title>Background Paths</title>\n\t\t\t\t{paths.map((path) => (\n\t\t\t\t\t<motion.path\n\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\tpathLength: 1,\n\t\t\t\t\t\t\topacity: [0.3, 0.6, 0.3],\n\t\t\t\t\t\t\tpathOffset: [0, 1, 0],\n\t\t\t\t\t\t}}\n\t\t\t\t\t\td={path.d}\n\t\t\t\t\t\tinitial={{ pathLength: 0.3, opacity: 0.6 }}\n\t\t\t\t\t\tkey={path.id}\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstrokeOpacity={0.1 + path.id * 0.03}\n\t\t\t\t\t\tstrokeWidth={path.width}\n\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\tduration: 20 + Math.random() * 10,\n\t\t\t\t\t\t\trepeat: Number.POSITIVE_INFINITY,\n\t\t\t\t\t\t\tease: \"linear\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</svg>\n\t\t</div>\n\t);\n}\n"}]}