{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-section-1",
  "title": "Pricing Section 1",
  "description": "Pricing table with billing toggle and feature tooltips",
  "registryDependencies": [
    "card",
    "button",
    "badge",
    "tabs",
    "tooltip",
    "https://shadcndesign-free.vercel.app/r/styles.json",
    "https://shadcndesign-free.vercel.app/r/tagline.json"
  ],
  "files": [
    {
      "path": "components/pro-blocks/landing-page/pricing-sections/pricing-section-1.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button, buttonVariants } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { Check, Info } from \"lucide-react\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n  TooltipProvider,\n} from \"@/components/ui/tooltip\";\nimport { Tagline } from \"@/components/pro-blocks/landing-page/tagline\";\nimport { VariantProps } from \"class-variance-authority\";\n\nconst pricingData = {\n  plans: [\n    {\n      name: \"Basic\",\n      description: \"Perfect for individuals and small projects\",\n      features: [\n        {\n          name: \"Up to 5 team members\",\n          tooltip:\n            \"Collaborate with up to 5 team members on unlimited projects\",\n        },\n        {\n          name: \"10GB storage space\",\n          tooltip: \"Secure cloud storage for all your project files and assets\",\n        },\n        {\n          name: \"Basic analytics\",\n          tooltip: \"Access to essential metrics and performance tracking\",\n        },\n      ],\n      pricing: {\n        monthly: 29,\n        annually: 290,\n      },\n      variant: \"secondary\",\n    },\n    {\n      name: \"Standard\",\n      description: \"Ideal for growing teams and businesses\",\n      badge: \"Most popular\",\n      features: [\n        {\n          name: \"Up to 20 team members\",\n          tooltip: \"Scale your team with expanded collaboration capabilities\",\n        },\n        {\n          name: \"50GB storage space\",\n          tooltip: \"More storage for larger projects and asset libraries\",\n        },\n        {\n          name: \"Advanced analytics\",\n          tooltip: \"Detailed insights with custom reporting and dashboards\",\n        },\n        {\n          name: \"Priority support\",\n          tooltip: \"Get help within 24 hours from our dedicated support team\",\n        },\n      ],\n      pricing: {\n        monthly: 49,\n        annually: 490,\n      },\n      variant: \"default\",\n      highlighted: true,\n    },\n    {\n      name: \"Premium\",\n      description: \"For large enterprises and advanced needs\",\n      features: [\n        {\n          name: \"Unlimited team members\",\n          tooltip: \"No limits on team size or collaboration\",\n        },\n        {\n          name: \"250GB storage space\",\n          tooltip: \"Enterprise-grade storage with advanced security\",\n        },\n        {\n          name: \"Custom analytics\",\n          tooltip: \"Tailored analytics solutions with API access\",\n        },\n        {\n          name: \"24/7 premium support\",\n          tooltip:\n            \"Round-the-clock dedicated support with 4-hour response time\",\n        },\n        {\n          name: \"White-labeling\",\n          tooltip: \"Custom branding and white-label solutions\",\n        },\n      ],\n      pricing: {\n        monthly: 99,\n        annually: 990,\n      },\n      variant: \"secondary\",\n    },\n  ],\n};\n\nexport function PricingSection1() {\n  const [billingPeriod, setBillingPeriod] = React.useState(\"monthly\");\n\n  return (\n    <section\n      className=\"bg-background section-padding-y\"\n      aria-labelledby=\"pricing-section-title\"\n    >\n      <div className=\"container-padding-x mx-auto max-w-7xl\">\n        <div className=\"flex flex-col items-center gap-8\">\n          <div className=\"section-title-gap-xl flex max-w-xl flex-col items-center text-center\">\n            <Tagline>Pricing section</Tagline>\n            <h1\n              id=\"pricing-section-title\"\n              className=\"heading-xl text-foreground\"\n            >\n              Choose your plan\n            </h1>\n            <p className=\"text-muted-foreground text-lg/8 text-pretty\">\n              Add a concise value statement that addresses price sensitivity and\n              showcases plan flexibility while keeping it under two lines.\n            </p>\n          </div>\n\n          <Tabs\n            value={billingPeriod}\n            onValueChange={setBillingPeriod}\n            className=\"w-fit\"\n          >\n            <TabsList className=\"bg-muted h-10 rounded-full\">\n              <TabsTrigger\n                value=\"monthly\"\n                className=\"data-[state=active]:bg-background rounded-full px-3 py-1.5 data-[state=active]:shadow-sm\"\n              >\n                Monthly\n              </TabsTrigger>\n              <TabsTrigger\n                value=\"annually\"\n                className=\"data-[state=active]:bg-background rounded-full px-3 py-1.5 data-[state=active]:shadow-sm\"\n              >\n                Annually <Badge variant=\"outline\">Save 20%</Badge>\n              </TabsTrigger>\n            </TabsList>\n          </Tabs>\n\n          <div className=\"grid w-full grid-cols-1 gap-4 lg:max-w-5xl lg:grid-cols-3\">\n            {pricingData.plans.map((plan, index) => (\n              <Card\n                key={plan.name}\n                className={`rounded-xl p-6 shadow-xs lg:p-8 ${plan.highlighted ? \"border-primary border-2\" : \"\"}`}\n              >\n                <CardContent className=\"flex flex-col gap-8 p-0\">\n                  <div className=\"flex flex-col gap-6\">\n                    <div className=\"relative flex flex-col gap-3\">\n                      {plan.badge && (\n                        <Badge className=\"absolute top-1 right-0 w-fit\">\n                          {plan.badge}\n                        </Badge>\n                      )}\n                      <h3\n                        className={`font-semibold ${plan.highlighted ? \"text-primary\" : \"\"}`}\n                      >\n                        {plan.name}\n                      </h3>\n                      <p className=\"text-muted-foreground\">\n                        {plan.description}\n                      </p>\n                    </div>\n\n                    <div className=\"flex items-end gap-0.5\">\n                      <span className=\"text-5xl font-medium tracking-tight\">\n                        $\n                        {\n                          plan.pricing[\n                            billingPeriod as keyof typeof plan.pricing\n                          ]\n                        }\n                      </span>\n                      <span className=\"text-muted-foreground text-base\">\n                        /{billingPeriod === \"monthly\" ? \"month\" : \"year\"}\n                      </span>\n                    </div>\n\n                    <Button\n                      variant={\n                        plan.variant as VariantProps<\n                          typeof buttonVariants\n                        >[\"variant\"]\n                      }\n                      className=\"w-full\"\n                      size=\"lg\"\n                    >\n                      Purchase plan\n                    </Button>\n                  </div>\n\n                  <div className=\"flex flex-col gap-4\">\n                    <p className=\"text-sm font-medium\">\n                      {index === 0\n                        ? \"What's included:\"\n                        : `Everything in ${pricingData.plans[index - 1].name}, plus:`}\n                    </p>\n                    <div className=\"flex flex-col gap-4\">\n                      {plan.features.map((feature, i) => (\n                        <div key={i} className=\"flex items-center gap-2\">\n                          <Check className=\"text-primary size-5\" />\n                          <span className=\"text-muted-foreground flex-1 text-sm leading-5 font-medium\">\n                            {feature.name}\n                          </span>\n                          <TooltipProvider>\n                            <Tooltip>\n                              <TooltipTrigger\n                                aria-label={`More information about ${feature.name}`}\n                              >\n                                <Info className=\"text-muted-foreground h-4 w-4 cursor-pointer opacity-70 hover:opacity-100\" />\n                              </TooltipTrigger>\n                              <TooltipContent className=\"max-w-xs\">\n                                <p>{feature.tooltip}</p>\n                              </TooltipContent>\n                            </Tooltip>\n                          </TooltipProvider>\n                        </div>\n                      ))}\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/pro-blocks/landing-page/pricing-sections/pricing-section-1.tsx"
    }
  ],
  "type": "registry:component"
}