{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mist-pricing-2",
  "type": "registry:block",
  "title": "Pricing Two",
  "description": "Mist Kit Pricing block, variant two",
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "../../packages/mist-kit/blocks/pricing/two/index.tsx",
      "content": "import { Button } from '@/components/ui/button'\nimport { Check } from 'lucide-react'\nimport Link from 'next/link'\nimport { Card, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'\n\nexport default function Pricing() {\n    return (\n        <div className=\"bg-muted relative py-16 md:py-32\">\n            <div className=\"mx-auto max-w-5xl px-6\">\n                <div className=\"mx-auto max-w-2xl text-center\">\n                    <h2 className=\"text-balance text-3xl font-bold md:text-4xl lg:text-5xl\">Pricing that scale with your business</h2>\n                    <p className=\"text-muted-foreground mx-auto mt-4 max-w-xl text-balance text-lg\">Choose the perfect plan for your needs and start optimizing your workflow today</p>\n                </div>\n                <div className=\"@container relative mt-12 md:mt-20\">\n                    <Card className=\"@4xl:max-w-full relative mx-auto max-w-sm\">\n                        <div className=\"@4xl:grid-cols-3 grid\">\n                            <div>\n                                <CardHeader className=\"p-8\">\n                                    <CardTitle className=\"font-medium\">Free</CardTitle>\n                                    <span className=\"mb-0.5 mt-2 block text-2xl font-semibold\">$0 / mo</span>\n                                    <CardDescription className=\"text-sm\">Per editor</CardDescription>\n                                </CardHeader>\n                                <div className=\"border-y px-8 py-4\">\n                                    <Button\n                                        asChild\n                                        className=\"w-full\"\n                                        variant=\"neutral\">\n                                        <Link href=\"#\">Get Started</Link>\n                                    </Button>\n                                </div>\n\n                                <ul\n                                    role=\"list\"\n                                    className=\"space-y-3 p-8\">\n                                    {['Basic Analytics Dashboard', '5GB Cloud Storage', 'Email and Chat Support'].map((item, index) => (\n                                        <li\n                                            key={index}\n                                            className=\"flex items-center gap-2\">\n                                            <Check\n                                                className=\"text-primary size-3\"\n                                                strokeWidth={3.5}\n                                            />\n                                            {item}\n                                        </li>\n                                    ))}\n                                </ul>\n                            </div>\n                            <div className=\"ring-foreground/10 bg-background rounded-(--radius) @3xl:mx-0 @3xl:-my-3 -mx-1 border-transparent shadow ring-1\">\n                                <div className=\"@3xl:py-3 @3xl:px-0 relative px-1\">\n                                    <CardHeader className=\"p-8\">\n                                        <CardTitle className=\"font-medium\">Pro</CardTitle>\n                                        <span className=\"mb-0.5 mt-2 block text-2xl font-semibold\">$19 / mo</span>\n                                        <CardDescription className=\"text-sm\">Per editor</CardDescription>\n                                    </CardHeader>\n                                    <div className=\"@3xl:mx-0 -mx-1 border-y px-8 py-4\">\n                                        <Button\n                                            asChild\n                                            className=\"w-full\">\n                                            <Link href=\"#\">Get Started</Link>\n                                        </Button>\n                                    </div>\n\n                                    <ul\n                                        role=\"list\"\n                                        className=\"space-y-3 p-8\">\n                                        {['Everything in Free Plan', '5GB Cloud Storage', 'Email and Chat Support', 'Access to Community Forum', 'Single User Access', 'Access to Basic Templates', 'Mobile App Access', '1 Custom Report Per Month', 'Monthly Product Updates', 'Standard Security Features'].map((item, index) => (\n                                            <li\n                                                key={index}\n                                                className=\"flex items-center gap-2\">\n                                                <Check\n                                                    className=\"text-primary size-3\"\n                                                    strokeWidth={3.5}\n                                                />\n                                                {item}\n                                            </li>\n                                        ))}\n                                    </ul>\n                                </div>\n                            </div>\n                            <div>\n                                <CardHeader className=\"p-8\">\n                                    <CardTitle className=\"font-medium\">Pro Plus</CardTitle>\n                                    <span className=\"mb-0.5 mt-2 block text-2xl font-semibold\">$49 / mo</span>\n                                    <CardDescription className=\"text-sm\">Per editor</CardDescription>\n                                </CardHeader>\n                                <div className=\"border-y px-8 py-4\">\n                                    <Button\n                                        asChild\n                                        className=\"w-full\"\n                                        variant=\"neutral\">\n                                        <Link href=\"#\">Get Started</Link>\n                                    </Button>\n                                </div>\n\n                                <ul\n                                    role=\"list\"\n                                    className=\"space-y-3 p-8\">\n                                    {['Everything in Pro Plan', '5GB Cloud Storage', 'Email and Chat Support'].map((item, index) => (\n                                        <li\n                                            key={index}\n                                            className=\"flex items-center gap-2\">\n                                            <Check\n                                                className=\"text-primary size-3\"\n                                                strokeWidth={3.5}\n                                            />\n                                            {item}\n                                        </li>\n                                    ))}\n                                </ul>\n                            </div>\n                        </div>\n                    </Card>\n                </div>\n            </div>\n        </div>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/pricing-section-two.tsx"
    }
  ]
}