{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-2",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "accordion",
    "button",
    "card"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/feature-2.tsx",
      "content": "\"use client\";\n\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nexport default function Features2() {\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-12 px-6 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            Smart insights\n          </div>\n\n          <h2 className=\"text-5xl leading-tight font-semibold tracking-tight\">\n            Turn raw data into clear decisions\n          </h2>\n\n          <p className=\"text-muted-foreground max-w-lg\">\n            Analyze patterns, track performance, and uncover actionable insights\n            to make faster and smarter decisions with confidence.\n          </p>\n\n          <div className=\"flex gap-2\">\n            <Accordion type=\"single\" collapsible className=\"flex gap-2\">\n              <AccordionItem\n                value=\"item-1\"\n                className=\"bg-muted/50 rounded-lg border-none! px-4\"\n              >\n                <AccordionTrigger className=\"text-sm hover:no-underline\">\n                  What insights can I track?\n                </AccordionTrigger>\n                <AccordionContent className=\"text-muted-foreground pb-3 text-sm\">\n                  Track productivity trends, focus time, collaboration patterns,\n                  and performance metrics to understand how work actually\n                  happens across your team.\n                </AccordionContent>\n              </AccordionItem>\n\n              <AccordionItem\n                value=\"item-2\"\n                className=\"bg-muted/50 border-b-none flex-1 rounded-lg px-4\"\n              >\n                <AccordionTrigger className=\"text-sm hover:no-underline\">\n                  Does it work in real-time?\n                </AccordionTrigger>\n                <AccordionContent className=\"text-muted-foreground pb-3 text-sm\">\n                  Yes, all insights are updated in real-time, giving you instant\n                  visibility into activity, performance changes, and emerging\n                  patterns as they happen.\n                </AccordionContent>\n              </AccordionItem>\n            </Accordion>\n          </div>\n\n          <Button className=\"rounded-sm px-6 shadow-[inset_0_0px_2px_0px_rgba(0,0,0,0.1),inset_0_0px_4px_0px_rgba(0,0,0,0.1)]\">\n            Get started\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_4px_0px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_0px_4px_0px_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 absolute top-0 left-0 w-[260px] rounded-lg p-0 shadow-md backdrop-blur-md\">\n              <CardContent className=\"space-y-2 p-4\">\n                <div className=\"text-muted-foreground text-xs\">\n                  Performance Overview\n                </div>\n\n                <div className=\"text-2xl font-semibold\">\n                  72<span className=\"text-muted-foreground text-sm\">%</span>\n                </div>\n\n                <div className=\"flex gap-2 text-[10px]\">\n                  <span className=\"rounded-md bg-green-200 px-2 py-0.5 text-green-700\">\n                    Improving\n                  </span>\n                  <span className=\"rounded-md bg-blue-200 px-2 py-0.5 text-blue-700\">\n                    Stable\n                  </span>\n                </div>\n\n                <div className=\"text-muted-foreground space-y-1 text-xs\">\n                  <div>Tasks Completed: 124</div>\n                  <div>Avg Focus Time: 3.2h</div>\n                  <div>Efficiency: +12%</div>\n                </div>\n              </CardContent>\n            </Card>\n\n            <Card className=\"bg-background/90 dark:bg-card/80 ring-border/50 absolute top-28 right-0 z-50 w-[240px] rounded-lg p-0 shadow-lg backdrop-blur-md\">\n              <CardContent className=\"space-y-3 p-4\">\n                <div className=\"text-muted-foreground text-xs\">\n                  Activity Breakdown\n                </div>\n\n                <div className=\"text-muted-foreground text-sm\">\n                  <span className=\"text-foreground font-medium\">\n                    6h 45m tracked\n                  </span>{\" \"}\n                  today\n                </div>\n\n                <div className=\"flex h-2 w-full gap-1\">\n                  <div className=\"w-[40%] rounded-full bg-emerald-400\" />\n                  <div className=\"w-[35%] rounded-full bg-blue-400\" />\n                  <div className=\"w-[25%] rounded-full bg-orange-400\" />\n                </div>\n\n                <div className=\"text-muted-foreground flex gap-3 text-[10px]\">\n                  <span className=\"flex items-center gap-1\">\n                    <span className=\"h-2 w-2 rounded-full bg-emerald-400\" />\n                    Deep Work\n                  </span>\n                  <span className=\"flex items-center gap-1\">\n                    <span className=\"h-2 w-2 rounded-full bg-blue-400\" />\n                    Collaboration\n                  </span>\n                  <span className=\"flex items-center gap-1\">\n                    <span className=\"h-2 w-2 rounded-full bg-orange-400\" />\n                    Breaks\n                  </span>\n                </div>\n              </CardContent>\n            </Card>\n\n            <Card className=\"bg-background/90 dark:bg-card/80 ring-border/50 absolute bottom-8 left-10 w-[260px] rounded-lg p-0 shadow-lg 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\">Insights Summary</span>\n                  <span className=\"text-muted-foreground text-xs\">Updated</span>\n                </div>\n\n                <div className=\"text-muted-foreground text-sm\">\n                  <span className=\"text-foreground font-medium\">\n                    +18% productivity\n                  </span>{\" \"}\n                  this week\n                </div>\n\n                <div className=\"flex gap-2 text-[10px]\">\n                  <span className=\"rounded-md bg-green-200 px-2 py-0.5 text-green-700\">\n                    Growth\n                  </span>\n                  <span className=\"rounded-md bg-purple-200 px-2 py-0.5 text-purple-700\">\n                    Optimized\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-2.tsx"
    }
  ],
  "type": "registry:ui"
}