{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sign-in-6",
  "title": "Split Screen",
  "description": "Split Screen for Sign In.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "avatar",
    "button",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "registry/intents/auth/sign-in/sign-in-6.tsx",
      "content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\n\nfunction GoogleIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"size-4\" aria-hidden>\n      <path\n        fill=\"#4285F4\"\n        d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1Z\"\n      />\n      <path\n        fill=\"#34A853\"\n        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      />\n      <path\n        fill=\"#FBBC05\"\n        d=\"M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88l3.66-2.84Z\"\n      />\n      <path\n        fill=\"#EA4335\"\n        d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06L5.84 9.9C6.71 7.31 9.14 5.38 12 5.38Z\"\n      />\n    </svg>\n  )\n}\n\nconst proof = [\n  {\n    initials: 'JD',\n    src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&facepad=2&w=80&h=80&q=80',\n  },\n  {\n    initials: 'MK',\n    src: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&facepad=2&w=80&h=80&q=80',\n  },\n  {\n    initials: 'AR',\n    src: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&facepad=2&w=80&h=80&q=80',\n  },\n]\n\nexport function SignIn6() {\n  return (\n    <Card className=\"grid w-full gap-0 p-0 md:grid-cols-2\">\n      <div className=\"from-primary to-primary/80 text-primary-foreground relative hidden flex-col justify-between overflow-hidden bg-gradient-to-b p-10 md:flex\">\n        <div className=\"bg-primary-foreground/10 pointer-events-none absolute -top-24 -right-24 size-64 rounded-full blur-3xl\" />\n\n        <div className=\"relative flex items-center gap-2.5\">\n          <div className=\"bg-primary-foreground/15 ring-primary-foreground/25 flex size-8 items-center justify-center rounded-lg ring-1\">\n            <div className=\"bg-primary-foreground size-3 rotate-45 rounded-[3px]\" />\n          </div>\n          <span className=\"text-sm font-semibold tracking-tight\">Acme</span>\n        </div>\n\n        <h2 className=\"relative mt-auto max-w-[15ch] text-[26px] leading-[1.15] font-semibold tracking-tight text-balance\">\n          Where teams ship together.\n        </h2>\n\n        <div className=\"relative mt-8 flex items-center gap-3\">\n          <div className=\"flex -space-x-2.5\">\n            {proof.map((p) => (\n              <Avatar\n                key={p.initials}\n                className=\"ring-primary/60 size-7 ring-2\"\n              >\n                <AvatarImage src={p.src} alt=\"\" className=\"object-cover\" />\n                <AvatarFallback className=\"bg-primary-foreground text-primary text-[10px] font-medium\">\n                  {p.initials}\n                </AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n          <span className=\"text-primary-foreground/85 text-xs\">\n            Join 40,000+ teams on Acme\n          </span>\n        </div>\n      </div>\n\n      <div className=\"flex flex-col justify-center gap-5 p-8\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"text-lg font-semibold\">Welcome back</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Sign in to your Acme workspace.\n          </span>\n        </div>\n\n        <Button variant=\"outline\" className=\"w-full justify-center gap-2\">\n          <GoogleIcon />\n          Continue with Google\n        </Button>\n\n        <div className=\"flex items-center gap-3\">\n          <span className=\"bg-border h-px flex-1\" />\n          <span className=\"text-muted-foreground text-[11px] uppercase\">\n            or\n          </span>\n          <span className=\"bg-border h-px flex-1\" />\n        </div>\n\n        <div className=\"flex flex-col gap-3\">\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor=\"ss-email\" className=\"text-xs\">\n              Email\n            </Label>\n            <Input\n              id=\"ss-email\"\n              type=\"email\"\n              placeholder=\"you@acme.com\"\n              autoComplete=\"email\"\n            />\n          </div>\n          <div className=\"flex flex-col gap-1.5\">\n            <div className=\"flex items-center justify-between\">\n              <Label htmlFor=\"ss-password\" className=\"text-xs\">\n                Password\n              </Label>\n              <a\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground text-[11px]\"\n              >\n                Forgot?\n              </a>\n            </div>\n            <Input\n              id=\"ss-password\"\n              type=\"password\"\n              placeholder=\"••••••••\"\n              autoComplete=\"current-password\"\n            />\n          </div>\n        </div>\n\n        <Button className=\"w-full\">Sign in</Button>\n\n        <p className=\"text-muted-foreground text-center text-xs\">\n          No account?{' '}\n          <a href=\"#\" className=\"text-foreground font-medium hover:underline\">\n            Start free trial\n          </a>\n        </p>\n      </div>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/intent/sign-in/sign-in-6.tsx"
    }
  ],
  "type": "registry:block"
}