{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-phone-demo-2",
  "title": "Floating Phone Demo 2",
  "description": "Second example showing a floating phone mockup.",
  "registryDependencies": [
    "https://pioneerui.com/r/floating-phone"
  ],
  "files": [
    {
      "path": "registry/example/floating-phone-demo-2.tsx",
      "content": "\"use client\"\n\nimport { FloatingPhone } from \"@/registry/pioneerui/floating-phone\"\nimport { motion } from \"framer-motion\"\nimport { Cloud, Sun, Droplets, Wind } from 'lucide-react'\n\nconst WeatherContent = () => {\n  return (\n    <div className=\"flex flex-col h-full w-full p-6 text-white bg-gradient-to-br from-sky-400 to-blue-600\">\n      {/* Current Weather */}\n      <motion.div\n        initial={{ y: -20, opacity: 0 }}\n        animate={{ y: 0, opacity: 1 }}\n        className=\"text-center mb-8\"\n      >\n        <div className=\"flex justify-center mb-4\">\n          <motion.div\n            animate={{\n              y: [0, -10, 0],\n            }}\n            transition={{\n              duration: 4,\n              repeat: Infinity,\n              ease: \"easeInOut\",\n            }}\n          >\n            <Sun className=\"w-20 h-20 text-yellow-300\" />\n          </motion.div>\n        </div>\n        <h1 className=\"text-5xl font-bold mb-2\">24°</h1>\n        <p className=\"text-xl\">Partly Cloudy</p>\n      </motion.div>\n\n      {/* Weather Details */}\n      <motion.div\n        initial={{ y: 20, opacity: 0 }}\n        animate={{ y: 0, opacity: 1 }}\n        transition={{ delay: 0.2 }}\n        className=\"grid grid-cols-2 gap-4 mb-8\"\n      >\n        <WeatherDetail icon={Wind} label=\"Wind\" value=\"12 km/h\" />\n        <WeatherDetail icon={Droplets} label=\"Humidity\" value=\"64%\" />\n        <WeatherDetail icon={Sun} label=\"UV Index\" value=\"6/10\" />\n        <WeatherDetail icon={Cloud} label=\"Cloud Cover\" value=\"25%\" />\n      </motion.div>\n\n      {/* Hourly Forecast */}\n      <motion.div\n        initial={{ y: 20, opacity: 0 }}\n        animate={{ y: 0, opacity: 1 }}\n        transition={{ delay: 0.4 }}\n        className=\"bg-white/10 rounded-xl p-4\"\n      >\n        <h3 className=\"text-lg font-semibold mb-4\">Hourly Forecast</h3>\n        <div className=\"flex justify-between\">\n          {[\n            { time: \"Now\", temp: \"24°\", icon: Sun },\n            { time: \"2PM\", temp: \"26°\", icon: Sun },\n            { time: \"3PM\", temp: \"25°\", icon: Cloud },\n            { time: \"4PM\", temp: \"23°\", icon: Cloud },\n          ].map((item, index) => (\n            <div key={index} className=\"text-center\">\n              <p className=\"text-sm mb-2\">{item.time}</p>\n              <item.icon className=\"w-6 h-6 mx-auto mb-2\" />\n              <p className=\"font-semibold\">{item.temp}</p>\n            </div>\n          ))}\n        </div>\n      </motion.div>\n    </div>\n  )\n}\n\nconst WeatherDetail = ({ icon: Icon, label, value }: { icon: any; label: string; value: string }) => (\n  <div className=\"bg-white/10 rounded-xl p-4 flex items-center gap-3\">\n    <Icon className=\"w-6 h-6\" />\n    <div>\n      <p className=\"text-sm text-white/80\">{label}</p>\n      <p className=\"font-semibold\">{value}</p>\n    </div>\n  </div>\n)\n\nexport default function WeatherDemo() {\n  return (\n    <FloatingPhone\n      gradientStart=\"#0EA5E9\"\n      gradientEnd=\"#2563EB\"\n      textColor=\"#ffffff\"\n      content={<WeatherContent />}\n      actionText=\"Open Weather\"\n      actionLink=\"/weather\"\n      showStatusBar={true}\n    />\n  )\n}",
      "type": "registry:example",
      "target": "components/floating-phone-demo-2.tsx"
    }
  ],
  "type": "registry:example"
}