{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth-07",
  "dependencies": [
    "framer-motion",
    "motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/auth-07.tsx",
      "content": "import { motion, type Variants } from \"motion/react\";\n\n// Simple Google SVG Icon\nconst GoogleIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg viewBox=\"0 0 24 24\" width=\"1em\" height=\"1em\" {...props}>\n    <path\n      d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\n      fill=\"#4285F4\"\n    />\n    <path\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.16v2.84C3.99 20.53 7.7 23 12 23z\"\n      fill=\"#34A853\"\n    />\n    <path\n      d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.16C1.43 8.55 1 10.22 1 12s.43 3.45 1.16 4.93l3.68-2.84z\"\n      fill=\"#FBBC05\"\n    />\n    <path\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.16 7.07l3.68 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n      fill=\"#EA4335\"\n    />\n  </svg>\n);\n\nexport default function Auth7() {\n  const containerVariants: Variants = {\n    hidden: { opacity: 0 },\n    visible: {\n      opacity: 1,\n      transition: {\n        staggerChildren: 0.1,\n        delayChildren: 0.2,\n      },\n    },\n  };\n\n  const itemVariants: Variants = {\n    hidden: { opacity: 0, y: 15 },\n    visible: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 300,\n        damping: 24,\n      },\n    },\n  };\n\n  return (\n    <div className=\"flex min-h-screen w-full bg-white font-sans text-neutral-950 antialiased selection:bg-neutral-900 selection:text-white relative\">\n      {/* Left Form Section */}\n      <div className=\"flex w-full flex-col lg:w-1/2\">\n        {/* Header Branding */}\n        <div className=\"p-6 md:p-10 absolute md:top-4 md:left-4 top-2 left-2\">\n          <span className=\"text-lg md:text-xl lg:text-2xl font-bold tracking-tight\">WATERMELON</span>\n        </div>\n\n        {/* Form Container */}\n        <div className=\"flex flex-1 items-center justify-center p-6 md:p-10 mt-4 md:mt-8\">\n          <motion.div\n            variants={containerVariants}\n            initial=\"hidden\"\n            animate=\"visible\"\n            className=\"w-full max-w-[420px]\"\n          >\n            {/* Titles */}\n            <motion.div variants={itemVariants} className=\"mb-6 text-center\">\n              <h1 className=\"mb-1 text-3xl font-semibold tracking-tight text-neutral-900 md:text-4xl\">\n                Create your Account\n              </h1>\n              <p className=\"text-sm text-neutral-500\">\n                Let&apos;s get started with your 30 days free trial\n              </p>\n            </motion.div>\n\n            {/* Google Login Button */}\n            <motion.div variants={itemVariants} className=\"mb-4\">\n              <button\n                type=\"button\"\n                className=\"flex w-full items-center justify-center gap-3 rounded-full border border-neutral-200 bg-white px-6 py-3 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 active:bg-neutral-100\"\n              >\n                <GoogleIcon className=\"text-lg\" />\n                Login with Google\n              </button>\n            </motion.div>\n\n            {/* Divider */}\n            <motion.div\n              variants={itemVariants}\n              className=\"relative mb-6 flex items-center\"\n            >\n              <div className=\"grow border-t border-neutral-200\"></div>\n              <span className=\"px-4 text-sm text-neutral-400\">or</span>\n              <div className=\"grow border-t border-neutral-200\"></div>\n            </motion.div>\n\n            {/* Form */}\n            <form className=\"flex flex-col gap-4\">\n              <motion.div\n                variants={itemVariants}\n                className=\"flex flex-col gap-2\"\n              >\n                <label\n                  htmlFor=\"name\"\n                  className=\"text-sm font-medium text-neutral-800\"\n                >\n                  Name\n                </label>\n                <input\n                  id=\"name\"\n                  type=\"text\"\n                  placeholder=\"Enter your name\"\n                  className=\"w-full rounded-full border border-neutral-200 bg-white px-5 py-3 text-sm text-neutral-900 placeholder:text-neutral-300 focus:border-neutral-900 focus:outline-none focus:ring-1 focus:ring-neutral-900\"\n                />\n              </motion.div>\n\n              <motion.div\n                variants={itemVariants}\n                className=\"flex flex-col gap-2\"\n              >\n                <label\n                  htmlFor=\"email\"\n                  className=\"text-sm font-medium text-neutral-800\"\n                >\n                  Email\n                </label>\n                <input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"Enter your email\"\n                  className=\"w-full rounded-full border border-neutral-200 bg-white px-5 py-3 text-sm text-neutral-900 placeholder:text-neutral-300 focus:border-neutral-900 focus:outline-none focus:ring-1 focus:ring-neutral-900\"\n                />\n              </motion.div>\n\n              <motion.div\n                variants={itemVariants}\n                className=\"flex flex-col gap-2\"\n              >\n                <label\n                  htmlFor=\"password\"\n                  className=\"text-sm font-medium text-neutral-800\"\n                >\n                  Password\n                </label>\n                <input\n                  id=\"password\"\n                  type=\"password\"\n                  placeholder=\"Enter your password\"\n                  className=\"w-full rounded-full border border-neutral-200 bg-white px-5 py-3 text-sm text-neutral-900 placeholder:text-neutral-300 focus:border-neutral-900 focus:outline-none focus:ring-1 focus:ring-neutral-900\"\n                />\n              </motion.div>\n\n              {/* Checkbox */}\n              <motion.div\n                variants={itemVariants}\n                className=\"flex items-start gap-3\"\n              >\n                <div className=\"flex h-5 items-center\">\n                  <input\n                    id=\"terms\"\n                    type=\"checkbox\"\n                    className=\"h-4 w-4 rounded border-neutral-300 text-neutral-900 focus:ring-neutral-900\"\n                  />\n                </div>\n                <label htmlFor=\"terms\" className=\"text-sm text-neutral-600\">\n                  I agree to all Terms, Privacy Policy and Fees\n                </label>\n              </motion.div>\n\n              {/* Sign Up Button */}\n              <motion.div variants={itemVariants} className=\"mt-1\">\n                <button\n                  type=\"submit\"\n                  className=\"w-full rounded-full bg-linear-to-b from-[#3a3a3a] to-[#121212] px-6 py-3.5 text-sm font-medium text-white shadow-sm transition-all hover:opacity-90 active:scale-[0.98]\"\n                >\n                  Sign Up\n                </button>\n              </motion.div>\n            </form>\n\n            {/* Footer */}\n            <motion.div\n              variants={itemVariants}\n              className=\"mt-5 text-sm text-neutral-500\"\n            >\n              Already have an account?{\" \"}\n              <a\n                href=\"#\"\n                className=\"font-semibold text-neutral-900 hover:underline\"\n              >\n                Log in\n              </a>\n            </motion.div>\n          </motion.div>\n        </div>\n      </div>\n\n      {/* Right Image Section */}\n      <div className=\"hidden lg:block lg:w-1/2 p-4\">\n        <div className=\"relative h-full w-full overflow-hidden rounded-[2rem]\">\n          <img\n            src=\"https://assets.watermelon.sh/auth-7.avif\"\n            alt=\"Cloudscape background\"\n            className=\"h-full w-full object-cover\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/auth-07.tsx"
    }
  ],
  "type": "registry:ui"
}