{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "expandable-profile-card",
  "type": "registry:component",
  "title": "Expandable Profile Card",
  "description": "An elegant animated card that expands to a detailed side-by-side view, perfect for profile cards.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/expandable-profile-card.tsx",
      "type": "registry:component",
      "content": "import { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\n\ninterface ExpandableCardProps {\n  imageSrc?: string;\n  title?: string;\n  subtitle?: string;\n  content?: React.ReactNode;\n}\n\nexport default function ExpandableProfileCard({\n  imageSrc = \"https://images.unsplash.com/photo-1558655146-d09347e92766?auto=format&fit=crop&q=80&w=1000\",\n  title = \"Jane Doe\",\n  subtitle = \"Senior UX Designer\",\n  content\n}: ExpandableCardProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const layoutId = `expandable-profile-card-${title}`;\n\n  return (\n    <>\n      <motion.div\n        layoutId={layoutId}\n        onClick={() => setIsOpen(true)}\n        className=\"cursor-pointer relative h-64 w-100 overflow-hidden rounded-xl border border-border group shadow-sm\"\n        whileHover=\"hover\"\n      >\n        <motion.img \n          layoutId={`image-${layoutId}`} \n          src={imageSrc} \n          className=\"absolute inset-0 h-full w-full object-cover\" \n          variants={{\n            hover: { scale: 1.05 }\n          }}\n        />\n        <div className=\"absolute inset-0 bg-linear-to-t from-black/80 via-black/20 to-transparent opacity-80 group-hover:opacity-100 transition-opacity\" />\n        \n        <div className=\"absolute bottom-0 left-0 p-5 sm:p-6 w-full translate-y-4 group-hover:translate-y-0 transition-transform duration-300\">\n          <motion.p layoutId={`subtitle-${layoutId}`} className=\"text-primary text-xs font-medium tracking-wide uppercase mb-1.5\">{subtitle}</motion.p>\n          <motion.h3 layoutId={`title-${layoutId}`} className=\"text-lg sm:text-xl font-semibold tracking-tight text-foreground\">{title}</motion.h3>\n        </div>\n      </motion.div>\n\n      <AnimatePresence>\n        {isOpen && (\n          <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              onClick={() => setIsOpen(false)}\n              className=\"absolute inset-0 bg-background/80 backdrop-blur-md\"\n            />\n            <motion.div\n              layoutId={layoutId}\n              className=\"relative w-full max-w-4xl h-[80vh] bg-card rounded-2xl overflow-hidden border border-border z-10 flex flex-col md:flex-row shadow-xl\"\n            >\n              <button \n                onClick={() => setIsOpen(false)} \n                className=\"absolute top-4 right-4 z-20 flex h-8 w-8 items-center justify-center bg-background/50 hover:bg-accent rounded-full border border-border text-foreground transition-colors backdrop-blur-sm\"\n              >\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg>\n              </button>\n              \n              <div className=\"relative h-64 w-full shrink-0 overflow-hidden md:h-full md:w-1/2\">\n                <motion.img \n                  layoutId={`image-${layoutId}`} \n                  src={imageSrc} \n                  className=\"h-full w-full object-cover\" \n                />\n                <div className=\"absolute inset-0 bg-linear-to-t from-black/60 to-transparent md:hidden\" />\n              </div>\n              \n              <div className=\"p-6 sm:p-8 w-full md:w-1/2 flex flex-col h-full overflow-y-auto custom-scrollbar\">\n                <motion.p layoutId={`subtitle-${layoutId}`} className=\"text-primary text-xs font-medium tracking-wide uppercase mb-3\">{subtitle}</motion.p>\n                <motion.h3 layoutId={`title-${layoutId}`} className=\"text-2xl sm:text-3xl font-semibold tracking-tight text-foreground mb-6 pb-4 border-b border-border\">{title}</motion.h3>\n                \n                <motion.div \n                  initial={{ opacity: 0, x: 20 }}\n                  animate={{ opacity: 1, x: 0 }}\n                  exit={{ opacity: 0, x: 10 }}\n                  transition={{ delay: 0.2 }}\n                  className=\"text-foreground/80 text-sm leading-relaxed grow\"\n                >\n                  {content || (\n                    <div className=\"flex flex-col gap-6\">\n                      <p>A passionate UX/UI designer with over 8 years of experience creating intuitive digital products. I specialize in bridging the gap between complex systems and user-friendly interfaces.</p>\n                      \n                      <div>\n                        <h4 className=\"text-foreground font-semibold tracking-tight mb-2\">Background</h4>\n                        <p className=\"text-muted-foreground\">Previously led design teams at top fintech startups, focusing on accessibility, seamless transactions, and inclusive design.</p>\n                      </div>\n\n                      <div>\n                        <h4 className=\"text-foreground font-semibold tracking-tight mb-2\">Current Focus</h4>\n                        <p className=\"text-muted-foreground\">Currently exploring the intersection of AI and user experience, building tools that empower creators and simplify daily workflows.</p>\n                      </div>\n                      \n                      <button className=\"mt-4 px-5 py-2.5 bg-primary text-primary-foreground font-medium rounded-lg hover:opacity-90 transition-opacity self-start shadow-sm\">\n                        Connect with Jane\n                      </button>\n                    </div>\n                  )}\n                </motion.div>\n              </div>\n            </motion.div>\n          </div>\n        )}\n      </AnimatePresence>\n    </>\n  );\n}\n"
    }
  ]
}