{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth-10",
  "dependencies": [
    "framer-motion",
    "motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/auth-10.tsx",
      "content": "\"use client\";\n\nimport { motion, type Variants } from \"motion/react\";\n\n// Custom 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\n// Custom Apple SVG Icon\nconst AppleIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    width=\"1em\"\n    height=\"1em\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.56-1.702z\" />\n  </svg>\n);\n\nexport default function Auth10() {\n  const containerVariants: Variants = {\n    hidden: { opacity: 0 },\n    visible: {\n      opacity: 1,\n      transition: {\n        staggerChildren: 0.1,\n        delayChildren: 0.1,\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 flex-col bg-[#050505] font-sans text-neutral-200 antialiased selection:bg-blue-500/30 selection:text-white lg:flex-row\">\n      {/* Left Image Panel */}\n      <div className=\"relative flex w-full flex-col justify-between overflow-hidden p-8 md:p-12 lg:w-1/2 min-h-[50vh] lg:min-h-screen\">\n        {/* Background Image */}\n        <img\n          src=\"https://assets.watermelon.sh/auth-10.avif\"\n          alt=\"Abstract gradient background\"\n          className=\"absolute inset-0 h-full w-full object-cover\"\n        />\n\n        {/* Top Header */}\n        <div className=\"relative z-10 flex w-full items-center justify-center pt-4\">\n          <span className=\"text-2xl md:text-3xl lg:text-4xl font-serif tracking-tight text-black\">Watermelon</span>\n        </div>\n\n        {/* Bottom Content */}\n        <div className=\"relative z-10 mb-8 flex w-full flex-col items-center justify-center text-center\">\n          <p className=\"mb-4 text-base md:text-lg lg:text-xl font-medium text-white/90\">\n            You can easily\n          </p>\n          <h1 className=\"text-2xl font-medium leading-[1.2] tracking-tight text-white md:text-4xl lg:text-5xl\">\n            Get access your personal\n            <br />\n            hub for clarity and\n            <br />\n            productivity\n          </h1>\n        </div>\n      </div>\n\n      {/* Right Form Panel */}\n      <div className=\"flex w-full flex-col items-center justify-center p-6 sm:p-12 lg:w-1/2\">\n        <motion.div\n          variants={containerVariants}\n          initial=\"hidden\"\n          animate=\"visible\"\n          className=\"w-full max-w-md md:max-w-lg xl:max-w-xl\"\n        >\n          {/* Titles */}\n          <motion.div variants={itemVariants} className=\"mb-10\">\n            <h2 className=\"text-3xl font-medium tracking-tight text-white\">\n              Get Started Now\n            </h2>\n          </motion.div>\n\n          {/* Form */}\n          <form className=\"flex flex-col gap-5\">\n            {/* Name */}\n            <motion.div variants={itemVariants} className=\"flex flex-col gap-2\">\n              <label\n                htmlFor=\"name\"\n                className=\"text-sm font-medium text-neutral-200\"\n              >\n                Name\n              </label>\n              <input\n                id=\"name\"\n                type=\"text\"\n                placeholder=\"Enter your name\"\n                className=\"w-full rounded-xl border border-neutral-800 bg-transparent px-4 py-3.5 text-sm text-white placeholder:text-neutral-500 focus:border-neutral-600 focus:bg-[#111] focus:outline-none focus:ring-1 focus:ring-neutral-600\"\n              />\n            </motion.div>\n\n            {/* Email */}\n            <motion.div variants={itemVariants} className=\"flex flex-col gap-2\">\n              <label\n                htmlFor=\"email\"\n                className=\"text-sm font-medium text-neutral-200\"\n              >\n                Email address\n              </label>\n              <input\n                id=\"email\"\n                type=\"email\"\n                placeholder=\"Enter your email\"\n                className=\"w-full rounded-xl border border-neutral-800 bg-transparent px-4 py-3.5 text-sm text-white placeholder:text-neutral-500 focus:border-neutral-600 focus:bg-[#111] focus:outline-none focus:ring-1 focus:ring-neutral-600\"\n              />\n            </motion.div>\n\n            {/* Password */}\n            <motion.div variants={itemVariants} className=\"flex flex-col gap-2\">\n              <label\n                htmlFor=\"password\"\n                className=\"text-sm font-medium text-neutral-200\"\n              >\n                Password\n              </label>\n              <input\n                id=\"password\"\n                type=\"password\"\n                placeholder=\"***********\"\n                className=\"w-full rounded-xl border border-neutral-800 bg-transparent px-4 py-3.5 text-sm text-white placeholder:text-neutral-500 focus:border-neutral-600 focus:bg-[#111] focus:outline-none focus:ring-1 focus:ring-neutral-600\"\n              />\n            </motion.div>\n\n            {/* Checkbox */}\n            <motion.div\n              variants={itemVariants}\n              className=\"mt-2 flex items-center gap-3\"\n            >\n              <input\n                id=\"terms\"\n                type=\"checkbox\"\n                className=\"h-4 w-4 rounded border-neutral-700 bg-transparent text-[#0275d8] focus:ring-[#0275d8] focus:ring-offset-0\"\n              />\n              <label htmlFor=\"terms\" className=\"text-[13px] text-neutral-300\">\n                I agree to the{\" \"}\n                <a href=\"#\" className=\"underline hover:text-white\">\n                  terms & policy\n                </a>\n              </label>\n            </motion.div>\n\n            {/* Sign Up Button */}\n            <motion.div variants={itemVariants} className=\"mt-4\">\n              <button\n                type=\"submit\"\n                className=\"w-full rounded-[14px] bg-[#0c74b4] py-3.5 text-sm font-medium text-white transition-all hover:bg-[#0a6299] active:scale-[0.98]\"\n              >\n                Signup\n              </button>\n            </motion.div>\n          </form>\n\n          {/* Divider */}\n          <motion.div\n            variants={itemVariants}\n            className=\"relative my-8 flex items-center\"\n          >\n            <div className=\"grow border-t border-neutral-800\"></div>\n            <span className=\"px-4 text-[13px] text-neutral-500\">Or</span>\n            <div className=\"grow border-t border-neutral-800\"></div>\n          </motion.div>\n\n          {/* Social Buttons */}\n          <motion.div\n            variants={itemVariants}\n            className=\"grid grid-cols-2 gap-4\"\n          >\n            <button\n              type=\"button\"\n              className=\"flex items-center justify-center gap-3 rounded-xl border border-neutral-700 bg-transparent py-3 text-[13px] font-medium text-white transition-colors hover:bg-neutral-900\"\n            >\n              <GoogleIcon className=\"text-lg\" />\n              Sign in with Google\n            </button>\n            <button\n              type=\"button\"\n              className=\"flex items-center justify-center gap-3 rounded-xl border border-neutral-700 bg-transparent py-3 text-[13px] font-medium text-white transition-colors hover:bg-neutral-900\"\n            >\n              <AppleIcon className=\"text-lg\" />\n              Sign in with Apple\n            </button>\n          </motion.div>\n\n          {/* Footer */}\n          <motion.div\n            variants={itemVariants}\n            className=\"mt-12 text-center text-[13px] text-neutral-400\"\n          >\n            Have an account?{\" \"}\n            <a\n              href=\"#\"\n              className=\"font-semibold text-[#0c74b4] hover:underline\"\n            >\n              Sign In\n            </a>\n          </motion.div>\n        </motion.div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/auth-10.tsx"
    }
  ],
  "type": "registry:ui"
}