{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "content-2",
  "type": "registry:block",
  "title": "Content 2",
  "description": "Two-column content with an image and an icon feature list.",
  "files": [
    {
      "path": "app/preview/content/two/page.tsx",
      "content": "import { Cpu, Zap } from 'lucide-react'\nimport Image from 'next/image'\n\nexport default function ContentSection() {\n    return (\n        <section className=\"py-16 md:py-32\">\n            <div className=\"mx-auto max-w-5xl space-y-8 px-6 md:space-y-16\">\n                <h2 className=\"relative z-10 max-w-xl text-4xl font-medium lg:text-5xl\">The Lyra ecosystem brings together our models.</h2>\n                <div className=\"relative\">\n                    <div className=\"relative z-10 space-y-4 md:w-1/2\">\n                        <p className=\"text-body\">\n                            Lyra is evolving to be more than just the models. <span className=\"text-title font-medium\">It supports an entire ecosystem</span> — from products innovate.\n                        </p>\n                        <p>It supports an entire ecosystem — from products to the APIs and platforms helping developers and businesses innovate</p>\n\n                        <div className=\"grid grid-cols-2 gap-3 pt-6 sm:gap-4\">\n                            <div className=\"space-y-3\">\n                                <div className=\"flex items-center gap-2\">\n                                    <Zap className=\"size-4\" />\n                                    <h3 className=\"text-sm font-medium\">Faaast</h3>\n                                </div>\n                                <p className=\"text-muted-foreground text-sm\">It supports an entire helping developers and innovate.</p>\n                            </div>\n                            <div className=\"space-y-2\">\n                                <div className=\"flex items-center gap-2\">\n                                    <Cpu className=\"size-4\" />\n                                    <h3 className=\"text-sm font-medium\">Powerful</h3>\n                                </div>\n                                <p className=\"text-muted-foreground text-sm\">It supports an entire helping developers and businesses.</p>\n                            </div>\n                        </div>\n                    </div>\n                    <div className=\"mt-12 h-fit md:absolute md:-inset-y-12 md:inset-x-0 md:mt-0\">\n                        <div aria-hidden className=\"bg-linear-to-l z-1 to-background absolute inset-0 hidden from-transparent to-55% md:block\"></div>\n                        <div className=\"border-border/50 relative rounded-2xl border border-dotted p-2\">\n                            <Image src=\"/charts.png\" className=\"hidden rounded-[12px] dark:block\" alt=\"payments illustration dark\" width={1207} height={929} />\n                            <Image src=\"/charts-light.png\" className=\"rounded-[12px] shadow dark:hidden\" alt=\"payments illustration light\" width={1207} height={929} />\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </section>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/content-2.tsx"
    }
  ]
}