{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-2",
  "title": "Alternating Rows With Stats",
  "description": "Alternating features rows pairing an eyebrow, headline, bullet list, contributor avatars, and a highlight stat with an image placeholder, split by dividers.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/features/2/features-block.tsx",
      "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\n/** Props a call site may pass through to an icon. */\ntype IconProps = { className?: string; size?: number | string }\n\nconst rows = [\n  {\n    eyebrow: \"Collaboration\",\n    Icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Users\"\n        tabler=\"IconUsersGroup\"\n        hugeicons=\"UserGroupIcon\"\n        phosphor=\"UsersThree\"\n        remixicon=\"RiTeamLine\"\n        {...p}\n      />\n    ),\n    title: \"Work as one, ship faster together\",\n    body: \"One shared workspace where roles, live presence, and threaded comments keep everyone aligned.\",\n    bullets: [\n      \"Granular roles: viewer, editor, admin\",\n      \"Real-time presence and inline comments\",\n      \"Version history with one-click restore\",\n      \"Guest access with expiring links\",\n    ],\n    cta: \"Explore Collaboration\",\n    img: \"https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&q=80\",\n    imgAlt: \"Team collaboration interface showing shared workspace\",\n    avatars: [\n      {\n        name: \"Sarah Kim\",\n        initials: \"SK\",\n        src: \"https://i.pravatar.cc/150?img=47\",\n      },\n      {\n        name: \"Marcus Webb\",\n        initials: \"MW\",\n        src: \"https://i.pravatar.cc/150?img=12\",\n      },\n      {\n        name: \"Priya Nair\",\n        initials: \"PN\",\n        src: \"https://i.pravatar.cc/150?img=32\",\n      },\n    ],\n    stat: { value: \"4.2×\", label: \"Faster Review Cycles\" },\n  },\n  {\n    eyebrow: \"Analytics\",\n    Icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"BarChart\"\n        tabler=\"IconChartBar\"\n        hugeicons=\"BarChartIcon\"\n        phosphor=\"ChartBar\"\n        remixicon=\"RiBarChartLine\"\n        {...p}\n      />\n    ),\n    title: \"Decisions grounded in real data\",\n    body: \"Turn raw events into clear, actionable dashboards in minutes, with no SQL or data-engineering bottleneck.\",\n    bullets: [\n      \"Sub-second query engine for large datasets\",\n      \"Funnel, retention, and cohort views built-in\",\n      \"Scheduled email and Slack reports\",\n      \"CSV and REST API export\",\n    ],\n    cta: \"See Analytics In Action\",\n    img: \"https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80\",\n    imgAlt: \"Analytics dashboard with funnel and retention charts\",\n    avatars: [\n      {\n        name: \"James Okafor\",\n        initials: \"JO\",\n        src: \"https://i.pravatar.cc/150?img=68\",\n      },\n      {\n        name: \"Lena Strauss\",\n        initials: \"LS\",\n        src: \"https://i.pravatar.cc/150?img=5\",\n      },\n    ],\n    stat: { value: \"98%\", label: \"Query Success Rate\" },\n  },\n  {\n    eyebrow: \"Security\",\n    Icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"ShieldCheck\"\n        tabler=\"IconShieldCheck\"\n        hugeicons=\"Shield01Icon\"\n        phosphor=\"ShieldCheck\"\n        remixicon=\"RiShieldCheckLine\"\n        {...p}\n      />\n    ),\n    title: \"Enterprise-grade protection, zero friction\",\n    body: \"Controls your compliance team will love and developers barely notice, with SSO, MFA, audit logs, and data residency built in.\",\n    bullets: [\n      \"SOC 2 Type II and ISO 27001 certified\",\n      \"SSO via SAML 2.0 and OIDC\",\n      \"Immutable audit log with SIEM export\",\n      \"EU and US data-residency regions\",\n    ],\n    cta: \"Review Security Docs\",\n    img: \"https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=800&q=80\",\n    imgAlt: \"Security controls panel with audit log\",\n    avatars: [\n      {\n        name: \"Diana Reyes\",\n        initials: \"DR\",\n        src: \"https://i.pravatar.cc/150?img=9\",\n      },\n      {\n        name: \"Tom Eriksen\",\n        initials: \"TE\",\n        src: \"https://i.pravatar.cc/150?img=53\",\n      },\n      {\n        name: \"Aiko Tanaka\",\n        initials: \"AT\",\n        src: \"https://i.pravatar.cc/150?img=25\",\n      },\n    ],\n    stat: { value: \"0\", label: \"Reported Breaches\" },\n  },\n]\n\nexport default function FeaturesBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-24 text-foreground\">\n      <div className=\"mx-auto w-full max-w-5xl\">\n        <div className=\"mx-auto mb-20 max-w-xl text-center\">\n          <Badge variant=\"outline\" className=\"mb-5\">\n            Platform\n          </Badge>\n          <h2 className=\"font-heading text-3xl font-bold tracking-tight sm:text-4xl\">\n            Built for every part of your workflow\n          </h2>\n          <p className=\"mt-4 text-base leading-relaxed text-muted-foreground\">\n            Acme brings collaboration, analytics, and security into one cohesive\n            platform, so nothing falls between the cracks.\n          </p>\n        </div>\n\n        <div className=\"flex flex-col gap-0\">\n          {rows.map((row, index) => {\n            const isEven = index % 2 === 0\n            return (\n              <div key={row.eyebrow}>\n                <div\n                  className={`flex flex-col gap-10 py-16 md:flex-row md:items-center md:gap-20 ${\n                    isEven ? \"\" : \"md:flex-row-reverse\"\n                  }`}\n                >\n                  <div className=\"flex flex-1 flex-col gap-6\">\n                    <div className=\"flex items-center gap-2\">\n                      <span className=\"flex size-6 shrink-0 items-center justify-center rounded-md border border-border bg-muted\">\n                        <row.Icon\n                          className=\"size-3.5 text-muted-foreground\"\n                          aria-hidden=\"true\"\n                        />\n                      </span>\n                      <span className=\"text-xs font-semibold tracking-widest text-muted-foreground uppercase\">\n                        {row.eyebrow}\n                      </span>\n                    </div>\n\n                    <h3 className=\"font-heading text-2xl font-bold tracking-tight sm:text-[1.75rem] sm:leading-snug\">\n                      {row.title}\n                    </h3>\n\n                    <p className=\"leading-relaxed text-muted-foreground\">\n                      {row.body}\n                    </p>\n\n                    <ul className=\"flex flex-col gap-3\">\n                      {row.bullets.map((bullet) => (\n                        <li\n                          key={bullet}\n                          className=\"flex items-center gap-3 text-sm\"\n                        >\n                          <span className=\"flex size-[18px] shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n                            <IconPlaceholder\n                              lucide=\"Check\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"Check\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"size-2.5\"\n                              aria-hidden=\"true\"\n                            />\n                          </span>\n                          <span className=\"text-foreground\">{bullet}</span>\n                        </li>\n                      ))}\n                    </ul>\n\n                    <div className=\"flex items-center gap-4 border-t border-border pt-5\">\n                      <div className=\"flex -space-x-2\">\n                        {row.avatars.map((av) => (\n                          <Avatar\n                            key={av.name}\n                            className=\"size-7 border-2 border-background\"\n                          >\n                            <AvatarImage\n                              src={av.src}\n                              alt={av.name}\n                              className=\"grayscale\"\n                            />\n                            <AvatarFallback className=\"text-[10px]\">\n                              {av.initials}\n                            </AvatarFallback>\n                          </Avatar>\n                        ))}\n                      </div>\n                      <div className=\"flex items-baseline gap-1.5\">\n                        <span className=\"text-lg font-bold tabular-nums\">\n                          {row.stat.value}\n                        </span>\n                        <span className=\"text-xs text-muted-foreground\">\n                          {row.stat.label}\n                        </span>\n                      </div>\n                    </div>\n\n                    <div>\n                      <Button variant=\"outline\" size=\"sm\">\n                        {row.cta}\n                        <IconPlaceholder\n                          lucide=\"ArrowRight\"\n                          tabler=\"IconArrowRight\"\n                          hugeicons=\"ArrowRightIcon\"\n                          phosphor=\"ArrowRight\"\n                          remixicon=\"RiArrowRightLine\"\n                          data-icon=\"inline-end\"\n                        />\n                      </Button>\n                    </div>\n                  </div>\n\n                  <div className=\"flex flex-1 items-center justify-center\">\n                    <div className=\"relative aspect-[4/3] w-full overflow-hidden rounded-lg border border-border bg-muted md:max-w-sm\">\n                      <img\n                        src={row.img}\n                        alt={row.imgAlt}\n                        className=\"size-full object-cover\"\n                      />\n                      <div className=\"absolute inset-x-0 bottom-0 flex items-center gap-2 border-t border-border bg-background/80 px-4 py-2.5 backdrop-blur-sm\">\n                        <span className=\"flex size-5 shrink-0 items-center justify-center rounded-md border border-border bg-background\">\n                          <row.Icon\n                            className=\"size-3 text-muted-foreground\"\n                            aria-hidden=\"true\"\n                          />\n                        </span>\n                        <span className=\"text-[11px] font-medium tracking-wide text-muted-foreground\">\n                          {row.eyebrow} Preview\n                        </span>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n\n                {index < rows.length - 1 && <Separator />}\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/features-2.tsx"
    }
  ],
  "meta": {
    "height": "2179px",
    "tier": "free"
  },
  "categories": [
    "features"
  ],
  "type": "registry:block"
}