{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-phone-demo",
  "title": "Floating Phone Demo",
  "description": "Example showing a floating phone mockup.",
  "registryDependencies": [
    "https://pioneerui.com/r/floating-phone"
  ],
  "files": [
    {
      "path": "registry/example/floating-phone-demo.tsx",
      "content": "\"use client\"\n\nimport { FloatingPhone } from \"@/registry/pioneerui/floating-phone\"\nimport { motion } from \"framer-motion\"\nimport { FiTwitter, FiInstagram, FiLinkedin, FiGithub } from \"react-icons/fi\"\nimport Link from \"next/link\"\n\nconst socialLinks = [\n    {\n      icon: FiTwitter,\n      href: \"https://twitter.com/antonio_kodheli\",\n      label: \"Twitter\",\n      color: \"hover:bg-blue-500\",\n    },\n    {\n      icon: FiInstagram,\n      href: \"https://instagram.com/codewithtoni_\",\n      label: \"Instagram\",\n      color: \"hover:bg-pink-600\",\n    },\n    {\n      icon: FiLinkedin,\n      href: \"https://linkedin.com/in/antonio-kodheli-1430aa290/\",\n      label: \"LinkedIn\",\n      color: \"hover:bg-blue-700\",\n    },\n    {\n      icon: FiGithub,\n      href: \"https://github.com/AntonioKOD\",\n      label: \"GitHub\",\n      color: \"hover:bg-gray-800\",\n    },\n  ]\n  \n  const ProfileContent = () => (\n    <div className=\"flex flex-col h-full w-full items-center justify-center p-6 text-white\">\n      <motion.div\n        initial={{ scale: 0.5, opacity: 0 }}\n        animate={{ scale: 1, opacity: 1 }}\n        transition={{ duration: 0.5 }}\n        className=\"mb-6\"\n      >\n        <div className=\"w-24 h-24 rounded-full bg-gradient-to-br from-purple-500 to-black-500 flex items-center justify-center\">\n          <span className=\"text-4xl font-bold\">AK</span>\n        </div>\n      </motion.div>\n  \n      <motion.div\n        initial={{ y: 20, opacity: 0 }}\n        animate={{ y: 0, opacity: 1 }}\n        transition={{ delay: 0.2 }}\n        className=\"text-center mb-8\"\n      >\n        <h2 className=\"text-2xl font-bold mb-2\">codeWithToni</h2>\n        <p className=\"text-white/80\">Full Stack Developer</p>\n      </motion.div>\n  \n      <motion.div\n        initial={{ y: 20, opacity: 0 }}\n        animate={{ y: 0, opacity: 1 }}\n        transition={{ delay: 0.4 }}\n        className=\"flex space-x-4\"\n      >\n        {socialLinks.map(({ icon: Icon, href, label, color }, index) => (\n          <motion.div key={index} whileHover={{ scale: 1.2 }} whileTap={{ scale: 0.9 }}>\n            <Link\n              href={href}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className={`block p-2 bg-white/10 rounded-full cursor-pointer transition-colors duration-200 ${color}`}\n              aria-label={label}\n            >\n              <Icon/>\n            </Link>\n          </motion.div>\n        ))}\n      </motion.div>\n    </div>\n  )\n\nexport default function SocialProfileDemo() {\n  return (\n    <div className=\"min-h-scree flex items-center justify-center p-8\">\n      <div className=\"text-center\">\n        <FloatingPhone\n          gradientStart=\"#7C3AED\"\n          gradientEnd=\"#0F0F0F\"\n          textColor=\"#ffffff\"\n          content={<ProfileContent />}\n          actionText=\"Connect with Toni\"\n          actionLink=\"https://codewithtoni.com\"\n          showStatusBar={true}\n          title=\"@codewithtoni\"\n        />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:example",
      "target": "components/floating-phone-demo.tsx"
    }
  ],
  "type": "registry:example"
}