{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth-login-split",
  "title": "Split login page",
  "description": "Login form with password reveal, remember-me and social sign-in beside an aurora testimonial panel.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "button",
    "input",
    "label",
    "https://velora.colorlib.com/r/aurora-background.json",
    "https://velora.colorlib.com/r/grid-pattern.json"
  ],
  "files": [
    {
      "path": "src/components/blocks/auth-login-split.tsx",
      "content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport { CheckIcon, EyeIcon, EyeOffIcon, StarIcon } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { AuroraBackground } from \"@/components/velora/aurora-background\";\nimport { GridPattern } from \"@/components/velora/grid-pattern\";\nimport { cn } from \"@/lib/utils\";\n\nconst BRAND = \"Acme\";\nconst TITLE = \"Welcome back\";\nconst SUBTITLE = \"Log in to your Acme workspace to pick up where you left off.\";\nconst LINKS = { forgot: \"#\", signup: \"#\", privacy: \"#\", terms: \"#\", home: \"#\" };\n\nconst TESTIMONIAL = {\n  quote:\n    \"We moved three teams onto Acme in a week. Planning went from a meeting to a glance, and our release notes finally write themselves.\",\n  name: \"Maya Chen\",\n  role: \"VP Engineering, Northwind\",\n};\nconst STATS = [\n  { value: \"4,000+\", label: \"teams\" },\n  { value: \"99.99%\", label: \"uptime\" },\n  { value: \"4.9/5\", label: \"average rating\" },\n];\nconst ACTIVITY = [\n  { title: \"Release 4.2 deployed\", meta: \"Production · 2 min ago\" },\n  { title: \"Roadmap synced\", meta: \"12 issues updated\" },\n];\n\n/**\n * Split login screen: the form on the left, an aurora panel with a\n * testimonial on the right (hidden below `lg`). Submitting does nothing —\n * wire `handleSubmit` to your auth provider.\n */\nexport function AuthLoginSplit() {\n  const id = useId();\n  const [showPassword, setShowPassword] = useState(false);\n\n  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n  }\n\n  return (\n    <section className=\"grid min-h-[48rem] bg-background lg:grid-cols-2\">\n      <div className=\"flex flex-col px-6 py-10 sm:px-12 lg:px-16\">\n        <a\n          href={LINKS.home}\n          className=\"inline-flex w-fit items-center gap-2 rounded-md font-semibold tracking-tight focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring\"\n        >\n          <LogoMark />\n          {BRAND}\n        </a>\n\n        <div className=\"flex flex-1 items-center py-16\">\n          <div className=\"mx-auto w-full max-w-sm\">\n            <h2 className=\"text-3xl font-semibold tracking-tight\">{TITLE}</h2>\n            <p className=\"mt-2 text-pretty text-muted-foreground\">{SUBTITLE}</p>\n\n            <form onSubmit={handleSubmit} className=\"mt-10 space-y-5\">\n              <div className=\"space-y-2\">\n                <Label htmlFor={`${id}-email`}>Email</Label>\n                <Input\n                  id={`${id}-email`}\n                  name=\"email\"\n                  type=\"email\"\n                  required\n                  autoComplete=\"email\"\n                  placeholder=\"you@company.com\"\n                  className=\"h-10 px-3\"\n                />\n              </div>\n\n              <div className=\"space-y-2\">\n                <div className=\"flex items-center justify-between gap-4\">\n                  <Label htmlFor={`${id}-password`}>Password</Label>\n                  <a\n                    href={LINKS.forgot}\n                    className=\"rounded-sm text-sm font-medium text-primary hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n                  >\n                    Forgot password?\n                  </a>\n                </div>\n                <div className=\"relative\">\n                  <Input\n                    id={`${id}-password`}\n                    name=\"password\"\n                    type={showPassword ? \"text\" : \"password\"}\n                    required\n                    autoComplete=\"current-password\"\n                    className=\"h-10 pr-11 pl-3\"\n                  />\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    aria-label=\"Show password\"\n                    aria-pressed={showPassword}\n                    aria-controls={`${id}-password`}\n                    onClick={() => setShowPassword((shown) => !shown)}\n                    className=\"absolute top-1 right-1 text-muted-foreground hover:text-foreground\"\n                  >\n                    {showPassword ? <EyeOffIcon aria-hidden /> : <EyeIcon aria-hidden />}\n                  </Button>\n                </div>\n              </div>\n\n              <div className=\"flex items-center gap-2.5\">\n                <input\n                  id={`${id}-remember`}\n                  name=\"remember\"\n                  type=\"checkbox\"\n                  className=\"size-4 shrink-0 cursor-pointer accent-primary dark:scheme-dark focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n                />\n                <Label htmlFor={`${id}-remember`} className=\"cursor-pointer font-normal\">\n                  Keep me signed in for 30 days\n                </Label>\n              </div>\n\n              <Button type=\"submit\" size=\"lg\" className=\"h-10 w-full\">\n                Log in\n              </Button>\n            </form>\n\n            <div className=\"my-8 flex items-center gap-4 text-xs text-muted-foreground uppercase\">\n              <span aria-hidden className=\"h-px flex-1 bg-border\" />\n              or continue with\n              <span aria-hidden className=\"h-px flex-1 bg-border\" />\n            </div>\n\n            <div className=\"grid grid-cols-2 gap-3\">\n              <Button type=\"button\" variant=\"outline\" size=\"lg\" className=\"h-10\">\n                <GitHubMark />\n                GitHub\n              </Button>\n              <Button type=\"button\" variant=\"outline\" size=\"lg\" className=\"h-10\">\n                <GoogleMark />\n                Google\n              </Button>\n            </div>\n\n            <p className=\"mt-10 text-center text-sm text-muted-foreground\">\n              New to {BRAND}?{\" \"}\n              <a\n                href={LINKS.signup}\n                className=\"rounded-sm font-medium text-foreground underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n              >\n                Create an account\n              </a>\n            </p>\n          </div>\n        </div>\n\n        <p className=\"text-xs text-muted-foreground\">\n          © 2026 {BRAND} Inc. ·{\" \"}\n          <a href={LINKS.privacy} className=\"hover:text-foreground\">\n            Privacy\n          </a>{\" \"}\n          ·{\" \"}\n          <a href={LINKS.terms} className=\"hover:text-foreground\">\n            Terms\n          </a>\n        </p>\n      </div>\n\n      <div className=\"hidden p-3 lg:block\">\n        <div className=\"dark relative isolate flex h-full flex-col justify-between gap-12 overflow-hidden rounded-3xl border bg-card p-12 text-foreground\">\n          <AuroraBackground intensity=\"vivid\" className=\"-z-10\" />\n          <GridPattern\n            width={48}\n            height={48}\n            className=\"-z-10 fill-transparent stroke-foreground/10 [mask-image:radial-gradient(ellipse_at_top_right,black,transparent_70%)]\"\n          />\n\n          <ul aria-label=\"Recent activity\" className=\"ml-auto w-full max-w-xs space-y-3\">\n            {ACTIVITY.map((item, i) => (\n              <li\n                key={item.title}\n                className={cn(\n                  \"flex items-center gap-3 rounded-2xl border bg-background/60 p-3 shadow-lg backdrop-blur\",\n                  i === 1 && \"mr-8\"\n                )}\n              >\n                <span className=\"grid size-8 shrink-0 place-items-center rounded-full bg-primary text-primary-foreground\">\n                  <CheckIcon aria-hidden className=\"size-4\" />\n                </span>\n                <span className=\"text-sm\">\n                  <span className=\"block font-medium\">{item.title}</span>\n                  <span className=\"block text-xs text-muted-foreground\">{item.meta}</span>\n                </span>\n              </li>\n            ))}\n          </ul>\n\n          <div>\n            <figure>\n              <div className=\"flex gap-1 text-brand-to\" aria-label=\"Rated 5 out of 5\" role=\"img\">\n                {Array.from({ length: 5 }, (_, i) => (\n                  <StarIcon key={i} aria-hidden className=\"size-4 fill-current\" />\n                ))}\n              </div>\n              <blockquote className=\"mt-5 text-xl leading-relaxed font-medium text-balance xl:text-2xl\">\n                “{TESTIMONIAL.quote}”\n              </blockquote>\n              <figcaption className=\"mt-6 flex items-center gap-3\">\n                <span\n                  aria-hidden\n                  className=\"grid size-10 place-items-center rounded-full bg-gradient-to-br from-brand-from to-brand-to text-sm font-semibold text-primary-foreground\"\n                >\n                  {TESTIMONIAL.name\n                    .split(\" \")\n                    .map((word) => word[0])\n                    .join(\"\")}\n                </span>\n                <span className=\"text-sm\">\n                  <span className=\"block font-medium\">{TESTIMONIAL.name}</span>\n                  <span className=\"block text-muted-foreground\">{TESTIMONIAL.role}</span>\n                </span>\n              </figcaption>\n            </figure>\n\n            <dl className=\"mt-10 grid grid-cols-3 gap-6 border-t pt-8\">\n              {STATS.map((stat) => (\n                <div key={stat.label} className=\"flex flex-col-reverse\">\n                  <dt className=\"mt-1 text-xs text-muted-foreground\">{stat.label}</dt>\n                  <dd className=\"text-2xl font-semibold tracking-tight\">{stat.value}</dd>\n                </div>\n              ))}\n            </dl>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nfunction LogoMark() {\n  return (\n    <svg aria-hidden viewBox=\"0 0 24 24\" className=\"size-7\">\n      <rect width=\"24\" height=\"24\" rx=\"7\" className=\"fill-primary\" />\n      <path d=\"M7 16.5 12 7l5 9.5\" fill=\"none\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"stroke-primary-foreground\" />\n    </svg>\n  );\n}\n\nfunction GitHubMark() {\n  return (\n    <svg aria-hidden viewBox=\"0 0 24 24\" fill=\"currentColor\">\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-.729.084-.729 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.42.36.81 1.096.81 2.22 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}\n\nfunction GoogleMark() {\n  return (\n    <svg aria-hidden viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09Z\" />\n      <path d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23Z\" />\n      <path d=\"M5.84 14.1A6.6 6.6 0 0 1 5.5 12c0-.73.13-1.43.34-2.1V7.07H2.18A11 11 0 0 0 1 12c0 1.78.43 3.45 1.18 4.93l3.66-2.84Z\" />\n      <path d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53Z\" />\n    </svg>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/blocks/auth-login-split.tsx"
    }
  ],
  "categories": [
    "auth-sections"
  ],
  "type": "registry:block"
}