feat(blocks): add pricing-01

apps/www/__registry__/default/blocks/pricing-01/page.tsx

@@ -0,0 +1,11 @@
+import { Pricing } from "@/registry/default/blocks/pricing-01/components/pricing"
+
+export default function Page() {
+  return (
+    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+      <div className="w-full max-w-4xl">
+        <Pricing />
+      </div>
+    </div>
+  )
+}

apps/www/__registry__/index.tsx

@@ -1234,6 +1234,33 @@ export const Index: Record<string, any> = {
       source: "__registry__/new-york/blocks/login-05/page.tsx",
       meta: undefined,
     },
+    "pricing-01": {
+      name: "pricing-01",
+      description: "A pricing page with a card.",
+      type: "registry:block",
+      registryDependencies: ["card","button"],
+      files: [{
+        path: "registry/new-york/blocks/pricing-01/page.tsx",
+        type: "registry:page",
+        target: "app/pricing/page.tsx"
+      },{
+        path: "registry/new-york/blocks/pricing-01/components/pricing.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/pricing-01/components/pricing-card.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/pricing-01/components/pricing-header.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["pricing"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/pricing-01/page.tsx")),
+      source: "__registry__/new-york/blocks/pricing-01/page.tsx",
+      meta: undefined,
+    },
     "chart-area-axes": {
       name: "chart-area-axes",
       description: "",
@@ -6489,6 +6516,33 @@ export const Index: Record<string, any> = {
       source: "__registry__/default/blocks/login-05/page.tsx",
       meta: undefined,
     },
+    "pricing-01": {
+      name: "pricing-01",
+      description: "A pricing page with a card.",
+      type: "registry:block",
+      registryDependencies: ["card","button"],
+      files: [{
+        path: "registry/default/blocks/pricing-01/page.tsx",
+        type: "registry:page",
+        target: "app/pricing/page.tsx"
+      },{
+        path: "registry/default/blocks/pricing-01/components/pricing.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/pricing-01/components/pricing-card.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/blocks/pricing-01/components/pricing-header.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["pricing"],
+      component: React.lazy(() => import("@/registry/default/blocks/pricing-01/page.tsx")),
+      source: "__registry__/default/blocks/pricing-01/page.tsx",
+      meta: undefined,
+    },
     "chart-area-axes": {
       name: "chart-area-axes",
       description: "",

apps/www/__registry__/new-york/blocks/pricing-01/page.tsx

@@ -0,0 +1,11 @@
+import { Pricing } from "@/registry/new-york/blocks/pricing-01/components/pricing"
+
+export default function Page() {
+  return (
+    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+      <div className="w-full max-w-4xl">
+        <Pricing />
+      </div>
+    </div>
+  )
+}

apps/www/public/r/styles/default/pricing-01.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pricing-01",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A pricing page with a card.",
+  "registryDependencies": [
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/pricing-01/page.tsx",
+      "content": "import { Pricing } from \"@/registry/default/blocks/pricing-01/components/pricing\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-4xl\">\n        <Pricing />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/pricing/page.tsx"
+    },
+    {
+      "path": "blocks/pricing-01/components/pricing.tsx",
+      "content": "import { PricingCard } from \"@/registry/default/blocks/pricing-01/components/pricing-card\"\nimport { PricingHeader } from \"@/registry/default/blocks/pricing-01/components/pricing-header\"\n\nconst defaultTiers = [\n  {\n    name: \"SELF\",\n    price: 299,\n    description: \"For small teams and growing businesses\",\n    features: [\n      { name: \"Up to 20 team members\", included: true },\n      { name: \"Advanced analytics\", included: true },\n      { name: \"24/7 email support\", included: true },\n      { name: \"API access\", included: true, highlight: true },\n      { name: \"Custom integrations\", included: false },\n      { name: \"Enterprise features\", included: false },\n    ],\n    cta: \"Get started\",\n  },\n  {\n    name: \"TEAM\",\n    price: 999,\n    description: \"For large organizations and enterprises\",\n    highlight: true,\n    features: [\n      { name: \"Unlimited team members\", included: true },\n      { name: \"Advanced analytics\", included: true },\n      { name: \"24/7 priority support\", included: true },\n      { name: \"Unlimited API access\", included: true, highlight: true },\n      { name: \"Custom integrations\", included: true },\n      { name: \"Enterprise features\", included: true },\n    ],\n    cta: \"Get started\",\n  },\n]\n\nexport function Pricing() {\n  return (\n    <div className=\"mx-auto w-full max-w-5xl px-4\">\n      <PricingHeader />\n      <div className=\"grid grid-cols-1 gap-8 md:grid-cols-2\">\n        {defaultTiers.map((tier) => (\n          <PricingCard key={tier.name} {...tier} />\n        ))}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/pricing-01/components/pricing-card.tsx",
+      "content": "import { ArrowRight, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from \"@/registry/default/ui/card\"\n\ninterface Feature {\n  name: string\n  highlight?: boolean\n  included: boolean\n}\n\ninterface PricingCardProps {\n  name: string\n  price: number\n  description: string\n  features: Feature[]\n  highlight?: boolean\n  cta?: string\n}\n\nexport function PricingCard({\n  name,\n  price,\n  description,\n  features,\n  highlight,\n  cta = \"Get started\",\n}: PricingCardProps) {\n  return (\n    <Card\n      className={cn(\n        \"group relative transition-all duration-500\",\n        highlight ? \"bg-black dark:bg-white\" : \"bg-black dark:bg-white\"\n      )}\n    >\n      <CardHeader className=\"space-y-4 p-10\">\n        <h3\n          className={cn(\n            \"text-lg font-medium uppercase tracking-wider\",\n            \"text-white dark:text-neutral-900\"\n          )}\n        >\n          {name}\n        </h3>\n        <div className=\"flex items-baseline gap-2\">\n          <span\n            className={cn(\n              \"text-5xl font-light\",\n              \"text-white dark:text-neutral-900\"\n            )}\n          >\n            ${price}\n          </span>\n          <span className=\"text-sm text-neutral-400 dark:text-neutral-600\">\n            one-time\n          </span>\n        </div>\n        <p\n          className={cn(\n            \"border-b pb-6 text-sm\",\n            \"border-neutral-800 text-neutral-400 dark:border-neutral-200 dark:text-neutral-600\"\n          )}\n        >\n          {description}\n        </p>\n      </CardHeader>\n\n      <CardContent className=\"space-y-4 p-10 pt-0\">\n        {features.map((feature) => (\n          <div key={feature.name} className=\"flex items-center gap-3\">\n            <div\n              className={cn(\n                \"flex h-5 w-5 shrink-0 items-center justify-center rounded-full\",\n                feature.included\n                  ? \"text-white dark:text-neutral-900\"\n                  : \"text-neutral-600 dark:text-neutral-500\"\n              )}\n            >\n              <Check className=\"h-3.5 w-3.5\" />\n            </div>\n            <span className=\"text-sm text-neutral-300 dark:text-neutral-600\">\n              {feature.name}\n            </span>\n          </div>\n        ))}\n      </CardContent>\n      <CardFooter className=\"p-10 pt-0\">\n        <Button\n          aria-label={cta}\n          className={cn(\n            \"group relative h-12 w-full\",\n            \"bg-white text-neutral-900 dark:bg-neutral-900 dark:text-white\",\n            \"hover:bg-neutral-100 dark:hover:bg-neutral-800\",\n            \"border border-neutral-800 dark:border-neutral-200\",\n            \"hover:border-neutral-700 dark:hover:border-neutral-300\"\n          )}\n        >\n          <span className=\"relative z-10 flex items-center justify-center gap-2 font-medium tracking-wide\">\n            {cta}\n            <ArrowRight className=\"h-4 w-4 transition-transform group-hover:translate-x-1\" />\n          </span>\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/pricing-01/components/pricing-header.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\nexport function PricingHeader() {\n  return (\n    <div className=\"flex flex-col items-center justify-center space-y-4 py-10\">\n      <h1\n        className={cn(\n          \"text-4xl font-medium uppercase tracking-tighter\",\n          \"text-neutral-900 dark:text-white\"\n        )}\n      >\n        Pricing\n      </h1>\n      <p className=\"text-lg text-neutral-500 dark:text-neutral-400\">\n        Choose the plan that suits your needs\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "pricing"
+  ]
+}

apps/www/public/r/styles/new-york/pricing-01.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pricing-01",
+  "type": "registry:block",
+  "author": "shadcn (https://ui.shadcn.com)",
+  "description": "A pricing page with a card.",
+  "registryDependencies": [
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "blocks/pricing-01/page.tsx",
+      "content": "import { Pricing } from \"@/registry/new-york/blocks/pricing-01/components/pricing\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-4xl\">\n        <Pricing />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/pricing/page.tsx"
+    },
+    {
+      "path": "blocks/pricing-01/components/pricing.tsx",
+      "content": "import { PricingCard } from \"@/registry/new-york/blocks/pricing-01/components/pricing-card\"\nimport { PricingHeader } from \"@/registry/new-york/blocks/pricing-01/components/pricing-header\"\n\nconst defaultTiers = [\n  {\n    name: \"SELF\",\n    price: 299,\n    description: \"For small teams and growing businesses\",\n    features: [\n      { name: \"Up to 20 team members\", included: true },\n      { name: \"Advanced analytics\", included: true },\n      { name: \"24/7 email support\", included: true },\n      { name: \"API access\", included: true, highlight: true },\n      { name: \"Custom integrations\", included: false },\n      { name: \"Enterprise features\", included: false },\n    ],\n    cta: \"Get started\",\n  },\n  {\n    name: \"TEAM\",\n    price: 999,\n    description: \"For large organizations and enterprises\",\n    highlight: true,\n    features: [\n      { name: \"Unlimited team members\", included: true },\n      { name: \"Advanced analytics\", included: true },\n      { name: \"24/7 priority support\", included: true },\n      { name: \"Unlimited API access\", included: true, highlight: true },\n      { name: \"Custom integrations\", included: true },\n      { name: \"Enterprise features\", included: true },\n    ],\n    cta: \"Get started\",\n  },\n]\n\nexport function Pricing() {\n  return (\n    <div className=\"mx-auto w-full max-w-5xl px-4\">\n      <PricingHeader />\n      <div className=\"grid grid-cols-1 gap-8 md:grid-cols-2\">\n        {defaultTiers.map((tier) => (\n          <PricingCard key={tier.name} {...tier} />\n        ))}\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/pricing-01/components/pricing-card.tsx",
+      "content": "import { ArrowRight, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from \"@/registry/new-york/ui/card\"\n\ninterface Feature {\n  name: string\n  highlight?: boolean\n  included: boolean\n}\n\ninterface PricingCardProps {\n  name: string\n  price: number\n  description: string\n  features: Feature[]\n  highlight?: boolean\n  cta?: string\n}\n\nexport function PricingCard({\n  name,\n  price,\n  description,\n  features,\n  highlight,\n  cta = \"Get started\",\n}: PricingCardProps) {\n  return (\n    <Card\n      className={cn(\n        \"group relative transition-all duration-500\",\n        highlight ? \"bg-black dark:bg-white\" : \"bg-black dark:bg-white\"\n      )}\n    >\n      <CardHeader className=\"space-y-4 p-10\">\n        <h3\n          className={cn(\n            \"text-lg font-medium uppercase tracking-wider\",\n            \"text-white dark:text-neutral-900\"\n          )}\n        >\n          {name}\n        </h3>\n        <div className=\"flex items-baseline gap-2\">\n          <span\n            className={cn(\n              \"text-5xl font-light\",\n              \"text-white dark:text-neutral-900\"\n            )}\n          >\n            ${price}\n          </span>\n          <span className=\"text-sm text-neutral-400 dark:text-neutral-600\">\n            one-time\n          </span>\n        </div>\n        <p\n          className={cn(\n            \"border-b pb-6 text-sm\",\n            \"border-neutral-800 text-neutral-400 dark:border-neutral-200 dark:text-neutral-600\"\n          )}\n        >\n          {description}\n        </p>\n      </CardHeader>\n\n      <CardContent className=\"space-y-4 p-10 pt-0\">\n        {features.map((feature) => (\n          <div key={feature.name} className=\"flex items-center gap-3\">\n            <div\n              className={cn(\n                \"flex h-5 w-5 shrink-0 items-center justify-center rounded-full\",\n                feature.included\n                  ? \"text-white dark:text-neutral-900\"\n                  : \"text-neutral-600 dark:text-neutral-500\"\n              )}\n            >\n              <Check className=\"h-3.5 w-3.5\" />\n            </div>\n            <span className=\"text-sm text-neutral-300 dark:text-neutral-600\">\n              {feature.name}\n            </span>\n          </div>\n        ))}\n      </CardContent>\n      <CardFooter className=\"p-10 pt-0\">\n        <Button\n          aria-label={cta}\n          className={cn(\n            \"group relative h-12 w-full\",\n            \"bg-white text-neutral-900 dark:bg-neutral-900 dark:text-white\",\n            \"hover:bg-neutral-100 dark:hover:bg-neutral-800\",\n            \"border border-neutral-800 dark:border-neutral-200\",\n            \"hover:border-neutral-700 dark:hover:border-neutral-300\"\n          )}\n        >\n          <span className=\"relative z-10 flex items-center justify-center gap-2 font-medium tracking-wide\">\n            {cta}\n            <ArrowRight className=\"h-4 w-4 transition-transform group-hover:translate-x-1\" />\n          </span>\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/pricing-01/components/pricing-header.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\n\nexport function PricingHeader() {\n  return (\n    <div className=\"flex flex-col items-center justify-center space-y-4 py-10\">\n      <h1\n        className={cn(\n          \"text-4xl font-medium uppercase tracking-tighter\",\n          \"text-neutral-900 dark:text-white\"\n        )}\n      >\n        Pricing\n      </h1>\n      <p className=\"text-lg text-neutral-500 dark:text-neutral-400\">\n        Choose the plan that suits your needs\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "categories": [
+    "pricing"
+  ]
+}

apps/www/registry/default/blocks/pricing-01/components/pricing-card.tsx

@@ -0,0 +1,112 @@
+import { ArrowRight, Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/registry/default/ui/card"
+
+interface Feature {
+  name: string
+  highlight?: boolean
+  included: boolean
+}
+
+interface PricingCardProps {
+  name: string
+  price: number
+  description: string
+  features: Feature[]
+  highlight?: boolean
+  cta?: string
+}
+
+export function PricingCard({
+  name,
+  price,
+  description,
+  features,
+  highlight,
+  cta = "Get started",
+}: PricingCardProps) {
+  return (
+    <Card
+      className={cn(
+        "group relative transition-all duration-500",
+        highlight ? "bg-black dark:bg-white" : "bg-black dark:bg-white"
+      )}
+    >
+      <CardHeader className="space-y-4 p-10">
+        <h3
+          className={cn(
+            "text-lg font-medium uppercase tracking-wider",
+            "text-white dark:text-neutral-900"
+          )}
+        >
+          {name}
+        </h3>
+        <div className="flex items-baseline gap-2">
+          <span
+            className={cn(
+              "text-5xl font-light",
+              "text-white dark:text-neutral-900"
+            )}
+          >
+            ${price}
+          </span>
+          <span className="text-sm text-neutral-400 dark:text-neutral-600">
+            one-time
+          </span>
+        </div>
+        <p
+          className={cn(
+            "border-b pb-6 text-sm",
+            "border-neutral-800 text-neutral-400 dark:border-neutral-200 dark:text-neutral-600"
+          )}
+        >
+          {description}
+        </p>
+      </CardHeader>
+
+      <CardContent className="space-y-4 p-10 pt-0">
+        {features.map((feature) => (
+          <div key={feature.name} className="flex items-center gap-3">
+            <div
+              className={cn(
+                "flex h-5 w-5 shrink-0 items-center justify-center rounded-full",
+                feature.included
+                  ? "text-white dark:text-neutral-900"
+                  : "text-neutral-600 dark:text-neutral-500"
+              )}
+            >
+              <Check className="h-3.5 w-3.5" />
+            </div>
+            <span className="text-sm text-neutral-300 dark:text-neutral-600">
+              {feature.name}
+            </span>
+          </div>
+        ))}
+      </CardContent>
+      <CardFooter className="p-10 pt-0">
+        <Button
+          aria-label={cta}
+          className={cn(
+            "group relative h-12 w-full",
+            "bg-white text-neutral-900 dark:bg-neutral-900 dark:text-white",
+            "hover:bg-neutral-100 dark:hover:bg-neutral-800",
+            "border border-neutral-800 dark:border-neutral-200",
+            "hover:border-neutral-700 dark:hover:border-neutral-300"
+          )}
+        >
+          <span className="relative z-10 flex items-center justify-center gap-2 font-medium tracking-wide">
+            {cta}
+            <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+          </span>
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}

apps/www/registry/default/blocks/pricing-01/components/pricing-header.tsx

@@ -0,0 +1,19 @@
+import { cn } from "@/lib/utils"
+
+export function PricingHeader() {
+  return (
+    <div className="flex flex-col items-center justify-center space-y-4 py-10">
+      <h1
+        className={cn(
+          "text-4xl font-medium uppercase tracking-tighter",
+          "text-neutral-900 dark:text-white"
+        )}
+      >
+        Pricing
+      </h1>
+      <p className="text-lg text-neutral-500 dark:text-neutral-400">
+        Choose the plan that suits your needs
+      </p>
+    </div>
+  )
+}