{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <educlopez93@gmail.com>","css":{},"dependencies":["motion"],"description":"Bento grid features block with asymmetric layout","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nconst SPRING = {\n  bounce: 0.1,\n  duration: 0.25,\n  type: \"spring\" as const,\n};\n\nconst features = [\n  {\n    accent: true,\n    description:\n      \"Real-time analytics dashboard with customizable metrics and beautiful visualizations.\",\n    span: \"col-span-2 row-span-2\",\n    title: \"Smart Analytics\",\n    // The lead cell of a bento is two columns by two rows. Without something to\n    // look at, that is a quarter of the section spent on two lines of text.\n    visual: \"analytics\" as const,\n  },\n  {\n    description:\n      \"Work together in real-time with built-in commenting and sharing.\",\n    span: \"col-span-1\",\n    title: \"Team Collaboration\",\n  },\n  {\n    description: \"RESTful API with comprehensive documentation and SDKs.\",\n    span: \"col-span-1\",\n    title: \"API First\",\n  },\n  {\n    description: \"Lightning-fast delivery from edge locations worldwide.\",\n    span: \"col-span-1\",\n    title: \"Global CDN\",\n  },\n  {\n    description:\n      \"Enterprise-grade security with SOC 2 compliance and encryption.\",\n    span: \"col-span-1\",\n    title: \"Security\",\n  },\n];\n\n/** Bars of a plausible-looking week. Fixed, so the panel never reflows. */\nconst SERIES = [\n  { id: \"w1\", value: 38 },\n  { id: \"w2\", value: 52 },\n  { id: \"w3\", value: 44 },\n  { id: \"w4\", value: 66 },\n  { id: \"w5\", value: 58 },\n  { id: \"w6\", value: 74 },\n  { id: \"w7\", value: 62 },\n  { id: \"w8\", value: 88 },\n  { id: \"w9\", value: 71 },\n  { id: \"w10\", value: 96 },\n  { id: \"w11\", value: 84 },\n  { id: \"w12\", value: 100 },\n];\nconst PEAK_ID = \"w12\";\nconst BAR_STAGGER = 0.03;\n\n/**\n * A small analytics panel for the bento's lead cell.\n *\n * Every element is real markup on the page's own tokens, so it follows the\n * theme into dark mode and stays sharp at any pixel density — and the bars can\n * grow on entry, which is the point of the library it ships with.\n */\nconst AnalyticsPanel = () => {\n  const shouldReduceMotion = useReducedMotion();\n\n  return (\n    <div className=\"flex h-full flex-col gap-4 rounded-xl border bg-background p-5\">\n      <div className=\"flex items-baseline justify-between gap-3\">\n        <div>\n          <p className=\"text-foreground/60 text-xs\">Revenue this month</p>\n          <p className=\"font-semibold text-2xl text-foreground tabular-nums\">\n            $48,219\n          </p>\n        </div>\n        <span className=\"rounded-full bg-foreground/5 px-2 py-0.5 font-medium text-foreground/70 text-xs tabular-nums\">\n          +12.4%\n        </span>\n      </div>\n\n      <div\n        aria-hidden=\"true\"\n        className=\"flex min-h-0 flex-1 items-end gap-1.5 sm:gap-2\"\n      >\n        {SERIES.map(({ id, value }, index) => (\n          <motion.span\n            className={cn(\n              \"flex-1 origin-bottom rounded-t-sm\",\n              id === PEAK_ID ? \"bg-foreground\" : \"bg-foreground/15\"\n            )}\n            initial={shouldReduceMotion ? { scaleY: 1 } : { scaleY: 0 }}\n            key={id}\n            style={{ height: `${value}%` }}\n            transition={\n              shouldReduceMotion\n                ? { duration: 0 }\n                : { ...SPRING, delay: index * BAR_STAGGER }\n            }\n            viewport={{ margin: \"-80px\", once: true }}\n            whileInView={{ scaleY: 1 }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport function FeaturesBento() {\n  const shouldReduceMotion = useReducedMotion();\n\n  return (\n    <section aria-labelledby=\"features-bento-heading\">\n      <div className=\"py-24 md:py-32\">\n        <div className=\"mx-auto max-w-6xl px-6\">\n          <div className=\"mx-auto mb-16 max-w-2xl text-center\">\n            <h2\n              className=\"text-balance font-bold text-3xl tracking-tight md:text-4xl\"\n              id=\"features-bento-heading\"\n            >\n              Built for modern teams\n            </h2>\n            <p className=\"mt-4 text-foreground/70 text-lg\">\n              A complete platform with everything you need to ship faster.\n            </p>\n          </div>\n          <div className=\"grid auto-rows-[180px] grid-cols-2 gap-4 md:grid-cols-4\">\n            {features.map((feature, index) => (\n              <motion.div\n                className={cn(\n                  \"flex flex-col justify-end overflow-hidden rounded-xl border p-6\",\n                  feature.accent\n                    ? \"bg-foreground/5 ring-1 ring-foreground/10\"\n                    : \"bg-background\",\n                  feature.span\n                )}\n                initial={\n                  shouldReduceMotion\n                    ? { opacity: 1 }\n                    : { opacity: 0, scale: 0.95 }\n                }\n                key={feature.title}\n                transition={\n                  shouldReduceMotion\n                    ? { duration: 0 }\n                    : { ...SPRING, delay: index * 0.05 }\n                }\n                viewport={{ margin: \"-100px\", once: true }}\n                whileInView={\n                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }\n                }\n              >\n                {feature.visual === \"analytics\" && (\n                  // Drawn, not photographed. A screenshot would be fixed to one\n                  // theme, blur on a retina screen and weigh more than the whole\n                  // block; markup inherits the page's colours and stays sharp.\n                  <div className=\"-mx-6 -mt-6 mb-4 min-h-0 flex-1 overflow-hidden\">\n                    <AnalyticsPanel />\n                  </div>\n                )}\n                <h3 className=\"mb-1 font-semibold text-foreground\">\n                  {feature.title}\n                </h3>\n                <p className=\"text-foreground/70 text-sm leading-relaxed\">\n                  {feature.description}\n                </p>\n              </motion.div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default FeaturesBento;\n","path":"index.tsx","target":"components/smoothui/features-2/index.tsx","type":"registry:block"}],"name":"features-2","registryDependencies":[],"title":"Features 2","type":"registry:block"}