{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mist-features-1",
  "type": "registry:block",
  "title": "Features One",
  "description": "Mist Kit Features block, variant one",
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "../../packages/mist-kit/blocks/features/one/index.tsx",
      "content": "import { Card } from '@/components/ui/card'\nimport { Table } from './table'\n\nexport default function Features() {\n    return (\n        <section>\n            <div className=\"bg-muted/50 py-24\">\n                <div className=\"mx-auto w-full max-w-5xl px-6\">\n                    <div>\n                        <h2 className=\"text-foreground text-4xl font-semibold\">Effortless Task Management</h2>\n                        <p className=\"text-muted-foreground mb-12 mt-4 text-balance text-lg\">Automate your tasks and workflows by connecting your favorite tools like Notion, Todoist, and more. AI-powered scheduling helps you stay on track and adapt to changing priorities.</p>\n                        <div className=\"bg-foreground/5 rounded-3xl p-6\">\n                            <Table />\n                        </div>\n                    </div>\n\n                    <div className=\"border-foreground/10 relative mt-16 grid gap-12 border-b pb-12 [--radius:1rem] md:grid-cols-2\">\n                        <div>\n                            <h3 className=\"text-foreground text-xl font-semibold\">Marketing Campaigns</h3>\n                            <p className=\"text-muted-foreground my-4 text-lg\">Effortlessly plan and execute your marketing campaigns organized.</p>\n                            <Card\n                                className=\"aspect-video overflow-hidden px-6\"\n                                variant=\"soft\">\n                                <Card className=\"h-full translate-y-6\" />\n                            </Card>\n                        </div>\n                        <div>\n                            <h3 className=\"text-foreground text-xl font-semibold\">AI Meeting Scheduler</h3>\n                            <p className=\"text-muted-foreground my-4 text-lg\">Effortlessly book and manage your meetings. Stay on top of your schedule.</p>\n                            <Card\n                                className=\"aspect-video overflow-hidden\"\n                                variant=\"soft\">\n                                <Card className=\"translate-6 h-full\" />\n                            </Card>\n                        </div>\n                    </div>\n\n                    <blockquote className=\"before:bg-primary relative mt-12 max-w-xl pl-6 before:absolute before:inset-y-0 before:left-0 before:w-1 before:rounded-full\">\n                        <p className=\"text-foreground text-lg\">Wow, auto-generated pages are the kind of thing that you don't even know you need until you see it. It's like an AI-native CRM.</p>\n                        <footer className=\"mt-4 flex items-center gap-2\">\n                            <cite>Méschac Irung</cite>\n                            <span\n                                aria-hidden\n                                className=\"bg-foreground/15 size-1 rounded-full\"></span>\n                            <span className=\"text-muted-foreground\">Creator</span>\n                        </footer>\n                    </blockquote>\n                </div>\n            </div>\n        </section>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/features-one.tsx"
    },
    {
      "path": "../../packages/mist-kit/blocks/features/one/table.tsx",
      "content": "import { cn } from '@/lib/utils'\n\nconst CREATOR_AVATAR = 'https://avatars.githubusercontent.com/u/47919550?v=4'\nconst BERNARD_AVATAR = 'https://avatars.githubusercontent.com/u/31113941?v=4'\nconst THEO_AVATAR = 'https://avatars.githubusercontent.com/u/68236786?v=4'\nconst GLODIE_AVATAR = 'https://avatars.githubusercontent.com/u/99137927?v=4'\n\nexport const Table = ({ className }: { className?: string }) => {\n    const customers = [\n        {\n            id: 1,\n            date: '10/31/2023',\n            status: 'Paid',\n            statusVariant: 'success',\n            name: 'Bernard Ng',\n            avatar: BERNARD_AVATAR,\n            revenue: '$43.99',\n        },\n        {\n            id: 2,\n            date: '10/21/2023',\n            status: 'Ref',\n            statusVariant: 'warning',\n            name: 'Méschac Irung',\n            avatar: CREATOR_AVATAR,\n            revenue: '$19.99',\n        },\n        {\n            id: 3,\n            date: '10/15/2023',\n            status: 'Paid',\n            statusVariant: 'success',\n            name: 'Glodie Ng',\n            avatar: GLODIE_AVATAR,\n            revenue: '$99.99',\n        },\n        {\n            id: 4,\n            date: '10/12/2023',\n            status: 'Cancelled',\n            statusVariant: 'danger',\n            name: 'Theo Ng',\n            avatar: THEO_AVATAR,\n            revenue: '$19.99',\n        },\n    ]\n\n    return (\n        <div className={cn('bg-background shadow-foreground/5 inset-ring-1 inset-ring-background ring-foreground/5 relative w-full overflow-hidden rounded-xl border border-transparent p-6 shadow-md ring-1', className)}>\n            <div className=\"mb-6\">\n                <div className=\"flex gap-1.5\">\n                    <div className=\"bg-muted size-2 rounded-full border border-black/5\"></div>\n                    <div className=\"bg-muted size-2 rounded-full border border-black/5\"></div>\n                    <div className=\"bg-muted size-2 rounded-full border border-black/5\"></div>\n                </div>\n                <div className=\"mt-3 text-lg font-medium\">Customers</div>\n                <p className=\"mt-1 text-sm\">New users by First user primary channel group (Default Channel Group)</p>\n            </div>\n            <table\n                className=\"w-max table-auto border-collapse lg:w-full\"\n                data-rounded=\"medium\">\n                <thead className=\"dark:bg-background bg-gray-950/5\">\n                    <tr className=\"*:border *:p-3 *:text-left *:text-sm *:font-medium\">\n                        <th className=\"rounded-l-[--card-radius]\">#</th>\n                        <th>Date</th>\n                        <th>Status</th>\n                        <th>Customer</th>\n                        <th className=\"rounded-r-[--card-radius]\">Revenue</th>\n                    </tr>\n                </thead>\n                <tbody className=\"text-sm\">\n                    {customers.map((customer, index) => (\n                        <tr\n                            key={customer.id}\n                            className=\"*:border *:p-2\">\n                            <td>{customer.id}</td>\n                            <td>{customer.date}</td>\n                            <td>\n                                <span className={cn('rounded-full px-2 py-1 text-xs', customer.statusVariant == 'success' && 'bg-lime-500/15 text-lime-800', customer.statusVariant == 'danger' && 'bg-red-500/15 text-red-800', customer.statusVariant == 'warning' && 'bg-yellow-500/15 text-yellow-800')}>{customer.status}</span>\n                            </td>\n                            <td>\n                                <div className=\"flex items-center gap-2\">\n                                    <div className=\"size-6 overflow-hidden rounded-full\">\n                                        <img\n                                            src={customer.avatar}\n                                            alt={customer.name}\n                                            width=\"120\"\n                                            height=\"120\"\n                                            loading=\"lazy\"\n                                        />\n                                    </div>\n                                    <span className=\"text-foreground\">{customer.name}</span>\n                                </div>\n                            </td>\n                            <td>{customer.revenue}</td>\n                        </tr>\n                    ))}\n                </tbody>\n            </table>\n        </div>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/table.tsx"
    }
  ]
}