{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-5",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/feature-5.tsx",
      "content": "\"use client\";\n\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\n\nimport {\n  HiMiniSquares2X2,\n  HiMiniClock,\n  HiMiniExclamationTriangle,\n} from \"react-icons/hi2\";\n\nexport default function Features5() {\n  return (\n    <section className=\"theme-injected bg-background w-full py-16\">\n      <div className=\"mx-auto grid max-w-6xl items-center gap-10 px-4 lg:grid-cols-2\">\n        <div className=\"space-y-6\">\n          <div className=\"text-muted-foreground bg-muted/50 inline-flex w-fit items-center gap-2 rounded-lg px-3 py-1 text-sm\">\n            <span className=\"bg-primary h-2 w-2 rounded-full\" />\n            Workflow control\n          </div>\n          <h2 className=\"text-5xl leading-tight font-semibold tracking-tight\">\n            Run your system, not just tasks\n          </h2>\n          <p className=\"text-muted-foreground max-w-lg\">\n            Coordinate actions, automate decisions, and keep everything moving\n            without constant manual input or switching between tools.\n          </p>\n\n          <div className=\"space-y-3\">\n            <div className=\"flex items-start gap-3 rounded-lg\">\n              <div className=\"bg-primary/10 text-primary flex h-9 w-9 items-center justify-center rounded-md\">\n                <HiMiniSquares2X2 className=\"h-4 w-4\" />\n              </div>\n\n              <div>\n                <div className=\"text-sm font-medium\">Flow visibility</div>\n                <div className=\"text-muted-foreground text-xs\">\n                  Track how tasks move across stages\n                </div>\n              </div>\n            </div>\n\n            <div className=\"flex items-start gap-3\">\n              <div className=\"bg-primary/10 text-primary flex h-9 w-9 items-center justify-center rounded-md\">\n                <HiMiniClock className=\"h-4 w-4\" />\n              </div>\n\n              <div>\n                <div className=\"text-sm font-medium\">Execution speed</div>\n                <div className=\"text-muted-foreground text-xs\">\n                  See how fast actions get completed\n                </div>\n              </div>\n            </div>\n\n            <div className=\"flex items-start gap-3\">\n              <div className=\"bg-primary/10 text-primary flex h-9 w-9 items-center justify-center rounded-md\">\n                <HiMiniExclamationTriangle className=\"h-4 w-4\" />\n              </div>\n\n              <div>\n                <div className=\"text-sm font-medium\">Smart alerts</div>\n                <div className=\"text-muted-foreground text-xs\">\n                  Catch issues before they grow\n                </div>\n              </div>\n            </div>\n          </div>\n          <Button className=\"rounded-sm px-6 shadow-[inset_0_0px_2px_rgba(0,0,0,0.1),0_4px_12px_rgba(0,0,0,0.08)]\">\n            Start building\n          </Button>\n        </div>\n\n        <div className=\"bg-muted dark:bg-card/50 relative flex justify-center rounded-xl p-8 shadow-[inset_0_0px_6px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_0px_6px_rgba(0,0,0,1)]\">\n          <div className=\"relative h-[380px] w-full max-w-md\">\n            <Card className=\"bg-background/80 dark:bg-card/80 ring-border/50 border-border/50 absolute top-0 left-0 w-[260px] rounded-lg border p-0 shadow-[0_10px_30px_rgba(0,0,0,0.12)] backdrop-blur-md\">\n              <CardContent className=\"space-y-2 p-4\">\n                <div className=\"text-muted-foreground text-xs\">\n                  Incoming Flow\n                </div>\n\n                <div className=\"text-lg font-semibold\">New order detected</div>\n\n                <div className=\"flex gap-2 text-[10px]\">\n                  <span className=\"bg-primary/10 text-primary rounded-md px-2 py-0.5\">\n                    Live\n                  </span>\n                  <span className=\"bg-muted rounded-md px-2 py-0.5\">\n                    Trigger\n                  </span>\n                </div>\n\n                <div className=\"text-muted-foreground space-y-1 text-xs\">\n                  <div>Source: API / Webhook</div>\n                  <div>Region: Global</div>\n                  <div>Status: Active</div>\n                </div>\n              </CardContent>\n            </Card>\n\n            <Card className=\"bg-background/90 dark:bg-card/80 ring-border/50 border-border/50 absolute top-28 right-0 z-50 w-[240px] rounded-lg border p-0 shadow-[0_12px_40px_rgba(0,0,0,0.18)] backdrop-blur-md\">\n              <CardContent className=\"space-y-3 p-4\">\n                <div className=\"text-muted-foreground text-xs\">\n                  Decision Layer\n                </div>\n\n                <div className=\"text-foreground text-sm font-medium\">\n                  Routing & validation\n                </div>\n\n                <div className=\"flex h-2 w-full gap-1 overflow-hidden rounded-full\">\n                  <div className=\"bg-primary w-[50%]\" />\n                  <div className=\"w-[30%] bg-blue-400\" />\n                  <div className=\"w-[20%] bg-orange-400\" />\n                </div>\n\n                <div className=\"text-muted-foreground flex gap-3 text-[10px]\">\n                  <span>Priority</span>\n                  <span>Checks</span>\n                  <span>Filters</span>\n                </div>\n              </CardContent>\n            </Card>\n\n            <Card className=\"bg-background/90 dark:bg-card/80 ring-border/50 border-border/50 absolute bottom-8 left-10 w-[260px] rounded-lg border p-0 shadow-[0_12px_40px_rgba(0,0,0,0.16)] backdrop-blur-md\">\n              <CardContent className=\"space-y-3 p-4\">\n                <div className=\"flex items-center justify-between text-sm\">\n                  <span className=\"font-medium\">Execution</span>\n                  <span className=\"text-muted-foreground text-xs\">Synced</span>\n                </div>\n\n                <div className=\"text-muted-foreground text-sm\">\n                  Action completed and pushed across connected services\n                </div>\n\n                <div className=\"flex gap-2 text-[10px]\">\n                  <span className=\"rounded-md bg-green-500/10 px-2 py-0.5 text-green-500\">\n                    Success\n                  </span>\n                  <span className=\"rounded-md bg-purple-500/10 px-2 py-0.5 text-purple-500\">\n                    Distributed\n                  </span>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/feature-5.tsx"
    }
  ],
  "type": "registry:ui"
}