{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comingsoon4",
  "title": "Animated Icons Preview",
  "description": "Coming soon section with floating animated icons and a pulsing status indicator using Framer Motion animations. Perfect for creating visual excitement and a dynamic atmosphere before a product launch.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/comingsoon4/comingsoon4.tsx",
      "content": "\"use client\";\n\nimport { Code, Heart, Rocket, Sparkles, Star, Zap } from \"lucide-react\";\nimport { motion } from \"framer-motion\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\n\ninterface FloatingElement {\n  icon: React.ReactNode;\n  size?: \"sm\" | \"md\" | \"lg\";\n  position?: {\n    x: number;\n    y: number;\n  };\n}\n\ninterface ComingSoon4Props {\n  badge?: {\n    label: string;\n    variant?: \"default\" | \"secondary\" | \"outline\";\n  };\n  heading?: string;\n  description?: string;\n  showFloatingElements?: boolean;\n  floatingElements?: FloatingElement[];\n  notifyText?: string;\n  className?: string;\n}\n\nexport const comingsoon4Demo: ComingSoon4Props = {\n  badge: { label: \"Preview\", variant: \"secondary\" },\n  heading: \"The future is almost here\",\n  description:\n    \"We're putting the finishing touches on something extraordinary. Get ready for a new experience.\",\n  showFloatingElements: true,\n  floatingElements: [\n    {\n      icon: <Rocket className=\"w-full h-full\" />,\n      size: \"lg\",\n      position: { x: 10, y: 20 },\n    },\n    {\n      icon: <Star className=\"w-full h-full\" />,\n      size: \"md\",\n      position: { x: 85, y: 15 },\n    },\n    {\n      icon: <Sparkles className=\"w-full h-full\" />,\n      size: \"sm\",\n      position: { x: 15, y: 70 },\n    },\n    {\n      icon: <Zap className=\"w-full h-full\" />,\n      size: \"md\",\n      position: { x: 90, y: 65 },\n    },\n    {\n      icon: <Heart className=\"w-full h-full\" />,\n      size: \"sm\",\n      position: { x: 5, y: 45 },\n    },\n    {\n      icon: <Code className=\"w-full h-full\" />,\n      size: \"lg\",\n      position: { x: 92, y: 40 },\n    },\n  ],\n  notifyText: \"Big things are coming\",\n};\n\nfunction FloatingIcon({\n  element,\n  index,\n}: {\n  element: FloatingElement;\n  index: number;\n}) {\n  const sizeClasses = {\n    sm: \"w-6 h-6\",\n    md: \"w-10 h-10\",\n    lg: \"w-14 h-14\",\n  };\n\n  // CSS animation with different delays\n  const animationStyle = {\n    animation: `float ${3 + (index % 3)}s ease-in-out infinite`,\n    animationDelay: `${index * 0.5}s`,\n  };\n\n  return (\n    <div\n      className={cn(\n        \"absolute text-muted-foreground/20\",\n        sizeClasses[element.size || \"md\"]\n      )}\n      style={{\n        left: `${element.position?.x || 50}%`,\n        top: `${element.position?.y || 50}%`,\n        ...animationStyle,\n      }}\n    >\n      {element.icon}\n    </div>\n  );\n}\n\nexport function ComingSoon4({\n  badge,\n  heading,\n  description,\n  showFloatingElements = true,\n  floatingElements = [],\n  notifyText,\n  className,\n}: ComingSoon4Props) {\n  return (\n    <section className={cn(\"py-16 md:py-24 relative overflow-hidden w-full\", className)}>\n      {/* CSS for floating animation */}\n      <style jsx>{`\n        @keyframes float {\n          0%,\n          100% {\n            opacity: 0.3;\n            transform: translateY(0) scale(1) rotate(0deg);\n          }\n          50% {\n            opacity: 0.6;\n            transform: translateY(-20px) scale(1.2) rotate(10deg);\n          }\n        }\n      `}</style>\n\n      {showFloatingElements && floatingElements.length > 0 && (\n        <div className=\"absolute inset-0 pointer-events-none\">\n          {floatingElements.map((element, index) => (\n            <FloatingIcon key={index} element={element} index={index} />\n          ))}\n        </div>\n      )}\n\n      <div className=\"mx-auto max-w-4xl px-4 md:px-6 relative z-10\">\n        <div className=\"flex flex-col items-center text-center gap-6 md:gap-8\">\n          {badge && (\n            <div>\n              <Badge variant={badge.variant ?? \"default\"}>{badge.label}</Badge>\n            </div>\n          )}\n\n          {heading && (\n            <h2 className=\"text-4xl md:text-5xl lg:text-6xl font-bold text-balance max-w-4xl\">\n              {heading}\n            </h2>\n          )}\n\n          {description && (\n            <p className=\"text-lg md:text-xl text-balance max-w-2xl text-muted-foreground\">\n              {description}\n            </p>\n          )}\n\n          {notifyText && (\n            <div className=\"mt-8\">\n              <motion.div\n                className={cn(\n                  \"inline-flex items-center gap-3 px-6 py-3 rounded-full\",\n                  \"bg-muted border border-border\"\n                )}\n                animate={{\n                  boxShadow: [\n                    \"0 0 0 0 rgba(0,0,0,0)\",\n                    \"0 0 0 8px rgba(0,0,0,0.03)\",\n                    \"0 0 0 0 rgba(0,0,0,0)\",\n                  ],\n                }}\n                transition={{\n                  duration: 2,\n                  repeat: Infinity,\n                  ease: \"easeInOut\",\n                }}\n              >\n                <motion.span\n                  className=\"w-2 h-2 rounded-full bg-primary\"\n                  animate={{\n                    scale: [1, 1.5, 1],\n                    opacity: [0.5, 1, 0.5],\n                  }}\n                  transition={{\n                    duration: 1.5,\n                    repeat: Infinity,\n                    ease: \"easeInOut\",\n                  }}\n                />\n                <span className=\"font-medium\">{notifyText}</span>\n              </motion.div>\n            </div>\n          )}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/comingsoon4.tsx"
    }
  ],
  "type": "registry:block"
}