{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-minimal",
  "type": "registry:block",
  "title": "Pricing Minimal",
  "description": "A clean three-tier pricing section with a highlighted popular plan.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": ["@scrollxui/button", "@scrollxui/card"],
  "dependencies": ["lucide-react", "motion"],
  "files": [
    {
      "type": "registry:component",
      "path": "registry/blocks/pricing-sections/pricing-minimal.tsx",
      "content": "'use client';\n\nimport { motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\nimport { Check } from 'lucide-react';\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\nimport { Button } from '@/components/ui/button';\n\ninterface PricingTier {\n  name: string;\n  price: number;\n  period: string;\n  features: string[];\n  buttonText: string;\n  popular?: boolean;\n  isCustom?: boolean;\n}\n\ninterface PricingMinimalProps {\n  title?: string;\n  subtitle?: string;\n  description?: string;\n  tiers?: PricingTier[];\n  className?: string;\n}\n\nconst defaultTiers: PricingTier[] = [\n  {\n    name: 'Free',\n    price: 0,\n    period: 'month',\n    features: ['1 store', 'Basic tracking', 'Limited predictions'],\n    buttonText: 'Start Free',\n    popular: false,\n  },\n  {\n    name: 'Pro',\n    price: 29,\n    period: 'month',\n    features: [\n      'Unlimited stores',\n      'Full AI predictions',\n      'Customer insights',\n      'Priority support',\n    ],\n    buttonText: 'Start Pro',\n    popular: true,\n  },\n  {\n    name: 'Custom',\n    price: 0,\n    period: '',\n    features: ['Everything in Pro', 'Team access', 'Custom integrations'],\n    buttonText: 'Contact Sales',\n    popular: false,\n    isCustom: true,\n  },\n];\n\nconst smoothEase = [0.25, 0.1, 0.25, 1] as const;\n\nexport default function PricingMinimal({\n  title = 'Choose your Pricing Plan',\n  subtitle = 'Pricing',\n  description = 'Pick a plan that suits your needs and get started instantly.',\n  tiers = defaultTiers,\n  className,\n}: PricingMinimalProps) {\n  return (\n    <section\n      className={cn(\n        'relative bg-zinc-50 dark:bg-zinc-950 w-full overflow-hidden py-20',\n        className\n      )}\n    >\n      <div className='mx-auto max-w-7xl px-4 sm:px-6'>\n        <div className='flex flex-col items-center text-center gap-4 mb-16'>\n          <motion.div\n            initial={{ opacity: 0, y: -12 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true }}\n            transition={{ duration: 0.8, ease: smoothEase }}\n            className='inline-flex items-center px-4 py-1.5 rounded-full bg-[#00ff9f]/10 dark:bg-[#00ff9f]/10 border border-[#00ff9f]/30'\n          >\n            <span className='text-sm text-[#00ff9f] font-medium'>{subtitle}</span>\n          </motion.div>\n\n          <motion.h2\n            initial={{ opacity: 0, y: 14 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true }}\n            transition={{ duration: 0.9, delay: 0.15, ease: smoothEase }}\n            className='text-4xl md:text-5xl lg:text-6xl font-bold text-zinc-900 dark:text-white'\n          >\n            {title}\n          </motion.h2>\n\n          <motion.p\n            initial={{ opacity: 0, y: 14 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true }}\n            transition={{ duration: 0.9, delay: 0.3, ease: smoothEase }}\n            className='text-lg text-zinc-500 dark:text-zinc-400 max-w-md'\n          >\n            {description}\n          </motion.p>\n        </div>\n\n        <div className='grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-6xl mx-auto'>\n          {tiers.map((tier, index) => (\n            <motion.div\n              key={tier.name}\n              initial={{ opacity: 0, y: 28 }}\n              whileInView={{ opacity: 1, y: 0 }}\n              viewport={{ once: true }}\n              transition={{ duration: 1.0, delay: 0.2 + index * 0.2, ease: smoothEase }}\n              className='min-w-0'\n            >\n              <Card\n                className={cn(\n                  'relative h-full rounded-3xl overflow-hidden min-w-0',\n                  tier.popular\n                    ? 'border-2 border-[#00ff9f]'\n                    : 'border-zinc-200 dark:border-zinc-800'\n                )}\n              >\n                {tier.popular && (\n                  <div className='absolute top-6 right-4 sm:right-6'>\n                    <span className='inline-flex items-center px-3 py-1 rounded-full bg-[#00ff9f] text-xs font-semibold text-black'>\n                      Popular\n                    </span>\n                  </div>\n                )}\n\n                <CardHeader className='px-4 sm:px-6 pt-6'>\n                  <CardTitle className='text-2xl font-bold text-zinc-900 dark:text-white mb-2'>\n                    {tier.name}\n                  </CardTitle>\n\n                  {tier.isCustom ? (\n                    <div className='text-3xl font-bold text-zinc-900 dark:text-white'>\n                      Contact Us\n                    </div>\n                  ) : (\n                    <div className='flex items-baseline gap-1 flex-wrap'>\n                      <span className='text-4xl sm:text-5xl font-bold text-zinc-900 dark:text-white'>\n                        ${tier.price}\n                      </span>\n                      <span className='text-zinc-500 dark:text-zinc-500'>/{tier.period}</span>\n                    </div>\n                  )}\n                </CardHeader>\n\n                <CardContent className='px-4 sm:px-6 flex flex-col gap-6'>\n                  <Button\n                    className={cn(\n                      'w-full rounded-xl font-semibold h-12',\n                      tier.popular\n                        ? 'bg-emerald-500 hover:bg-emerald-600 text-black'\n                        : 'bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-white'\n                    )}\n                  >\n                    {tier.buttonText}\n                  </Button>\n\n                  <div className='flex flex-col gap-4'>\n                    {tier.features.map((feature, featureIndex) => (\n                      <div key={featureIndex} className='flex items-start gap-3'>\n                        <Check className='w-5 h-5 text-zinc-400 dark:text-zinc-600 shrink-0 mt-0.5' />\n                        <span className='text-zinc-600 dark:text-zinc-400 text-sm sm:text-base'>{feature}</span>\n                      </div>\n                    ))}\n                  </div>\n                </CardContent>\n              </Card>\n            </motion.div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}"
    }
  ]
}