{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-phone",
  "title": "Floating Phone",
  "description": "A floating phone component",
  "files": [
    {
      "path": "registry/pioneerui/floating-phone.tsx",
      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { useState } from \"react\"\nimport { motion, useMotionValue, useTransform, useSpring } from \"framer-motion\"\nimport { FiBatteryCharging, FiWifi } from \"react-icons/fi\"\nimport Link from \"next/link\"\nimport { cn } from \"@/lib/utils\"\n\ninterface FloatingPhoneProps {\n  gradientStart?: string\n  gradientEnd?: string\n  textColor?: string\n  content?: React.ReactNode\n  actionText?: string\n  actionLink?: string\n  showStatusBar?: boolean\n  logo?: React.ReactNode\n  title?: string\n}\n\nexport type IconProps = React.SVGProps<SVGSVGElement>;\n\n\nconst DefaultLogo = ({ className, ...props }: IconProps) => (\n      <svg\n      width=\"256\"\n      height=\"256\"\n      viewBox=\"0 0 256 256\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={cn(\"h-6 w-6\",  className)}\n    >\n      {/* Background with purple and gold gradient */}\n      <rect width=\"256\" height=\"256\" rx=\"64\" fill=\"url(#purple-gold)\" />\n  \n      {/* Overlay texture */}\n      <rect width=\"256\" height=\"256\" rx=\"64\" fill=\"url(#texture)\" fillOpacity=\"0.1\" />\n  \n      {/* Main Logo Elements */}\n      <g filter=\"url(#glow)\">\n        {/* Compass Star */}\n        <path d=\"M128 48L144 80L176 96L144 112L128 144L112 112L80 96L112 80L128 48Z\" fill=\"white\" />\n  \n        {/* Direction Lines */}\n        <path d=\"M128 144L128 208M80 96L32 96M176 96L224 96\" stroke=\"white\" strokeWidth=\"8\" strokeLinecap=\"round\" />\n  \n        {/* Small Stars */}\n        <circle cx=\"32\" cy=\"96\" r=\"8\" fill=\"white\" />\n        <circle cx=\"224\" cy=\"96\" r=\"8\" fill=\"white\" />\n        <circle cx=\"128\" cy=\"208\" r=\"8\" fill=\"white\" />\n  \n        {/* Decorative Arc */}\n        <path\n          d=\"M48 160C48 160 88 192 128 192C168 192 208 160 208 160\"\n          stroke=\"white\"\n          strokeWidth=\"8\"\n          strokeLinecap=\"round\"\n          opacity=\"0.5\"\n        />\n      </g>\n  \n      {/* Gradients and Effects */}\n      <defs>\n        <linearGradient id=\"purple-gold\" x1=\"0\" y1=\"0\" x2=\"256\" y2=\"256\" gradientUnits=\"userSpaceOnUse\">\n          <stop offset=\"0%\" stopColor=\"#7C3AED\" /> {/* Deep Purple */}\n          <stop offset=\"50%\" stopColor=\"#9333EA\" /> {/* Rich Purple */}\n          <stop offset=\"100%\" stopColor=\"#F59E0B\" /> {/* Warm Gold */}\n        </linearGradient>\n  \n        <linearGradient id=\"texture\" x1=\"128\" y1=\"0\" x2=\"128\" y2=\"256\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"white\" stopOpacity=\"0.1\" />\n          <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n        </linearGradient>\n  \n        <filter\n          id=\"glow\"\n          x=\"-4\"\n          y=\"-4\"\n          width=\"264\"\n          height=\"264\"\n          filterUnits=\"userSpaceOnUse\"\n          colorInterpolationFilters=\"sRGB\"\n        >\n          <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n          <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"4\" />\n          <feComposite in2=\"SourceAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" />\n          <feColorMatrix values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0\" />\n          <feBlend in2=\"BackgroundImageFix\" result=\"effect\" />\n          <feBlend in=\"SourceGraphic\" in2=\"effect\" result=\"shape\" />\n        </filter>\n      </defs>\n    </svg>\n    \n)\n\nexport const FloatingPhone: React.FC<FloatingPhoneProps> = ({\n  gradientStart = \"#4F46E5\",\n  gradientEnd = \"#9333EA\",\n  textColor = \"#ffffff\",\n  content,\n  actionText = \"Explore Now\",\n  actionLink = \"#\",\n  showStatusBar = true,\n  logo,\n  title = \"PioneerUI\",\n}) => {\n  const [isHovered, setIsHovered] = useState(false)\n  const mouseX = useMotionValue(0)\n  const mouseY = useMotionValue(0)\n\n  const rotateX = useTransform(mouseY, [-300, 300], [15, -15])\n  const rotateY = useTransform(mouseX, [-300, 300], [-15, 15])\n\n  const springConfig = { damping: 20, stiffness: 300 }\n  const rotateXSpring = useSpring(rotateX, springConfig)\n  const rotateYSpring = useSpring(rotateY, springConfig)\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const rect = event.currentTarget.getBoundingClientRect()\n    mouseX.set(event.clientX - rect.left - rect.width / 2)\n    mouseY.set(event.clientY - rect.top - rect.height / 2)\n  }\n\n  return (\n    <div\n      className=\"relative perspective-1000 cursor-pointer\"\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => {\n        setIsHovered(false)\n        mouseX.set(0)\n        mouseY.set(0)\n      }}\n    >\n      <motion.div\n        style={{\n          rotateX: rotateXSpring,\n          rotateY: rotateYSpring,\n          transformStyle: \"preserve-3d\",\n        }}\n        animate={{\n          scale: isHovered ? 1.05 : 1,\n        }}\n        transition={{ duration: 0.3 }}\n      >\n        {/* Phone Body */}\n        <motion.div\n          className=\"relative h-[600px] w-[300px] rounded-[50px] p-1\"\n          style={{\n            background: `linear-gradient(145deg, ${gradientStart}, ${gradientEnd})`,\n            boxShadow: `0 0 30px rgba(0, 0, 0, 0.3), \n                      inset 0 0 20px rgba(255, 255, 255, 0.5)`,\n          }}\n          initial={{ y: 0 }}\n          animate={{\n            y: [0, -15, 0],\n          }}\n          transition={{\n            repeat: Number.POSITIVE_INFINITY,\n            duration: 3,\n            ease: \"easeInOut\",\n          }}\n        >\n          {/* Glass Effect */}\n          <div\n            className=\"absolute inset-0 rounded-[48px] overflow-hidden\"\n            style={{\n              background: `linear-gradient(145deg, ${gradientEnd}22, ${gradientStart}22)`,\n              backdropFilter: \"blur(10px)\",\n            }}\n          />\n\n          {/* Status Bar */}\n          {showStatusBar && (\n            <>\n              <div className=\"absolute left-[50%] top-4 z-10 h-2 w-20 -translate-x-[50%] rounded-full bg-black/20 backdrop-blur-md\" />\n              <div className=\"absolute right-8 top-4 z-10 flex gap-2\">\n                <FiWifi/>\n                <FiBatteryCharging  />\n              </div>\n            </>\n          )}\n\n          {/* Screen Content */}\n          <div className=\"relative z-0 h-[calc(100%-8px)] w-[calc(100%-8px)] overflow-hidden rounded-[44px] bg-black/90 m-1\">\n            {content ? (\n              <div className=\"h-full w-full\">{content}</div>\n            ) : (\n              <div className=\"flex h-full w-full flex-col items-center justify-center\">\n                {logo || <DefaultLogo color={textColor} />}\n                <div className=\"text-2xl font-bold\" style={{ color: textColor }}>\n                  {title}\n                </div>\n              </div>\n            )}\n\n            {/* Action Button */}\n            <Link href={actionLink} className=\"absolute bottom-12 left-8 right-8 block\">\n              <motion.div\n                className=\"rounded-2xl py-4 text-lg font-medium backdrop-blur-sm text-center\"\n                style={{\n                  background: `linear-gradient(135deg, ${gradientStart}66, ${gradientEnd}66)`,\n                  color: textColor,\n                }}\n                whileHover={{ scale: 1.05 }}\n                whileTap={{ scale: 0.95 }}\n              >\n                {actionText}\n              </motion.div>\n            </Link>\n\n            {/* Gradient Effects */}\n            <div\n              className=\"absolute -bottom-32 -left-32 h-64 w-64 rounded-full blur-3xl\"\n              style={{ background: `radial-gradient(circle, ${gradientStart}33, ${gradientEnd}00)` }}\n            />\n            <div\n              className=\"absolute -top-32 -right-32 h-64 w-64 rounded-full blur-3xl\"\n              style={{ background: `radial-gradient(circle, ${gradientEnd}33, ${gradientStart}00)` }}\n            />\n          </div>\n\n          {/* Bottom Line */}\n          <div className=\"absolute bottom-2 left-1/2 h-1 w-32 -translate-x-1/2 rounded-full bg-white/20\" />\n        </motion.div>\n      </motion.div>\n    </div>\n  )\n}\n\n",
      "type": "registry:ui",
      "target": "components/pioneerui/floating-phone.tsx"
    }
  ],
  "type": "registry:ui"
}