{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "automated-tasks-panel",
  "type": "registry:ui",
  "title": "Automated Tasks Panel",
  "description": "Animated task panel with scrolling automation features",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/ruixenui/automated-tasks-panel.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { motion } from \"motion/react\";\nimport { Bell, DollarSign, Users, Share2, FileBarChart } from \"lucide-react\";\n\nconst tasks = [\n  {\n    title: \"AI-powered notifications\",\n    subtitle: \"Smart alerts for critical events\",\n    icon: <Bell className=\"w-4 h-4\" />,\n  },\n  {\n    title: \"Automated payroll\",\n    subtitle: \"Error-free salary processing\",\n    icon: <DollarSign className=\"w-4 h-4\" />,\n  },\n  {\n    title: \"Employee insights\",\n    subtitle: \"Track productivity in real-time\",\n    icon: <Users className=\"w-4 h-4\" />,\n  },\n  {\n    title: \"Social campaigns\",\n    subtitle: \"AI-curated content suggestions\",\n    icon: <Share2 className=\"w-4 h-4\" />,\n  },\n  {\n    title: \"AI-driven reports\",\n    subtitle: \"Weekly insights & performance\",\n    icon: <FileBarChart className=\"w-4 h-4\" />,\n  },\n];\n\nexport default function AutomatedTasksPanel() {\n  return (\n    <section className=\"relative w-full py-20 bg-background text-foreground\">\n      <div className=\"mx-auto max-w-5xl grid grid-cols-1 md:grid-cols-2 items-center gap-12\">\n        {/* LEFT SIDE - Task Loop with Vertical Bar */}\n        <div className=\"relative w-full max-w-sm\">\n          <Card className=\"overflow-hidden bg-muted/30 dark:bg-muted/20 backdrop-blur-md shadow-xl rounded-lg\">\n            <CardContent className=\"relative h-[320px] p-0 overflow-hidden\">\n              {/* Scrollable Container */}\n              <div className=\"relative h-full overflow-hidden\">\n                {/* Motion list */}\n                <motion.div\n                  className=\"flex flex-col gap-2 absolute w-full\"\n                  animate={{ y: [\"0%\", \"-50%\"] }}\n                  transition={{\n                    repeat: Infinity,\n                    repeatType: \"loop\",\n                    duration: 14,\n                    ease: \"linear\",\n                  }}\n                >\n                  {[...tasks, ...tasks].map((task, i) => (\n                    <div\n                      key={i}\n                      className=\"flex items-center gap-3 px-4 py-3 border-b border-gray-200 dark:border-gray-700 relative\"\n                    >\n                      {/* Icon + Content */}\n                      <div className=\"flex items-center justify-between flex-1\">\n                        <div className=\"flex items-center gap-2\">\n                          <div className=\"bg-gray-200 dark:bg-gray-700 w-10 h-10 rounded-xl shadow-md\" />\n                          <div>\n                            <p className=\"text-sm font-medium text-gray-900 dark:text-white\">\n                              {task.title}\n                            </p>\n                            <p className=\"text-xs text-gray-500\">\n                              {task.subtitle}\n                            </p>\n                          </div>\n                        </div>\n                        {task.icon}\n                      </div>\n                    </div>\n                  ))}\n                </motion.div>\n\n                {/* Fade effect only inside card */}\n                <div className=\"absolute top-0 left-0 w-full h-12 bg-gradient-to-b from-background via-background/70 to-transparent pointer-events-none\" />\n                <div className=\"absolute bottom-0 left-0 w-full h-12 bg-gradient-to-t from-background via-background/70 to-transparent pointer-events-none\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n\n        {/* RIGHT SIDE - Content */}\n        <div className=\"space-y-6\">\n          <Badge variant=\"secondary\" className=\"px-3 py-1 text-sm\">\n            Workflow Automation\n          </Badge>\n          <h3 className=\"text-lg sm:text-md lg:text-2xl font-normal text-gray-900 dark:text-white leading-relaxed\">\n            Automate repetitive tasks{\" \"}\n            <span className=\"text-gray-500 dark:text-gray-400 text-sm sm:text-base lg:text-2xl\">\n              we help you streamline operations with AI-driven automation — from\n              payroll and reporting to employee tracking and smart\n              notifications. Our solutions reduce human error, save time, and\n              scale effortlessly with your business needs.\n            </span>\n          </h3>\n\n          <div className=\"flex gap-3 flex-wrap\">\n            <Badge className=\"px-4 py-2 text-sm\">AI Task Bots</Badge>\n            <Badge className=\"px-4 py-2 text-sm\">100+ Automations</Badge>\n            <Badge className=\"px-4 py-2 text-sm\">Enterprise Ready</Badge>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/automated-tasks-panel.tsx"
    }
  ]
}