{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "login-minimal",
  "type": "registry:block",
  "title": "Login Minimal",
  "description": "A clean, animated login form with Google OAuth and email/password fields.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [
    "@scrollxui/button",
    "@scrollxui/label",
    "@scrollxui/motion-grid"
  ],
  "dependencies": [],
  "files": [
    {
      "type": "registry:component",
      "path": "registry/blocks/login-sections/login-minimal/components/login-form.tsx",
      "content": "'use client';\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport { Button } from '@/components/ui/button';\nimport { Label } from '@/components/ui/label';\nimport { motion } from 'motion/react';\n\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\nInput.displayName = 'Input';\n\nexport { Input };\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<'form'>) {\n  return (\n    <form className={cn('flex flex-col gap-6', className)} {...props}>\n      <motion.div\n        initial={{ opacity: 0, y: 24 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.5, ease: 'easeOut' }}\n        className='flex flex-col gap-5'\n      >\n        <div className='flex flex-col gap-1'>\n          <h1 className='text-3xl font-bold tracking-tight text-foreground'>\n            Welcome back\n          </h1>\n          <p className='text-sm text-muted-foreground'>\n            Log in to your account to continue\n          </p>\n        </div>\n\n        <Button\n          variant='outline'\n          type='button'\n          className='w-full h-11 font-medium'\n        >\n          <svg\n            xmlns='http://www.w3.org/2000/svg'\n            viewBox='0 0 24 24'\n            className='w-4 h-4 mr-2'\n          >\n            <path\n              d='M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z'\n              fill='currentColor'\n            />\n          </svg>\n          Continue with Google\n        </Button>\n\n        <div className='relative'>\n          <div className='absolute inset-0 flex items-center'>\n            <span className='w-full border-t' />\n          </div>\n          <div className='relative flex justify-center text-xs uppercase'>\n            <span className='bg-background px-2 text-muted-foreground'>or</span>\n          </div>\n        </div>\n\n        <div className='grid gap-3'>\n          <div className='space-y-1.5'>\n            <Label htmlFor='email'>Email</Label>\n            <Input\n              id='email'\n              type='email'\n              placeholder='m@example.com'\n              required\n            />\n          </div>\n          <div className='space-y-1.5'>\n            <div className='flex items-center justify-between'>\n              <Label htmlFor='password'>Password</Label>\n              <a\n                href='#'\n                className='text-xs text-muted-foreground underline-offset-4 hover:underline'\n              >\n                Forgot password?\n              </a>\n            </div>\n            <Input\n              id='password'\n              type='password'\n              placeholder='Enter your password'\n              required\n            />\n          </div>\n        </div>\n\n        <Button type='submit' className='w-full h-11 font-semibold'>\n          Log In\n        </Button>\n\n        <p className='text-sm text-muted-foreground text-center'>\n          Don't have an account?{' '}\n          <a\n            href='#'\n            className='font-semibold text-foreground underline underline-offset-4'\n          >\n            Sign up\n          </a>\n        </p>\n      </motion.div>\n    </form>\n  );\n}"
    },
    {
      "type": "registry:page",
      "path": "registry/blocks/login-sections/login-minimal/page.tsx",
      "target": "app/login/page.tsx",
      "content": "import { LoginForm } from \"@/components/login-form\";\nimport { MotionGrid } from '@/components/ui/motion-grid';\n\nexport default function LoginPage() {\n  return (\n    <div className='grid min-h-svh lg:grid-cols-2'>\n      <div className='flex flex-col gap-4 p-6 md:p-10'>\n        <div className='flex justify-center gap-2 md:justify-start'>\n          <a href='#' className='flex items-center gap-2 font-medium'>\n            <div className='flex size-4 items-center justify-center rounded-md'>\n              <svg\n                xmlns='http://www.w3.org/2000/svg'\n                className='shrink-0 w-6 h-6 sm:w-6 sm:h-6 md:w-7 md:h-7 text-black dark:text-white'\n                viewBox='0 0 24 24'\n              >\n                <path\n                  fill='currentColor'\n                  d='M5.999 17a3 3 0 0 1-1.873-.658a2.98 2.98 0 0 1-1.107-2.011a2.98 2.98 0 0 1 .639-2.206l4-5c.978-1.225 2.883-1.471 4.143-.523l1.674 1.254l2.184-2.729a3 3 0 1 1 4.682 3.747l-4 5c-.977 1.226-2.882 1.471-4.143.526l-1.674-1.256l-2.184 2.729A2.98 2.98 0 0 1 5.999 17M10 8a1 1 0 0 0-.781.374l-4 5.001a1 1 0 0 0-.213.734c.03.266.161.504.369.67a.996.996 0 0 0 1.406-.155l3.395-4.244L13.4 12.8c.42.316 1.056.231 1.381-.176l4-5.001a1 1 0 0 0 .213-.734a1 1 0 0 0-.369-.67a.996.996 0 0 0-1.406.156l-3.395 4.242L10.6 8.2A1 1 0 0 0 10 8m9 13H5a1 1 0 1 1 0-2h14a1 1 0 1 1 0 2'\n                />\n              </svg>\n            </div>\n            ScrollX Inc.\n          </a>\n        </div>\n        <div className='flex flex-1 items-center justify-center'>\n          <div className='w-full max-w-xs'>\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className='relative hidden bg-muted lg:block'>\n        <MotionGrid\n          speed='3s'\n          opacity={0.15}\n          enableGlow={true}\n          lineColor='20, 184, 166'\n          className='relative h-full w-full flex flex-col items-center justify-center'\n        >\n          <div className='relative flex min-h-80 flex-col items-start justify-end overflow-hidden rounded-2xl bg-white p-4 md:p-8 dark:bg-black'>\n            <div className='relative z-40 mb-2 flex items-center gap-2'>\n              <p className='rounded-md bg-black/10 px-2 py-1 text-xs text-black dark:bg-black/50 dark:text-white'>\n                Product Company\n              </p>\n              <p className='rounded-md bg-black/10 px-2 py-1 text-xs text-black dark:bg-black/50 dark:text-white'>\n                Cloud Management\n              </p>\n            </div>\n\n            <div className='relative z-40 max-w-sm rounded-xl bg-black/5 p-4 backdrop-blur-sm dark:bg-black/50'>\n              <h2 className='text-black dark:text-white'>\n                ScrollX UI has completely changed how we work. What used to take\n                hours every week is now fully automated.\n              </h2>\n\n              <p className='mt-4 text-sm text-black/60 dark:text-white/50'>\n                Ahdeetai small\n              </p>\n\n              <p className='mt-1 text-sm text-black/60 dark:text-white/50'>\n                Head of Product,\n                <span className='font-bold text-black dark:text-white'>\n                  {' '}\n                  ScrollX UI\n                </span>\n              </p>\n            </div>\n\n            <div className='mask-r-from-50% absolute -top-48 -right-40 z-20 grid rotate-45 transform grid-cols-4 gap-32'>\n              <div className='size-40 shrink-0 rounded-3xl bg-neutral-200 dark:bg-neutral-900 shadow-[0px_2px_0px_0px_var(--color-neutral-300)_inset] dark:shadow-[0px_2px_0px_0px_var(--color-neutral-600)_inset]' />\n              <div className='size-40 shrink-0 rounded-3xl bg-neutral-200 dark:bg-neutral-900 shadow-[0px_2px_0px_0px_var(--color-neutral-300)_inset] dark:shadow-[0px_2px_0px_0px_var(--color-neutral-600)_inset]' />\n              <div className='size-40 shrink-0 rounded-3xl bg-neutral-200 dark:bg-neutral-900 shadow-[0px_2px_0px_0px_var(--color-neutral-300)_inset] dark:shadow-[0px_2px_0px_0px_var(--color-neutral-600)_inset]' />\n              <div className='size-40 shrink-0 rounded-3xl bg-neutral-200 dark:bg-neutral-900 shadow-[0px_2px_0px_0px_var(--color-neutral-300)_inset] dark:shadow-[0px_2px_0px_0px_var(--color-neutral-600)_inset]' />\n            </div>\n\n            <div className='mask-r-from-50% absolute top-0 -right-10 z-20 grid rotate-45 transform grid-cols-4 gap-32 opacity-50'>\n              <div className='size-40 shrink-0 rounded-3xl bg-neutral-200 dark:bg-neutral-900 shadow-[0px_2px_0px_0px_var(--color-neutral-300)_inset] dark:shadow-[0px_2px_0px_0px_var(--color-neutral-600)_inset]' />\n              <div className='size-40 shrink-0 rounded-3xl bg-neutral-200 dark:bg-neutral-900 shadow-[0px_2px_0px_0px_var(--color-neutral-300)_inset] dark:shadow-[0px_2px_0px_0px_var(--color-neutral-600)_inset]' />\n              <div className='size-40 shrink-0 rounded-3xl bg-neutral-200 dark:bg-neutral-900 shadow-[0px_2px_0px_0px_var(--color-neutral-300)_inset] dark:shadow-[0px_2px_0px_0px_var(--color-neutral-600)_inset]' />\n              <div className='size-40 shrink-0 rounded-3xl bg-neutral-200 dark:bg-neutral-900 shadow-[0px_2px_0px_0px_var(--color-neutral-300)_inset] dark:shadow-[0px_2px_0px_0px_var(--color-neutral-600)_inset]' />\n            </div>\n\n            <canvas\n              className='mask-t-from-50% absolute inset-0 z-30 h-full w-200 blur-3xl'\n              width='1000'\n              height='956'\n            />\n          </div>\n        </MotionGrid>\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}