{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-section-vertical",
  "type": "registry:ui",
  "title": "Pricing Section Vertical",
  "description": "A vertical pricing section component with feature comparisons, plan cards, and call-to-action buttons.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/ruixenui/pricing-section-vertical.tsx",
      "content": "\"use client\";\n\nimport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n} from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Check } from \"lucide-react\";\n\nexport function PricingSectionVertical() {\n  const plans = [\n    {\n      name: \"Starter\",\n      price: \"$0\",\n      period: \"/month\",\n      description: \"For individuals getting started\",\n      features: [\n        \"1 website project\",\n        \"Email support\",\n        \"Basic analytics dashboard\",\n        \"Community access\",\n      ],\n      highlight: false,\n    },\n    {\n      name: \"Professional\",\n      price: \"$29\",\n      period: \"/month\",\n      description: \"For growing businesses\",\n      features: [\n        \"5 active projects\",\n        \"Priority email support\",\n        \"SEO optimization tools\",\n        \"Content scheduling system\",\n        \"Advanced analytics\",\n      ],\n      highlight: true,\n    },\n    {\n      name: \"Enterprise\",\n      price: \"$99\",\n      period: \"/month\",\n      description: \"For large teams and enterprises\",\n      features: [\n        \"Unlimited projects\",\n        \"Dedicated success manager\",\n        \"Custom integrations\",\n        \"24/7 live support\",\n        \"Enterprise-grade security\",\n      ],\n      highlight: false,\n    },\n  ];\n\n  return (\n    <section className=\"w-full bg-background text-foreground py-16 md:py-24\">\n      <div className=\"max-w-7xl mx-auto grid md:grid-cols-2 gap-12 px-6\">\n        {/* LEFT SIDE */}\n        <div className=\"space-y-14\">\n          {/* Overview */}\n          <div>\n            <h4 className=\"text-sm uppercase tracking-widest text-muted-foreground mb-2\">\n              Services\n            </h4>\n            <h2 className=\"text-2xl md:text-3xl font-bold mb-3\">\n              Choose a plan that fits your growth.\n            </h2>\n            <p className=\"text-muted-foreground mb-4\">\n              Scale your digital presence with flexible pricing — from startups\n              to enterprises, we’ve got you covered with transparent,\n              value-driven plans.\n            </p>\n            <div className=\"flex items-center gap-2 border rounded-md w-fit px-3 py-2 text-sm text-muted-foreground\">\n              <Check className=\"w-4 h-4 text-primary\" />\n              All plans include onboarding and consultation.\n            </div>\n          </div>\n\n          <Separator className=\"my-8\" />\n\n          {/* Tailored Section */}\n          <div>\n            <h4 className=\"text-sm uppercase tracking-widest text-muted-foreground mb-2\">\n              Custom Solutions\n            </h4>\n            <h2 className=\"text-2xl md:text-3xl font-bold mb-3\">\n              Looking for something specific?\n            </h2>\n            <p className=\"text-muted-foreground\">\n              Get in touch for customized strategies, integrations, or\n              enterprise-level support built around your unique business goals.\n            </p>\n          </div>\n\n          <Separator className=\"my-8\" />\n\n          {/* Support */}\n          <div>\n            <h4 className=\"text-sm uppercase tracking-widest text-muted-foreground mb-2\">\n              Support\n            </h4>\n            <h2 className=\"text-2xl md:text-3xl font-bold mb-3\">\n              Continuous optimization\n            </h2>\n            <p className=\"text-muted-foreground\">\n              We provide ongoing performance reviews, campaign improvements, and\n              dedicated assistance to help your brand reach its full potential.\n            </p>\n          </div>\n        </div>\n\n        {/* RIGHT SIDE (Pricing Cards) */}\n        <div className=\"grid gap-6\">\n          {plans.map((plan, index) => (\n            <Card\n              key={index}\n              className={`border border-muted shadow-sm hover:shadow-md transition-all rounded-xl ${\n                plan.highlight ? \"border-primary shadow-lg\" : \"\"\n              }`}\n            >\n              <CardHeader className=\"flex flex-row items-center justify-between\">\n                <div>\n                  <CardTitle>{plan.name}</CardTitle>\n                  <CardDescription>{plan.description}</CardDescription>\n                </div>\n                <div className=\"text-right\">\n                  <p className=\"text-2xl font-bold\">\n                    {plan.price}\n                    <span className=\"text-base font-normal text-muted-foreground\">\n                      {plan.period}\n                    </span>\n                  </p>\n                </div>\n              </CardHeader>\n\n              <CardContent>\n                <ul className=\"grid gap-2 text-sm text-muted-foreground\">\n                  {plan.features.map((feature, i) => (\n                    <li key={i} className=\"flex items-center gap-2\">\n                      <Check className=\"w-4 h-4 text-primary shrink-0\" />\n                      <span>{feature}</span>\n                    </li>\n                  ))}\n                </ul>\n\n                <Button\n                  className=\"w-full mt-6\"\n                  variant={plan.highlight ? \"default\" : \"secondary\"}\n                >\n                  Get Started\n                </Button>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/pricing-section-vertical.tsx"
    }
  ]
}