{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-4",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/feature-4.tsx",
      "content": "\"use client\";\n\nimport { Card, CardContent } from \"@/components/ui/card\";\n\nimport {\n  HiSignal,\n  HiUsers,\n  HiChartBar,\n  HiArrowTrendingUp,\n  HiClock,\n  HiExclamationTriangle,\n} from \"react-icons/hi2\";\n\nexport default function Features4() {\n  return (\n    <section className=\"flex w-full flex-col items-center justify-center px-6 py-16\">\n      <h1 className=\"text-foreground text-center text-4xl font-semibold tracking-tight md:text-5xl\">\n        Understand faster, act smarter\n      </h1>\n\n      <p className=\"text-muted-foreground mt-4 max-w-2xl text-center\">\n        Get clarity on performance, uncover patterns, and take action with\n        insights that actually move things forward.\n      </p>\n\n      <div className=\"mt-12 grid w-full max-w-6xl items-stretch gap-6 md:grid-cols-3\">\n        <Card className=\"bg-muted/40 flex h-full flex-col rounded-[40px] p-0\">\n          <CardContent className=\"flex h-full flex-col gap-8 p-4\">\n            <div className=\"text-center\">\n              <h3 className=\"text-foreground text-2xl font-semibold\">\n                Activity stream\n              </h3>\n              <p className=\"text-muted-foreground text-md/6\">\n                Track live system activity and event flow in real time, helping\n                you spot spikes and performance changes instantly.\n              </p>\n            </div>\n\n            <div className=\"bg-background dark:bg-background/60 flex min-h-[350px] flex-col justify-between rounded-4xl  p-4 shadow-[0px_3px_8px_-1px_rgba(0,0,0,0.03),0px_1px_2px_-1px_rgba(0,0,0,0.04),0px_2px_4px_0px_rgba(0,0,0,0.04)] dark:shadow-[0px_3px_8px_-1px_rgba(0,0,0,0.06),0px_1px_2px_-1px_rgba(0,0,0,0.04),0px_2px_4px_0px_rgba(0,0,0,0.04),inset_0px_2px_0px_0px_rgba(255,255,255,0.05)]\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-muted-foreground flex items-center gap-1 text-sm\">\n                  <HiSignal className=\"text-primary h-4 w-4\" />\n                  Live events\n                </span>\n                <span className=\"text-primary text-xs\">● live</span>\n              </div>\n\n              <div className=\"flex items-end justify-between\">\n                <div className=\"text-foreground text-4xl font-semibold\">\n                  18,942\n                </div>\n                <div className=\"text-primary text-sm\">+12%</div>\n              </div>\n\n              <div className=\"flex h-24 items-end gap-2\">\n                {[40, 60, 35, 80, 55, 90, 70].map((h, i) => (\n                  <div\n                    key={i}\n                    className=\"bg-primary/80 w-full rounded-md\"\n                    style={{ height: `${h}%` }}\n                  />\n                ))}\n              </div>\n\n              <div className=\"grid grid-cols-2 gap-3 text-sm\">\n                <div className=\"bg-muted rounded-lg p-3\">\n                  <div className=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <HiClock className=\"h-3 w-3\" />\n                    Latency\n                  </div>\n                  <div className=\"text-foreground text-lg font-medium\">\n                    1.2s\n                  </div>\n                </div>\n                <div className=\"bg-muted rounded-lg p-3\">\n                  <div className=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <HiExclamationTriangle className=\"h-3 w-3\" />\n                    Errors\n                  </div>\n                  <div className=\"text-destructive text-lg font-medium\">\n                    -2.3%\n                  </div>\n                </div>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card className=\"bg-muted/40 flex h-full flex-col rounded-4xl p-0\">\n          <CardContent className=\"flex h-full flex-col gap-8 p-4\">\n            <div className=\"text-center\">\n              <h3 className=\"text-foreground text-2xl font-semibold\">\n                User segments\n              </h3>\n              <p className=\"text-muted-foreground text-md/6\">\n                Understand how different user groups behave and interact, so you\n                can identify patterns and high-impact segments quickly.\n              </p>\n            </div>\n\n            <div className=\"bg-background dark:bg-background/60 flex min-h-[350px] flex-col justify-between rounded-4xl  p-4 shadow-[0px_3px_8px_-1px_rgba(0,0,0,0.03),0px_1px_2px_-1px_rgba(0,0,0,0.04),0px_2px_4px_0px_rgba(0,0,0,0.04)] dark:shadow-[0px_3px_8px_-1px_rgba(0,0,0,0.06),0px_1px_2px_-1px_rgba(0,0,0,0.04),0px_2px_4px_0px_rgba(0,0,0,0.04),inset_0px_2px_0px_0px_rgba(255,255,255,0.05)]\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-muted-foreground flex items-center gap-1 text-sm\">\n                  <HiUsers className=\"text-primary h-4 w-4\" />\n                  Active segments\n                </span>\n                <span className=\"text-muted-foreground text-xs\">12 groups</span>\n              </div>\n\n              <div className=\"flex items-center justify-center\">\n                <div className=\"border-primary/20 relative flex h-28 w-28 items-center justify-center rounded-full border-8\">\n                  <div className=\"border-primary absolute h-full w-full rotate-45 rounded-full border-8 border-t-transparent\" />\n                  <span className=\"text-foreground text-xl font-semibold\">\n                    68%\n                  </span>\n                </div>\n              </div>\n\n              <div className=\"space-y-3\">\n                {[\n                  { name: \"Power users\", value: 48 },\n                  { name: \"New users\", value: 32 },\n                  { name: \"Churn risk\", value: 47 },\n                ].map((item, i) => (\n                  <div\n                    key={i}\n                    className=\"flex items-center justify-between text-sm\"\n                  >\n                    <span className=\"text-muted-foreground\">{item.name}</span>\n                    <span className=\"text-foreground font-medium\">\n                      {item.value}%\n                    </span>\n                  </div>\n                ))}\n              </div>\n\n              <div className=\"flex gap-2\">\n                <div className=\"bg-primary h-2 flex-1 rounded-full\" />\n                <div className=\"bg-primary/60 h-2 flex-1 rounded-full\" />\n                <div className=\"bg-primary/30 h-2 flex-1 rounded-full\" />\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card className=\"bg-muted/40 flex h-full flex-col rounded-4xl p-0\">\n          <CardContent className=\"flex h-full flex-col gap-8 p-4\">\n            <div className=\"text-center\">\n              <h3 className=\"text-foreground text-2xl font-semibold\">\n                Momentum score\n              </h3>\n              <p className=\"text-muted-foreground text-md/6\">\n                Monitor growth across key metrics with a unified score,\n                revealing trends and momentum shifts at a glance.\n              </p>\n            </div>\n\n            <div className=\"bg-background dark:bg-background/60 flex min-h-[350px] flex-col justify-between rounded-4xl  p-4 shadow-[0px_3px_8px_-1px_rgba(0,0,0,0.03),0px_1px_2px_-1px_rgba(0,0,0,0.04),0px_2px_4px_0px_rgba(0,0,0,0.04)] dark:shadow-[0px_3px_8px_-1px_rgba(0,0,0,0.06),0px_1px_2px_-1px_rgba(0,0,0,0.04),0px_2px_4px_0px_rgba(0,0,0,0.04),inset_0px_2px_0px_0px_rgba(255,255,255,0.05)]\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-muted-foreground flex items-center gap-1 text-sm\">\n                  <HiChartBar className=\"text-primary h-4 w-4\" />\n                  Growth score\n                </span>\n                <span className=\"text-primary border-primary/20 bg-primary/5 rounded-3xl border px-2 text-xs\">\n                  +6.2%\n                </span>\n              </div>\n\n              <div className=\"text-foreground text-5xl font-semibold\">78</div>\n\n              <div className=\"space-y-4\">\n                {[\n                  { label: \"Acquisition\", value: 82 },\n                  { label: \"Engagement\", value: 68 },\n                  { label: \"Retention\", value: 74 },\n                ].map((item, i) => (\n                  <div key={i} className=\"space-y-1\">\n                    <div className=\"text-muted-foreground flex justify-between text-xs\">\n                      <span>{item.label}</span>\n                      <span>{item.value}%</span>\n                    </div>\n                    <div className=\"bg-muted h-2 w-full rounded-full\">\n                      <div\n                        className=\"bg-primary h-2 rounded-full\"\n                        style={{ width: `${item.value}%` }}\n                      />\n                    </div>\n                  </div>\n                ))}\n              </div>\n\n              <div className=\"bg-muted flex justify-between rounded-lg p-3 text-sm\">\n                <span className=\"text-muted-foreground flex items-center gap-1\">\n                  <HiArrowTrendingUp className=\"h-4 w-4\" />\n                  Trend\n                </span>\n                <span className=\"text-primary font-medium\">Accelerating</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/feature-4.tsx"
    }
  ],
  "type": "registry:ui"
}