{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pricing", "title": "Pricing", "author": "AlgorizeTech", "description": "Ask the user to pick one of 12 pricing variants: https://avaraui.com/view/pricing. This item holds 12 of them as looks of one component (tiered-cards, elegant-cards, minimal-cards, bordered-cards, dot-matrix-cards, scale-cards, selectable-plans, quote-builder, service-checklist, usage-slider, comparison-table, typographic-menu). Skip the question if the user already named one. A complete pricing system with plan cards, a comparison table, an interactive plan builder and an interactive service checklist.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://avaraui.com/r/button.json", "https://avaraui.com/r/tilted-card.json", "https://avaraui.com/r/toggle-group.json", "utils" ], "files": [ { "path": "src/components/custom/blocks/Pricing.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n ArrowRight,\n Building,\n Check,\n CheckCircle2,\n Code2,\n HelpCircle,\n Minus,\n PenTool,\n Plus,\n Rocket,\n Sparkles,\n Star,\n Users,\n Zap,\n} from \"lucide-react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { type PricingColor, getThemeStyles } from \"./pricing-theme\";\nimport { ToggleGroup, ToggleGroupItem } from \"./ToggleGroupBlock\";\nimport Button from \"./Button\";\nimport { TiltedCard } from \"./TiltedCardBlock\";\nexport type PricingVariant =\n | \"default\"\n | \"dot-pattern\"\n | \"scale\"\n | \"plans-pro\"\n | \"elegant\"\n | \"minimal\"\n | \"bordered\"\n | \"builder\"\n | \"table\"\n | \"slider\"\n | \"typographic\"\n | \"plans\";\n\n// Two-tone leaf tree icon matching uploaded image (yellow/amber left leaf, bright green right leaf, dark trunk)\nconst SproutIcon = ({ className }: { className?: string }) => (\n \n {/* Central Trunk */}\n \n {/* Left Leaf - Golden/Amber */}\n \n {/* Right Leaf - Bright Green */}\n \n \n);\n\nconst iconMap: Record = {\n Rocket,\n Zap,\n Building,\n Users,\n Code2,\n PenTool,\n};\n\n// Animated Price Counter Component\nconst AnimatedPrice = ({\n value,\n counting = true,\n}: {\n value: number | string;\n counting?: boolean;\n}) => {\n const cleanValue = String(value);\n const numericValue = parseFloat(cleanValue.replace(/[^0-9.]/g, \"\"));\n const [displayValue, setDisplayValue] = useState(counting ? 0 : numericValue);\n\n useEffect(() => {\n // Both cases render the value directly, without reading state.\n if (!counting || isNaN(numericValue)) return;\n let startTime: number;\n const duration = 650;\n const startValue = 0;\n\n const animate = (time: number) => {\n if (!startTime) startTime = time;\n const progress = Math.min((time - startTime) / duration, 1);\n const easeProgress = 1 - Math.pow(1 - progress, 4);\n setDisplayValue(startValue + (numericValue - startValue) * easeProgress);\n if (progress < 1) requestAnimationFrame(animate);\n else setDisplayValue(numericValue);\n };\n requestAnimationFrame(animate);\n }, [numericValue, value, counting]);\n\n if (isNaN(numericValue)) return {cleanValue};\n if (!counting) return {cleanValue.replace(/[^0-9.]/g, \"\")};\n\n const isDecimal = cleanValue.includes(\".\");\n return (\n \n {isDecimal\n ? displayValue.toFixed(2)\n : Math.round(displayValue).toLocaleString()}\n \n );\n};\n\n// ==========================================\n// 1. PRICING CARDS (TIERED)\n// ==========================================\nexport interface Plan {\n id: string;\n title: string;\n subtitle: string;\n price: string;\n period: string;\n buttonText: string;\n popular: boolean;\n icon: string;\n features: string[];\n}\nexport interface PricingData {\n tabs: { id: string; label: string; plans: Plan[] }[];\n}\n\nexport function PricingCards({\n data,\n variant = \"default\",\n color = \"primary\",\n counting = true,\n title,\n subtitle,\n badgeText,\n linkComponent: LinkComp = \"a\",\n}: {\n data: PricingData;\n variant?: PricingVariant;\n color?: PricingColor;\n counting?: boolean;\n title?: string;\n subtitle?: string;\n badgeText?: string;\n linkComponent?: React.ElementType;\n}) {\n const [activeTab, setActiveTab] = useState(data.tabs[0]?.id || \"monthly\");\n const { theme, style } = getThemeStyles(color);\n\n const currentTab =\n data.tabs.find((t) => t.id === activeTab) || data.tabs[0];\n\n if (variant === \"dot-pattern\") {\n const convertedPlans: DotPatternPlanItem[] = currentTab.plans.map((p) => ({\n id: p.id,\n badgeTag: p.title.toUpperCase(),\n price: p.price.startsWith(\"$\") ? p.price : `$${p.price}`,\n period: p.period ? `/${p.period}` : undefined,\n description: p.subtitle,\n buttonText: p.buttonText,\n featured: p.popular,\n featuresTitle: \"What's included:\",\n features: p.features,\n }));\n return (\n \n );\n }\n\n if (variant === \"scale\") {\n const scaleFormattedPlans: { monthly: ScalePlanItem[]; annually: ScalePlanItem[] } & Record = {\n monthly: [],\n annually: [],\n };\n data.tabs.forEach((tab) => {\n scaleFormattedPlans[tab.id] = tab.plans.map((p) => ({\n id: p.id,\n title: p.title,\n subtitle: p.subtitle,\n price: p.price.startsWith(\"$\") ? p.price : `$${p.price}`,\n period: p.period ? `/${p.period}` : undefined,\n buttonText: p.buttonText,\n popular: p.popular,\n icon: p.icon,\n featuresTitle: \"WHAT'S INCLUDED:\",\n features: p.features,\n }));\n });\n return (\n \n );\n }\n\n if (variant === \"plans-pro\") {\n return (\n \n );\n }\n\n const defaultHeaders: Record<\n string,\n { badge: string; title: string; subtitle: string }\n > = {\n default: {\n badge: \"Subscription Tiers\",\n title: \"Flexible plans built for every stage of growth\",\n subtitle:\n \"Start small and upgrade as your audience expands. Switch between monthly and annual billing anytime.\",\n },\n elegant: {\n badge: \"Curated Editions\",\n title: \"Refined pricing for modern teams\",\n subtitle:\n \"Thoughtfully structured tiers with priority support and zero hidden platform fees.\",\n },\n minimal: {\n badge: \"01 / PRICING\",\n title: \"Pay only for what matters\",\n subtitle:\n \"No bloat, no complex contracts — straightforward monthly or annual subscriptions.\",\n },\n bordered: {\n badge: \"NO-NONSENSE PRICING\",\n title: \"Bold plans with zero surprises\",\n subtitle:\n \"Hard-hitting features, transparent flat rates, and instant setup for ambitious builders.\",\n },\n };\n\n const fallbackHeader = defaultHeaders[variant] || defaultHeaders.default;\n const resolvedBadge = badgeText ?? fallbackHeader.badge;\n const resolvedTitle = title ?? fallbackHeader.title;\n const resolvedSubtitle = subtitle ?? fallbackHeader.subtitle;\n\n return (\n
\n {(resolvedTitle || resolvedSubtitle || resolvedBadge) && (\n
\n {resolvedBadge && (\n <>\n {variant === \"elegant\" ? (\n \n \n \n {resolvedBadge}\n \n
\n ) : variant === \"minimal\" ? (\n
\n \n {resolvedBadge}\n
\n ) : variant === \"bordered\" ? (\n \n \n {resolvedBadge}\n
\n ) : (\n \n \n {resolvedBadge}\n \n )}\n \n )}\n {resolvedTitle && (\n \n {resolvedTitle}\n \n )}\n {resolvedSubtitle && (\n

\n {resolvedSubtitle}\n

\n )}\n \n )}\n\n {data.tabs.length > 1 && (\n
\n {/* Library ToggleGroup; an empty value (re-clicking the active\n tab) is ignored so one tab is always selected. */}\n {\n if (id) setActiveTab(id);\n }}\n aria-label=\"Billing period\"\n className=\"rounded-lg\"\n >\n {data.tabs.map((tab) => (\n \n {tab.label}\n \n ))}\n \n
\n )}\n\n
\n {currentTab.plans.map((plan) => {\n const IconComponent = iconMap[plan.icon] || Zap;\n const isPopular = plan.popular;\n\n const cardBody = (\n <>\n {isPopular && (\n \n Most Popular\n
\n )}\n\n
\n
\n \n \n
\n

\n {plan.title}\n

\n
\n\n

\n {plan.subtitle}\n

\n\n
\n \n \n \n \n /{plan.period}\n \n
\n\n
    \n {plan.features.map((feature, i) => (\n
  • \n \n {feature}\n
    • \n ))}\n
\n \n\n \n \n {plan.buttonText}\n \n \n \n );\n\n if (variant === \"default\" && isPopular) {\n return (\n
\n \n \n {cardBody}\n
\n \n \n );\n }\n\n return (\n \n {cardBody}\n \n );\n })}\n \n \n );\n}\n\n// ==========================================\n// 2. PRICING BUILDER (QUOTE BUILDER)\n// ==========================================\nexport interface PricingBuilderModule {\n id: string;\n name: string;\n price: number;\n}\n\nexport interface PricingBuilderProps {\n variant?: PricingVariant;\n badgeText?: string;\n title?: string;\n subtitle?: string;\n basePrice?: number;\n modules?: PricingBuilderModule[];\n defaultSelected?: string[];\n buttonText?: string;\n color?: PricingColor;\n counting?: boolean;\n className?: string;\n}\n\nconst DEFAULT_BUILDER_MODULES: PricingBuilderModule[] = [\n { id: \"auth\", name: \"User Authentication\", price: 15 },\n { id: \"db\", name: \"Database Storage\", price: 25 },\n { id: \"analytics\", name: \"Advanced Analytics\", price: 35 },\n { id: \"support\", name: \"24/7 SLA Support\", price: 50 },\n { id: \"domain\", name: \"Custom Domain & SSL\", price: 10 },\n];\n\nexport function PricingBuilder({\n badgeText = \"Modular Stack\",\n title = \"Custom Quote Builder\",\n subtitle = \"Select only the modules you need for your project.\",\n basePrice = 29,\n modules = DEFAULT_BUILDER_MODULES,\n defaultSelected = [\"auth\", \"db\"],\n buttonText = \"Deploy Custom Stack\",\n color = \"primary\",\n counting = true,\n className,\n}: PricingBuilderProps) {\n const [selectedModules, setSelectedModules] = useState(defaultSelected);\n const { theme, style } = getThemeStyles(color);\n\n const toggleModule = (id: string) => {\n setSelectedModules((prev) =>\n prev.includes(id) ? prev.filter((m) => m !== id) : [...prev, id],\n );\n };\n\n const totalPrice = selectedModules.reduce((acc, curr) => {\n const mod = modules.find((m) => m.id === curr);\n return acc + (mod?.price || 0);\n }, basePrice);\n\n return (\n \n
\n {badgeText && (\n \n \n {badgeText}\n
\n )}\n

\n {title}\n

\n

\n {subtitle}\n

\n \n\n
\n
\n {modules.map((mod) => {\n const isSelected = selectedModules.includes(mod.id);\n return (\n toggleModule(mod.id)}\n className={cn(\n \"p-4 rounded-lg border transition-all cursor-pointer flex items-center justify-between\",\n isSelected\n ? cn(theme.border, theme.bgSoft, \"shadow-sm\")\n : \"border-border bg-background hover:bg-muted/50\",\n )}\n >\n
\n \n {isSelected && }\n
\n \n {mod.name}\n \n
\n \n +${mod.price}/mo\n \n
\n );\n })}\n \n\n
\n
\n \n Estimated Total\n \n
\n \n \n \n /month\n
\n

\n Base tier includes core infrastructure (${basePrice}/mo). Cancel or alter your plan modules anytime.\n

\n
\n\n \n {buttonText}\n \n
\n \n \n );\n}\n\n// ==========================================\n// 3. PRICING TABLE (COMPARISON)\n// ==========================================\nexport interface TableFeature {\n name: string;\n values: (string | boolean)[];\n helpText?: string;\n}\nexport interface TableSection {\n title: string;\n features: TableFeature[];\n}\nexport interface PricingTableData {\n plans: {\n id: string;\n title: string;\n price: string;\n buttonText: string;\n featured?: boolean;\n }[];\n sections: TableSection[];\n}\n\nexport interface PricingTableProps {\n variant?: PricingVariant;\n badgeText?: string;\n title?: string;\n subtitle?: string;\n data: PricingTableData;\n color?: PricingColor;\n counting?: boolean;\n linkComponent?: React.ElementType;\n}\n\nexport function PricingTable({\n badgeText = \"Feature Matrix\",\n title = \"Compare every plan in detail\",\n subtitle = \"Inspect limits, security controls, and support SLAs side by side across all tiers.\",\n data,\n color = \"primary\",\n counting = true,\n}: PricingTableProps) {\n const { theme, style } = getThemeStyles(color);\n const renderFeatureValue = (value: string | boolean) => {\n if (value === true)\n return ;\n if (value === false)\n return (\n \n );\n return (\n \n {value}\n \n );\n };\n\n const FeatureLabel = ({ feature }: { feature: TableFeature }) => (\n <>\n {feature.name}\n {feature.helpText && (\n \n \n \n {feature.helpText}\n \n \n )}\n \n );\n\n return (\n
\n
\n {(badgeText || title || subtitle) && (\n
\n {badgeText && (\n
\n \n {badgeText}\n
\n )}\n {title && (\n

\n {title}\n

\n )}\n {subtitle && (\n

\n {subtitle}\n

\n )}\n
\n )}\n {data.plans.map((plan, pIdx) => (\n \n \n \n {plan.title}\n \n
\n {plan.price.startsWith(\"$\") ? \"$\" : \"\"}\n \n
\n \n {plan.buttonText}\n \n
\n {data.sections.map((section, sIdx) => (\n
\n
\n {section.title}\n
\n {section.features.map((feature, fIdx) => (\n \n \n \n \n \n {renderFeatureValue(feature.values[pIdx])}\n \n
\n ))}\n
\n ))}\n \n ))}\n \n\n
\n {(badgeText || title || subtitle) && (\n
\n
\n {badgeText && (\n
\n \n {badgeText}\n
\n )}\n {title && (\n

\n {title}\n

\n )}\n {subtitle && (\n

\n {subtitle}\n

\n )}\n
\n
\n )}\n
\n
\n
\n
\n

\n Compare Plans\n

\n
\n {data.plans.map((plan) => (\n \n {plan.featured && (\n \n )}\n \n {plan.title}\n \n
\n {plan.price.startsWith(\"$\") ? \"$\" : \"\"}\n \n
\n \n {plan.buttonText}\n \n
\n ))}\n
\n {data.sections.map((section, sIdx) => (\n
\n
\n
\n {section.title}\n
\n
\n
\n
\n
\n {section.features.map((feature, fIdx) => (\n \n
\n \n
\n {feature.values.map((val, vIdx) => (\n \n {renderFeatureValue(val)}\n
\n ))}\n
\n ))}\n
\n ))}\n \n \n \n \n );\n}\n\n// ==========================================\n// 4. USAGE SLIDER\n// ==========================================\nexport interface PricingSliderProps {\n variant?: PricingVariant;\n badgeText?: string;\n title?: string;\n subtitle?: string;\n basePrice?: number;\n pricePerStep?: number;\n minViews?: string;\n maxViews?: string;\n buttonText?: string;\n color?: PricingColor;\n counting?: boolean;\n className?: string;\n}\n\nexport function PricingSlider({\n badgeText = \"Pay As You Grow\",\n title = \"Usage Based Pricing\",\n subtitle = \"Scale your pricing as your traffic grows.\",\n basePrice = 29,\n pricePerStep = 10,\n minViews = \"10k Views\",\n maxViews = \"1M+ Views\",\n buttonText = \"Start 14-Day Free Trial\",\n color = \"primary\",\n counting = true,\n className,\n}: PricingSliderProps) {\n const [value, setValue] = useState(5);\n const { theme, style } = getThemeStyles(color);\n const calculatedPrice = basePrice + value * pricePerStep;\n const pageviews =\n value === 0 ? \"10k\" : value === 10 ? \"1M+\" : `${value * 100}k`;\n const percentage = (value / 10) * 100;\n\n return (\n \n {badgeText && (\n
\n \n \n \n \n \n {badgeText}\n
\n )}\n

\n {title}\n

\n

\n {subtitle}\n

\n
\n
\n $\n
\n

\n Per Month\n

\n
\n
\n
\n {minViews}\n \n {pageviews} Views\n \n {maxViews}\n
\n \n {/* Modern Custom Range Slider */}\n
\n {/* Custom Track Background */}\n
\n \n
\n\n {/* Invisible Range Input Overlay */}\n setValue(parseInt(e.target.value, 10))}\n className=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer z-20\"\n aria-label=\"Usage pageviews volume\"\n />\n\n {/* Custom Thumb Handle */}\n \n
\n
\n
\n
\n \n {buttonText}\n \n

\n No credit card required. Cancel anytime.\n

\n \n );\n}\n\n// ==========================================\n// 5. TYPOGRAPHIC MENU\n// ==========================================\nexport interface PricingTypographicPlan {\n id: string | number;\n name: string;\n price: string | number;\n description: string;\n features: string[];\n isFeatured: boolean;\n billingCycle?: \"monthly\" | \"yearly\" | string;\n}\n\n/** Plans already split by billing cycle, optionally one level down. */\nexport interface PricingTypographicGroups {\n monthly?: PricingTypographicPlan[];\n yearly?: PricingTypographicPlan[];\n packages?: PricingTypographicGroups;\n data?: PricingTypographicGroups;\n}\n\n/**\n * Either a flat list, where each plan carries its own `billingCycle`, or a\n * grouped object. Both are accepted; the block sorts it out.\n */\nexport type PricingTypographicPackages =\n | PricingTypographicPlan[]\n | PricingTypographicGroups;\n\nexport interface PricingTypographicProps {\n variant?: PricingVariant;\n packages: PricingTypographicPackages;\n color?: PricingColor;\n counting?: boolean;\n linkComponent?: React.ElementType;\n}\n\nexport function PricingTypographic({\n packages,\n color = \"primary\",\n counting = true,\n linkComponent: LinkComp = \"a\",\n}: PricingTypographicProps) {\n const [billingCycle, setBillingCycle] = useState<\"monthly\" | \"yearly\">(\n \"monthly\",\n );\n const [selectedPlanId, setSelectedPlanId] = useState(\n null,\n );\n const { theme, style } = getThemeStyles(color);\n\n let monthlyPlans: PricingTypographicPlan[] = [];\n let yearlyPlans: PricingTypographicPlan[] = [];\n\n if (Array.isArray(packages)) {\n monthlyPlans = packages.filter(\n (p) => p.billingCycle?.toLowerCase() === \"monthly\",\n );\n yearlyPlans = packages.filter(\n (p) => p.billingCycle?.toLowerCase() === \"yearly\",\n );\n } else if (packages && typeof packages === \"object\") {\n monthlyPlans =\n packages.monthly ||\n packages.packages?.monthly ||\n packages.data?.monthly ||\n [];\n yearlyPlans =\n packages.yearly ||\n packages.packages?.yearly ||\n packages.data?.yearly ||\n [];\n }\n\n const activePlans = billingCycle === \"monthly\" ? monthlyPlans : yearlyPlans;\n const hasYearlyPlans = yearlyPlans.length > 0;\n\n const defaultPlan =\n activePlans.find((p) => p.isFeatured) ?? activePlans[0] ?? null;\n const activePlanId =\n selectedPlanId ?? (defaultPlan ? defaultPlan.id : null);\n\n const activePlan =\n activePlans.find((p) => p.id === activePlanId) || activePlans[0];\n\n const handleToggleCycle = (cycle: \"monthly\" | \"yearly\") => {\n setBillingCycle(cycle);\n const newPlans = cycle === \"monthly\" ? monthlyPlans : yearlyPlans;\n if (newPlans.length > 0) {\n const newFeatured = newPlans.find((p) => p.isFeatured) || newPlans[0];\n setSelectedPlanId(newFeatured.id);\n }\n };\n\n if (!packages) {\n return (\n
\n \n
\n );\n }\n\n if (!activePlans.length) {\n return (\n
\n No pricing plans available.\n
\n );\n }\n\n return (\n \n \n\n
\n
\n
\n

\n \n \n Pricing\n \n

\n

\n Pricing Model.\n

\n

\n Transparent, value-driven pricing designed for high-growth brands.\n Select a tier to explore what's included.\n

\n
\n\n {hasYearlyPlans && (\n // The library's ToggleGroup in single mode. Re-clicking the active\n // cycle would clear it, so an empty value is ignored — one of the\n // two is always chosen.\n {\n if (cycle) handleToggleCycle(cycle as \"monthly\" | \"yearly\");\n }}\n aria-label=\"Billing cycle\"\n className=\"shrink-0 rounded-lg\"\n >\n {([\"monthly\", \"yearly\"] as const).map((cycle) => (\n \n {cycle}\n \n ))}\n \n )}\n
\n\n {/* DESKTOP CANVAS */}\n
\n {/* LEFT: NAVIGATION */}\n
\n {activePlans.map((plan) => {\n const isActive = activePlanId === plan.id;\n return (\n setSelectedPlanId(plan.id)}\n onClick={() => setSelectedPlanId(plan.id)}\n className=\"group flex flex-col items-start text-left w-full py-4 pr-4 cursor-pointer\"\n >\n \n {plan.isFeatured && (\n \n ✦ Most Popular\n \n )}\n \n {plan.name}\n \n
\n \n );\n })}\n
\n\n {/* RIGHT: CONTENT */}\n
\n {activePlan && (\n \n {activePlan.isFeatured && (\n \n )}\n\n
\n $\n
\n\n
\n {activePlan.isFeatured && (\n \n \n Recommended\n
\n )}\n\n
\n \n $\n \n \n \n \n
\n

\n {activePlan.description}\n

\n
\n\n
\n {activePlan.features.map((feature: string, i: number) => (\n \n \n \n {feature}\n \n
\n ))}\n
\n\n \n \n Initiate Project\n \n \n \n )}\n \n \n\n {/* MOBILE FALLBACK */}\n
\n {activePlans.map((plan) => {\n const isActive = activePlanId === plan.id;\n return (\n \n setSelectedPlanId(isActive ? null : plan.id)}\n className=\"w-full py-6 md:py-8 flex justify-between items-center text-left\"\n >\n
\n {plan.isFeatured && (\n \n ✦ Most Popular\n \n )}\n \n {plan.name}\n \n
\n \n \n
\n \n\n \n
\n
\n {plan.isFeatured && (\n \n )}\n\n
\n \n $\n \n \n \n \n
\n\n

\n {plan.description}\n

\n\n
\n {plan.features.map((feature: string, i: number) => (\n \n \n \n {feature}\n \n
\n ))}\n
\n\n \n \n Initiate Project\n \n \n
\n \n \n \n );\n })}\n \n \n \n );\n}\n\n// ==========================================\n// 6. PRICING PLANS (INTERACTIVE CHECKLIST)\n// ==========================================\nexport interface PricingServiceOption {\n id: string;\n name: string;\n description: string;\n price: number;\n icon?: string | React.ReactNode;\n tag?: string;\n features?: string[];\n}\n\nexport interface PricingPlansProps {\n variant?: PricingVariant;\n badgeText?: string;\n title?: string;\n subtitle?: string;\n highlightText?: string;\n brandTitle?: string;\n brandSubtitle?: string;\n brandDescription?: string;\n services?: PricingServiceOption[];\n defaultActiveIds?: string[];\n ctaText?: string;\n ctaHref?: string;\n color?: PricingColor;\n counting?: boolean;\n linkComponent?: React.ElementType;\n}\n\nconst defaultPlansServices: PricingServiceOption[] = [\n {\n id: \"design\",\n name: \"Design\",\n description: \"Top-notch custom design\",\n price: 300,\n icon: \"PenTool\",\n features: [\n \"Top-notch custom design\",\n \"Figma design & interactive prototype\",\n \"3 rounds of revisions\",\n \"1 month of free support\",\n ],\n },\n {\n id: \"development\",\n name: \"Development\",\n description: \"Full development solution\",\n price: 400,\n icon: \"Code2\",\n features: [\n \"Framer/Custom development\",\n \"Avg. 1 week turnaround\",\n \"5 rounds of revisions\",\n \"2 months of free support\",\n ],\n },\n {\n id: \"fast\",\n name: \"Fast\",\n description: \"Quick budget solution\",\n price: 100,\n icon: \"Zap\",\n tag: \"Fast Track\",\n features: [\n \"Fast delivery (3X everything)\",\n \"Quick delivery solution\",\n ],\n },\n];\n\nconst renderPlansIcon = (icon?: string | React.ReactNode) => {\n if (React.isValidElement(icon)) return icon;\n const iconStr = typeof icon === \"string\" ? icon.toLowerCase() : \"\";\n switch (iconStr) {\n case \"code\":\n case \"code2\":\n case \"development\":\n return ;\n case \"zap\":\n case \"fast\":\n case \"lightning\":\n return ;\n case \"rocket\":\n return ;\n case \"building\":\n return ;\n case \"design\":\n case \"pentool\":\n default:\n return ;\n }\n};\n\nconst computeCardData = (services: PricingServiceOption[], activeIds: string[]) => {\n const activeServices = services.filter((s) => activeIds.includes(s.id));\n\n if (activeServices.length === 0) {\n return {\n title: \"No Service Selected\",\n tag: null,\n price: 0,\n features: [\n \"Select the modules above to build your custom package and instantly see your quote.\",\n ],\n };\n }\n\n const price = activeServices.reduce((sum, s) => sum + s.price, 0);\n const title = activeServices.map((s) => s.name).join(\" & \");\n const tag =\n activeServices.find((s) => s.tag)?.tag ||\n (activeServices.length > 1 ? \"Custom Package\" : \"Standard\");\n\n const featuresSet = new Set();\n activeServices.forEach((s) => {\n s.features?.forEach((f) => featuresSet.add(f));\n });\n\n return {\n title,\n tag,\n price,\n features: Array.from(featuresSet),\n };\n};\n\n/** GSAP's power3.out, sampled for CSS / WAAPI. */\nconst POWER3_OUT =\n \"linear(0, .1945, .3591, .4971, .6115, .7052, .7808, .8409, .8877, .9233, .9497, .9686, .9816, .9901, .9952, .998, .9994, .9999, 1, 1)\";\n\nexport function PricingPlans({\n badgeText = \"Tailored Studio\",\n title = \"Pricing Plans\",\n subtitle = \"For each plan we\",\n highlightText = \"Outperform\",\n brandTitle = \"Custom Services\",\n brandSubtitle = \"Select options tailored to your goals\",\n brandDescription = \"Mix and match custom design, full-stack development, and priority delivery to build the ideal package for your business.\",\n services = defaultPlansServices,\n defaultActiveIds = [\"design\"],\n ctaText = \"Book a 45-min call\",\n ctaHref = \"#\",\n color = \"primary\",\n counting = true,\n linkComponent: Link = \"a\",\n}: PricingPlansProps = {}) {\n const { theme, style } = getThemeStyles(color);\n const [activePlans, setActivePlans] = useState(defaultActiveIds);\n const cardData = computeCardData(services, activePlans);\n const hasSelection = activePlans.length > 0;\n\n const cardContentRef = useRef(null);\n\n const togglePlan = (id: string) => {\n setActivePlans((prev) =>\n prev.includes(id) ? prev.filter((p) => p !== id) : [...prev, id],\n );\n };\n\n useEffect(() => {\n const el = cardContentRef.current;\n if (!el || typeof el.animate !== \"function\") return;\n const animation = el.animate(\n [\n { opacity: 0, transform: \"translateY(15px)\" },\n { opacity: 1, transform: \"translateY(0px)\" },\n ],\n { duration: 400, easing: POWER3_OUT },\n );\n return () => animation.cancel();\n }, [activePlans]);\n\n return (\n
\n
\n
\n {badgeText && (\n \n \n {badgeText}\n
\n )}\n

\n {title}\n

\n

\n {subtitle}{\" \"}\n {highlightText}\n

\n \n\n
\n
\n
\n

\n {brandTitle}\n

\n

\n {brandSubtitle}\n

\n

\n {brandDescription}\n

\n
\n\n
\n {services.map((service) => {\n const isActive = activePlans.includes(service.id);\n return (\n \n
\n \n {renderPlansIcon(service.icon)}\n
\n
\n

\n {service.name}\n

\n

\n {service.description}\n

\n
\n
\n togglePlan(service.id)}\n className={cn(\n \"cursor-pointer w-12 h-7 sm:w-14 sm:h-8 flex items-center rounded-full p-1 transition-colors duration-300 shrink-0\",\n isActive ? theme.bg : \"bg-foreground/15\",\n )}\n >\n \n
\n
\n );\n })}\n \n \n\n
\n
\n
\n

\n {cardData.title}\n

\n {cardData.tag && (\n \n {cardData.tag}\n \n )}\n
\n\n
\n \n $\n \n
\n\n
    \n {cardData.features.map((feature, idx) => (\n
  • \n \n \n {feature}\n \n
    • \n ))}\n
\n
\n\n \n \n {ctaText}\n \n \n
\n \n \n
\n );\n}\n\n// ==========================================\n// 7. PRICING SCALE (MODERN CREATOR & SCALE CARDS)\n// ==========================================\nexport interface ScalePlanItem {\n id: string;\n title: string;\n subtitle: string;\n price: string;\n period?: string;\n buttonText: string;\n popular?: boolean;\n popularBadgeText?: string;\n icon?: string;\n featuresTitle?: string;\n features: string[];\n}\n\nexport interface PricingScaleProps {\n variant?: PricingVariant;\n badgeText?: string;\n title?: string;\n subtitle?: string;\n monthlyLabel?: string;\n annuallyLabel?: string;\n annualDiscountText?: string;\n plans?: {\n monthly: ScalePlanItem[];\n annually: ScalePlanItem[];\n };\n footerTitle?: string;\n footerSubtitle?: string;\n footerCtaText?: string;\n footerCtaHref?: string;\n color?: PricingColor;\n counting?: boolean;\n linkComponent?: React.ElementType;\n}\n\nconst defaultScalePlans = {\n monthly: [\n {\n id: \"launch\",\n title: \"Launch Plan\",\n subtitle: \"Ideal for startups and solo marketers\",\n price: \"$299.00\",\n period: \"/Month\",\n buttonText: \"Start with Launch\",\n popular: false,\n icon: \"Rocket\",\n featuresTitle: \"WHAT'S INCLUDED:\",\n features: [\n \"Up to 10,000 subscribers\",\n \"5 automation workflows\",\n \"Basic A/B testing\",\n \"Email support\",\n \"Drag-and-drop builder\",\n ],\n },\n {\n id: \"scale\",\n title: \"Scale Plan\",\n subtitle: \"For growing teams ready to accelerate\",\n price: \"$899.00\",\n period: \"/Month\",\n buttonText: \"Upgrade to Scale\",\n popular: true,\n popularBadgeText: \"Most Popular\",\n icon: \"Sprout\",\n featuresTitle: \"INCLUDED EVERYTHING IN LAUNCH, PLUS:\",\n features: [\n \"Unlimited automation workflows\",\n \"Advanced segmentation & analytics\",\n \"Priority live chat support\",\n \"Custom branded templates\",\n \"Dedicated onboarding\",\n ],\n },\n ],\n annually: [\n {\n id: \"launch-annual\",\n title: \"Launch Plan\",\n subtitle: \"Ideal for startups and solo marketers\",\n price: \"$269.00\",\n period: \"/Month\",\n buttonText: \"Start with Launch\",\n popular: false,\n icon: \"Rocket\",\n featuresTitle: \"WHAT'S INCLUDED:\",\n features: [\n \"Up to 10,000 subscribers\",\n \"5 automation workflows\",\n \"Basic A/B testing\",\n \"Email support\",\n \"Drag-and-drop builder\",\n ],\n },\n {\n id: \"scale-annual\",\n title: \"Scale Plan\",\n subtitle: \"For growing teams ready to accelerate\",\n price: \"$809.00\",\n period: \"/Month\",\n buttonText: \"Upgrade to Scale\",\n popular: true,\n popularBadgeText: \"Most Popular\",\n icon: \"Sprout\",\n featuresTitle: \"INCLUDED EVERYTHING IN LAUNCH, PLUS:\",\n features: [\n \"Unlimited automation workflows\",\n \"Advanced segmentation & analytics\",\n \"Priority live chat support\",\n \"Custom branded templates\",\n \"Dedicated onboarding\",\n ],\n },\n ],\n};\n\nexport function PricingScale({\n badgeText = \"PRICING\",\n title = \"Pricing That Scales With You\",\n subtitle = \"From solo creators to enterprise teams, pick the plan that matches your ambitions.\",\n monthlyLabel = \"MONTHLY\",\n annuallyLabel = \"ANNUALLY\",\n annualDiscountText = \"(SAVE 10%)\",\n plans = defaultScalePlans,\n footerTitle = \"Need help choosing the right plan?\",\n footerSubtitle = \"Schedule a complimentary 20-minute strategy call with our team.\",\n footerCtaText = \"Book a Free Strategy Call\",\n footerCtaHref = \"#\",\n color = \"primary\",\n counting = true,\n linkComponent: LinkComp = \"a\",\n}: PricingScaleProps = {}) {\n const [billingCycle, setBillingCycle] = useState<\"monthly\" | \"annually\">(\"monthly\");\n const { theme, style } = getThemeStyles(color);\n const currentPlans = plans[billingCycle] || plans.monthly;\n\n return (\n
\n
\n {/* Header */}\n
\n {badgeText && (\n
\n \n {badgeText}\n
\n )}\n

\n {title}\n

\n

\n {subtitle}\n

\n\n {/* Toggle switch */}\n
\n \n {monthlyLabel}\n \n setBillingCycle((prev) => (prev === \"monthly\" ? \"annually\" : \"monthly\"))}\n className={cn(\n \"relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none\",\n billingCycle === \"annually\" ? theme.bg : \"bg-muted\"\n )}\n role=\"switch\"\n aria-checked={billingCycle === \"annually\"}\n >\n \n \n \n {annuallyLabel} {annualDiscountText}\n \n
\n
\n\n {/* Card Container Grid */}\n
\n {currentPlans.map((plan) => {\n const isPopular = plan.popular;\n return (\n \n {/* Top header area */}\n
\n
\n
\n {plan.icon === \"Sprout\" ? (\n \n ) : (\n \n )}\n
\n\n {isPopular && (\n
\n \n {plan.popularBadgeText || \"Most Popular\"}\n
\n )}\n
\n\n

\n {plan.title}\n

\n

\n {plan.subtitle}\n

\n\n
\n \n \n \n {plan.period && (\n \n {plan.period}\n \n )}\n
\n\n {/* Features list */}\n {plan.featuresTitle && (\n

\n {plan.featuresTitle}\n

\n )}\n\n
    \n {plan.features.map((feature, idx) => (\n
  • \n \n {feature}\n
    • \n ))}\n
\n
\n\n {/* Button */}\n \n \n {plan.buttonText}\n \n \n
\n );\n })}\n
\n\n {/* Footer Banner */}\n
\n
\n

\n {footerTitle}\n

\n

\n {footerSubtitle}\n

\n
\n \n \n {footerCtaText}\n \n \n
\n \n
\n );\n}\n\n// ==========================================\n// 8. PRICING DOT PATTERN (DOT MATRIX GRADIENT CARDS)\n// ==========================================\nexport interface DotPatternPlanItem {\n id: string;\n badgeTag: string;\n price: string;\n period?: string;\n description: string;\n buttonText: string;\n featured?: boolean;\n featuresTitle?: string;\n features: string[];\n ctaHref?: string;\n}\n\nexport interface PricingDotPatternProps {\n variant?: PricingVariant;\n badgeText?: string;\n title?: string;\n subtitle?: string;\n plans?: DotPatternPlanItem[];\n color?: PricingColor;\n counting?: boolean;\n linkComponent?: React.ElementType;\n}\n\nconst defaultDotPatternPlans: DotPatternPlanItem[] = [\n {\n id: \"basic\",\n badgeTag: \"BASIC\",\n price: \"$199\",\n period: \"/month\",\n description: \"Basic tools for content generation. Best for one just trying out.\",\n buttonText: \"Get Started\",\n featured: false,\n featuresTitle: \"What's included:\",\n features: [\n \"1 project\",\n \"Up to 3 pages\",\n \"Email support\",\n \"Basic analytics\",\n ],\n },\n {\n id: \"starter\",\n badgeTag: \"STARTER\",\n price: \"$299\",\n period: \"/month\",\n description: \"Advanced tools for consistent content generation. Best for one getting started.\",\n buttonText: \"Get Started\",\n featured: true,\n featuresTitle: \"What's included:\",\n features: [\n \"1 project\",\n \"Up to 3 pages\",\n \"Email support\",\n \"Basic analytics\",\n ],\n },\n {\n id: \"pro\",\n badgeTag: \"PRO\",\n price: \"$599\",\n period: \"/month\",\n description: \"Advanced tools for consistent content generation, unlimited credits. Best for teams\",\n buttonText: \"Get Started\",\n featured: false,\n featuresTitle: \"What's included:\",\n features: [\n \"1 project\",\n \"Up to 3 pages\",\n \"Email support\",\n \"Basic analytics\",\n ],\n },\n];\n\nexport function PricingDotPattern({\n badgeText = \"Pricing\",\n title = \"Simple, transparent pricing that helps you scale.\",\n subtitle = \"Select any plan that suits you and kick start your content creation journey with us\",\n plans = defaultDotPatternPlans,\n color = \"primary\",\n counting = true,\n linkComponent: LinkComp = \"a\",\n}: PricingDotPatternProps = {}) {\n const { theme, style } = getThemeStyles(color);\n\n return (\n \n
\n {/* Header */}\n
\n {badgeText && (\n
\n \n {badgeText}\n
\n )}\n

\n {title}\n

\n

\n {subtitle}\n

\n
\n\n {/* Cards Grid */}\n
\n {plans.map((plan) => {\n const isFeatured = plan.featured;\n return (\n \n {/* Dot Matrix Background Pattern positioned at top header section matching sample image */}\n \n\n {/* 4 Corner Angle Brackets following rounded card edges */}\n \n \n \n \n\n {/* Card Content */}\n
\n
\n {/* Badge Tag */}\n \n {plan.badgeTag}\n \n\n {/* Price */}\n
\n \n \n \n {plan.period && (\n \n {plan.period}\n \n )}\n
\n\n {/* Description */}\n

\n {plan.description}\n

\n\n {/* Button */}\n \n \n {plan.buttonText}\n \n \n\n {/* Features List Header */}\n {plan.featuresTitle && (\n

\n {plan.featuresTitle}\n

\n )}\n\n {/* Features Item */}\n
    \n {plan.features.map((feature, idx) => (\n
  • \n \n {feature}\n
    • \n ))}\n
\n
\n
\n
\n );\n })}\n
\n \n \n );\n}\n\n// ==========================================\n// 9. PRICING PLANS PRO (SELECTABLE PLAN + USERS STEPPER)\n// ==========================================\nexport interface PlansProItem {\n id: string;\n title: string;\n subtitle: string;\n monthlyPrice: number | string;\n yearlyPrice: number | string;\n monthlyPeriod?: string;\n yearlyPeriod?: string;\n features: string[];\n}\n\nexport interface PricingPlansProProps {\n variant?: PricingVariant;\n badgeText?: string;\n title?: string;\n subtitle?: string;\n monthlyLabel?: string;\n yearlyLabel?: string;\n discountBadge?: string;\n plans?: PlansProItem[];\n defaultBillingCycle?: \"monthly\" | \"yearly\";\n defaultSelectedPlanId?: string;\n defaultUsers?: number;\n minUsers?: number;\n maxUsers?: number;\n usersLabel?: string;\n usersSubtext?: string;\n orderButtonText?: string;\n orderHref?: string;\n scalePriceWithUsers?: boolean;\n layoutMode?: \"responsive\" | \"horizontal\" | \"vertical\";\n color?: PricingColor;\n counting?: boolean;\n linkComponent?: React.ElementType;\n className?: string;\n compact?: boolean;\n onOrder?: (payload: {\n plan: PlansProItem;\n billingCycle: \"monthly\" | \"yearly\";\n users: number;\n totalPrice: number;\n }) => void;\n}\n\nconst PLANS_PRO_RING_MASK: React.CSSProperties = {\n WebkitMask: \"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)\",\n WebkitMaskComposite: \"xor\",\n mask: \"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)\",\n maskComposite: \"exclude\",\n};\n\n/** 4 glowing border lines spaced 90° apart orbiting around the selected package card */\nconst PLANS_PRO_FOUR_BEAM_GRADIENT =\n \"conic-gradient(from 0deg, transparent 0deg, currentColor 32deg, transparent 62deg, transparent 90deg, currentColor 122deg, transparent 152deg, transparent 180deg, currentColor 212deg, transparent 242deg, transparent 270deg, currentColor 302deg, transparent 332deg)\";\n\nconst PlansProUserIcon = ({ className }: { className?: string }) => (\n \n \n \n \n \n);\n\nconst defaultPlansProItems: PlansProItem[] = [\n {\n id: \"starter\",\n title: \"Starter\",\n subtitle: \"creator\",\n monthlyPrice: 9.0,\n yearlyPrice: 7.0,\n monthlyPeriod: \"Month\",\n yearlyPeriod: \"Year\",\n features: [\n \"500GB Cloud Storage\",\n \"14-day version history\",\n \"End-to-end TLS encryption\",\n ],\n },\n {\n id: \"growth\",\n title: \"Growth\",\n subtitle: \"studio\",\n monthlyPrice: 15.0,\n yearlyPrice: 12.0,\n monthlyPeriod: \"Month\",\n yearlyPeriod: \"Year\",\n features: [\n \"2TB Cloud Storage\",\n \"60-day version history\",\n \"Custom domain & SSO\",\n ],\n },\n {\n id: \"scale\",\n title: \"Scale\",\n subtitle: \"agency\",\n monthlyPrice: 29.0,\n yearlyPrice: 23.0,\n monthlyPeriod: \"Month\",\n yearlyPeriod: \"Year\",\n features: [\n \"Unlimited Cloud Storage\",\n \"365-day version history\",\n \"Dedicated SLA & audit logs\",\n ],\n },\n];\n\nexport function PricingPlansPro({\n badgeText = \"Workspace Tiers\",\n title = \"Choose Your Workspace\",\n subtitle = \"Configure your billing cycle, pick a workspace tier, and scale team seats effortlessly as you grow.\",\n monthlyLabel = \"Monthly\",\n yearlyLabel = \"Annual\",\n discountBadge = \"SAVE 20%\",\n plans = defaultPlansProItems,\n defaultBillingCycle = \"monthly\",\n defaultSelectedPlanId = \"scale\",\n defaultUsers = 1,\n minUsers = 1,\n maxUsers = 99,\n usersLabel = \"Team Seats\",\n usersSubtext = \"Billed per active member\",\n orderButtonText = \"Continue\",\n orderHref,\n scalePriceWithUsers = true,\n layoutMode = \"responsive\",\n color = \"primary\",\n counting = true,\n linkComponent: LinkComp = \"a\",\n className,\n compact = false,\n onOrder,\n}: PricingPlansProProps = {}) {\n const [billingCycle, setBillingCycle] = useState<\"monthly\" | \"yearly\">(\n defaultBillingCycle,\n );\n const [selectedPlanId, setSelectedPlanId] = useState(\n defaultSelectedPlanId || plans[0]?.id || \"scale\",\n );\n const [users, setUsers] = useState(\n Math.max(minUsers, Math.min(maxUsers, defaultUsers)),\n );\n const [cardsSpread, setCardsSpread] = useState(false);\n const sectionRef = useRef(null);\n\n useEffect(() => {\n const el = sectionRef.current;\n if (!el) return;\n let timer: ReturnType | null = null;\n\n if (typeof IntersectionObserver === \"undefined\") {\n timer = setTimeout(() => setCardsSpread(true), 320);\n return () => {\n if (timer) clearTimeout(timer);\n };\n }\n\n const observer = new IntersectionObserver(\n (entries) => {\n const entry = entries[0];\n if (!entry) return;\n if (entry.isIntersecting) {\n if (timer) clearTimeout(timer);\n timer = setTimeout(() => setCardsSpread(true), 320);\n } else {\n if (timer) clearTimeout(timer);\n setCardsSpread(false);\n }\n },\n { threshold: 0.2 },\n );\n\n observer.observe(el);\n return () => {\n if (timer) clearTimeout(timer);\n observer.disconnect();\n };\n }, []);\n\n const { theme, style } = getThemeStyles(color);\n\n const parsePrice = (raw: number | string) => {\n const n =\n typeof raw === \"number\"\n ? raw\n : parseFloat(String(raw).replace(/[^0-9.]/g, \"\"));\n return isNaN(n) ? 0 : n;\n };\n\n const getPlanPrice = (plan: PlansProItem) => {\n const base =\n billingCycle === \"yearly\"\n ? parsePrice(plan.yearlyPrice)\n : parsePrice(plan.monthlyPrice);\n const total = scalePriceWithUsers ? base * users : base;\n return total.toFixed(2);\n };\n\n const getPlanPeriod = (plan: PlansProItem) =>\n billingCycle === \"yearly\"\n ? plan.yearlyPeriod || \"Year\"\n : plan.monthlyPeriod || \"Month\";\n\n const handleOrder = () => {\n const activePlan =\n plans.find((p) => p.id === selectedPlanId) || plans[0];\n if (!activePlan) return;\n onOrder?.({\n plan: activePlan,\n billingCycle,\n users,\n totalPrice: parseFloat(getPlanPrice(activePlan)),\n });\n };\n\n const renderRadio = (isSelected: boolean) => (\n \n \n \n );\n\n const renderUsersStepper = (compact = false) => (\n e.stopPropagation()}\n >\n
\n \n \n
\n
\n \n {usersLabel}\n \n \n {usersSubtext}\n \n
\n \n\n
\n setUsers((u) => Math.max(minUsers, u - 1))}\n className=\"w-7 h-7 rounded-md flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-foreground/5 disabled:opacity-35 disabled:pointer-events-none transition-colors cursor-pointer\"\n >\n \n \n \n {users}\n \n = maxUsers}\n onClick={() => setUsers((u) => Math.min(maxUsers, u + 1))}\n className=\"w-7 h-7 rounded-md flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-foreground/5 disabled:opacity-35 disabled:pointer-events-none transition-colors cursor-pointer\"\n >\n \n \n
\n \n );\n\n const renderOrderButton = (fullWidth = false) => {\n const btnClasses = cn(\n fullWidth ? \"w-full\" : \"w-full sm:w-auto sm:min-w-[172px]\",\n theme.bg,\n );\n\n if (orderHref) {\n return (\n \n \n {orderButtonText}\n \n \n );\n }\n\n return (\n \n {orderButtonText}\n \n );\n };\n\n return (\n \n \n {/* Header: Badge + Title + Description */}\n {(badgeText || title || subtitle) && (\n
\n {badgeText && (\n \n \n {badgeText}\n
\n )}\n {title && (\n

\n {title}\n

\n )}\n {subtitle && (\n

\n {subtitle}\n

\n )}\n \n )}\n\n {/* Segmented Billing Cycle Switch */}\n \n {/* Sliding Active Pill Background */}\n \n\n setBillingCycle(\"monthly\")}\n className={cn(\n \"relative z-10 py-2.5 sm:py-3 px-3 rounded-md font-sans text-[13.5px] transition-colors duration-300 flex items-center justify-center cursor-pointer select-none\",\n billingCycle === \"monthly\"\n ? \"text-foreground font-semibold\"\n : \"text-muted-foreground font-medium hover:text-foreground\",\n )}\n >\n {monthlyLabel}\n \n\n setBillingCycle(\"yearly\")}\n className={cn(\n \"relative z-10 py-2.5 sm:py-3 px-2.5 sm:px-3 rounded-md font-sans text-[13.5px] transition-colors duration-300 flex items-center justify-center gap-1.5 sm:gap-2 cursor-pointer select-none\",\n billingCycle === \"yearly\"\n ? \"text-foreground font-semibold\"\n : \"text-muted-foreground font-medium hover:text-foreground\",\n )}\n >\n {yearlyLabel}\n {discountBadge && (\n \n {discountBadge}\n \n )}\n \n \n\n {/* DESKTOP / HORIZONTAL LAYOUT (3-Column Grid + Bottom Users/Order Bar) */}\n \n \n {plans.map((plan, cardIdx) => {\n const isSelected = selectedPlanId === plan.id;\n const priceStr = getPlanPrice(plan);\n const periodStr = getPlanPeriod(plan);\n const isLeftCard = cardIdx === 0;\n const isCenterCard = cardIdx === 1;\n const isRightCard = cardIdx === 2;\n\n const stackedTransform = isCenterCard\n ? \"translate3d(0px, 0px, 0px) scale(1)\"\n : isLeftCard\n ? \"translate3d(calc(100% + 1rem), 6px, 0px) scale(0.92)\"\n : isRightCard\n ? \"translate3d(calc(-100% - 1rem), 6px, 0px) scale(0.92)\"\n : \"translate3d(0px, 0px, 0px) scale(1)\";\n\n return (\n setSelectedPlanId(plan.id)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n setSelectedPlanId(plan.id);\n }\n }}\n className={cn(\n \"relative rounded-lg p-5 cursor-pointer transition-[transform,opacity,border-color,box-shadow] duration-[950ms] ease-[cubic-bezier(0.16,1,0.3,1)] will-change-transform flex flex-col justify-between bg-card outline-none focus-visible:ring-2 focus-visible:ring-primary\",\n isCenterCard\n ? \"z-20\"\n : isSelected && cardsSpread\n ? \"z-30\"\n : \"z-10\",\n !cardsSpread && !isCenterCard ? \"opacity-75\" : \"opacity-100\",\n isSelected\n ? \"border border-border shadow-xs\"\n : \"border border-border hover:border-foreground/30\",\n )}\n style={{\n transform: cardsSpread\n ? \"translate3d(0px, 0px, 0px) scale(1)\"\n : stackedTransform,\n ...(isSelected\n ? {\n borderColor:\n \"color-mix(in srgb, var(--pricing-accent, currentColor) 28%, transparent)\",\n }\n : {}),\n }}\n >\n {isSelected && (\n \n \n \n \n \n )}\n {/* Card Top Header */}\n
\n
\n {renderRadio(isSelected)}\n
\n \n {plan.title}\n \n \n {plan.subtitle}\n \n
\n
\n\n
\n \n $\n \n \n {periodStr}\n \n
\n
\n\n {/* Features List */}\n
    \n {plan.features.map((feature, idx) => (\n \n \n {feature}\n \n ))}\n
\n \n );\n })}\n \n\n {/* Horizontal Divider */}\n
\n\n {/* Bottom Bar: Users Stepper (Left) + Order CTA (Right) */}\n
\n {renderUsersStepper(false)}\n {renderOrderButton(false)}\n
\n
\n\n {/* MOBILE / VERTICAL ACCORDION LAYOUT (Stacked Expandable Cards + Full-Width Order CTA) */}\n \n \n {plans.map((plan) => {\n const isSelected = selectedPlanId === plan.id;\n const priceStr = getPlanPrice(plan);\n const periodStr = getPlanPeriod(plan);\n\n return (\n setSelectedPlanId(plan.id)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n setSelectedPlanId(plan.id);\n }\n }}\n className={cn(\n \"relative rounded-lg px-4 sm:px-5 py-5 sm:py-5.5 cursor-pointer transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] bg-card outline-none focus-visible:ring-2 focus-visible:ring-primary\",\n isSelected\n ? \"border border-border shadow-xs\"\n : \"border border-border hover:border-foreground/30\",\n )}\n style={\n isSelected\n ? {\n borderColor:\n \"color-mix(in srgb, var(--pricing-accent, currentColor) 28%, transparent)\",\n }\n : undefined\n }\n >\n {isSelected && (\n \n \n \n \n \n )}\n {/* Top Row: Radio + Plan Title/Subtitle + Price/Period */}\n
\n
\n {renderRadio(isSelected)}\n
\n \n {plan.title}\n \n \n {plan.subtitle}\n \n
\n
\n\n
\n \n $\n \n \n {periodStr}\n \n
\n
\n\n {/* Smooth Animated Expand/Collapse Content for Mobile/Vertical */}\n \n
\n \n
    \n {plan.features.map((feature, idx) => (\n \n \n {feature}\n \n ))}\n
\n\n
\n\n {renderUsersStepper(true)}\n
\n
\n \n \n );\n })}\n \n\n
{renderOrderButton(true)}
\n \n \n \n );\n}\n\nexport default PricingCards;\n\n", "type": "registry:component", "target": "components/custom/blocks/Pricing.tsx" }, { "path": "src/components/custom/blocks/pricing-theme.ts", "content": "\"use client\";\n\nimport React from \"react\";\n\nexport type PricingColor = \"indigo\" | \"rose\" | \"emerald\" | \"zinc\" | string;\n\nconst colorThemes: Record> = {\n indigo: {\n text: \"text-indigo-600 dark:text-indigo-400\",\n bg: \"bg-indigo-600 text-white\",\n bgSoft:\n \"bg-indigo-100 dark:bg-indigo-500/20 text-indigo-700 dark:text-indigo-400\",\n border: \"border-indigo-600 dark:border-indigo-500\",\n shadow: \"shadow-indigo-500/20\",\n gradient: \"from-indigo-600 to-purple-600\",\n gradientSoft:\n \"from-indigo-100 to-transparent dark:from-indigo-500/10 dark:to-transparent\",\n ring: \"ring-indigo-600 dark:ring-indigo-500\",\n slider:\n \"accent-indigo-600 dark:accent-indigo-500 [&::-webkit-slider-thumb]:bg-indigo-600 dark:[&::-webkit-slider-thumb]:bg-indigo-500\",\n fill: \"fill-indigo-600 dark:fill-indigo-400\",\n },\n rose: {\n text: \"text-rose-600 dark:text-rose-400\",\n bg: \"bg-rose-600 text-white\",\n bgSoft: \"bg-rose-100 dark:bg-rose-500/20 text-rose-700 dark:text-rose-400\",\n border: \"border-rose-600 dark:border-rose-500\",\n shadow: \"shadow-rose-500/20\",\n gradient: \"from-rose-600 to-orange-500\",\n gradientSoft:\n \"from-rose-100 to-transparent dark:from-rose-500/10 dark:to-transparent\",\n ring: \"ring-rose-600 dark:ring-rose-500\",\n slider:\n \"accent-rose-600 dark:accent-rose-500 [&::-webkit-slider-thumb]:bg-rose-600 dark:[&::-webkit-slider-thumb]:bg-rose-500\",\n fill: \"fill-rose-600 dark:fill-rose-400\",\n },\n emerald: {\n text: \"text-emerald-600 dark:text-emerald-400\",\n bg: \"bg-emerald-600 text-white\",\n bgSoft:\n \"bg-emerald-100 dark:bg-emerald-500/20 text-emerald-700 dark:text-emerald-400\",\n border: \"border-emerald-600 dark:border-emerald-500\",\n shadow: \"shadow-emerald-500/20\",\n gradient: \"from-emerald-600 to-teal-500\",\n gradientSoft:\n \"from-emerald-100 to-transparent dark:from-emerald-500/10 dark:to-transparent\",\n ring: \"ring-emerald-600 dark:ring-emerald-500\",\n slider:\n \"accent-emerald-600 dark:accent-emerald-500 [&::-webkit-slider-thumb]:bg-emerald-600 dark:[&::-webkit-slider-thumb]:bg-emerald-500\",\n fill: \"fill-emerald-600 dark:fill-emerald-400\",\n },\n zinc: {\n text: \"text-zinc-900 dark:text-zinc-100\",\n bg: \"bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900\",\n bgSoft: \"bg-zinc-200 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100\",\n border: \"border-zinc-900 dark:border-zinc-100\",\n shadow: \"shadow-zinc-900/20 dark:shadow-white/10\",\n gradient: \"from-zinc-800 to-zinc-900 dark:from-zinc-200 dark:to-zinc-400\",\n gradientSoft:\n \"from-zinc-200 to-transparent dark:from-zinc-800/50 dark:to-transparent\",\n ring: \"ring-zinc-900 dark:ring-zinc-100\",\n slider:\n \"accent-zinc-900 dark:accent-zinc-100 [&::-webkit-slider-thumb]:bg-zinc-900 dark:[&::-webkit-slider-thumb]:bg-zinc-100\",\n fill: \"fill-zinc-900 dark:fill-zinc-100\",\n },\n};\n\nconst hexToRgb = (hex: string) => {\n let cleanHex = hex.replace(/^#/, \"\");\n if (cleanHex.length === 3)\n cleanHex = cleanHex\n .split(\"\")\n .map((x) => x + x)\n .join(\"\");\n const result = /^([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(cleanHex);\n return result\n ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}`\n : \"99, 102, 241\";\n};\n\nexport const getThemeStyles = (color: PricingColor = \"primary\") => {\n if (color === \"primary\") {\n return {\n theme: {\n text: \"text-[var(--pricing-accent)]\",\n bg: \"bg-[var(--pricing-accent)] text-[var(--pricing-on)]\",\n bgSoft: \"bg-[var(--pricing-accent)]/10 text-[var(--pricing-accent)]\",\n border: \"border-[var(--pricing-accent)]\",\n shadow: \"shadow-[var(--pricing-accent)]/20\",\n gradient: \"from-[var(--pricing-accent)] to-[var(--pricing-accent)]/80\",\n gradientSoft:\n \"from-[var(--pricing-accent)]/10 to-transparent dark:from-[var(--pricing-accent)]/10 dark:to-transparent\",\n ring: \"ring-[var(--pricing-accent)]\",\n slider:\n \"accent-[var(--pricing-accent)] [&::-webkit-slider-thumb]:bg-[var(--pricing-accent)]\",\n fill: \"fill-[var(--pricing-accent)]\",\n },\n style: {\n \"--pricing-accent\": \"var(--primary)\",\n \"--pricing-on\": \"var(--primary-foreground)\",\n } as React.CSSProperties,\n };\n }\n\n if (colorThemes[color]) {\n return { theme: colorThemes[color], style: {} };\n }\n\n const rgb = hexToRgb(color);\n return {\n theme: {\n text: \"text-[var(--pricing-accent)]\",\n bg: \"bg-[var(--pricing-accent)] text-white\",\n bgSoft: \"bg-[var(--pricing-accent)]/10 text-[var(--pricing-accent)]\",\n border: \"border-[var(--pricing-accent)]\",\n shadow: \"shadow-[var(--pricing-accent)]/20\",\n gradient: \"from-[var(--pricing-accent)] to-[var(--pricing-accent)]/80\",\n gradientSoft: \"from-[var(--pricing-accent)]/10 to-transparent\",\n ring: \"ring-[var(--pricing-accent)]\",\n slider:\n \"accent-[var(--pricing-accent)] [&::-webkit-slider-thumb]:bg-[var(--pricing-accent)]\",\n fill: \"fill-[var(--pricing-accent)]\",\n },\n style: {\n \"--pricing-accent\": color,\n \"--pricing-rgb\": rgb,\n } as React.CSSProperties,\n };\n};\n", "type": "registry:component", "target": "components/custom/blocks/pricing-theme.ts" } ], "docs": "Named exports: PricingCards, PricingBuilder, PricingTable, PricingSlider, PricingTypographic, PricingPlans. The largest pricing item — variants include cards, builder, table, slider, typographic, and interactive service checklist. The tiered cards popular plan features subtle 3D tilt from tilted-card.", "categories": [ "commerce", "marketing" ], "type": "registry:component" }