{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Modern pricing block with three tiers","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport SmoothButton from \"@/components/smoothui/smooth-button\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nconst CARD_ANIMATION_DELAY = 0.1;\n\ninterface PriceFlowProps {\n className?: string;\n value: number;\n}\n\nfunction PriceFlow({ value, className = \"\" }: PriceFlowProps) {\n const [prevValue, setPrevValue] = useState(value);\n const prevTensRef = useRef(null);\n const nextTensRef = useRef(null);\n const prevOnesRef = useRef(null);\n const nextOnesRef = useRef(null);\n\n useEffect(() => {\n if (value !== prevValue) {\n const prevTens = prevTensRef.current;\n const nextTens = nextTensRef.current;\n const prevOnes = prevOnesRef.current;\n const nextOnes = nextOnesRef.current;\n\n if (\n prevTens &&\n nextTens &&\n Math.floor(value / 10) !== Math.floor(prevValue / 10)\n ) {\n if (Math.floor(value / 10) > Math.floor(prevValue / 10)) {\n prevTens.classList.add(\"slide-out-up\");\n nextTens.classList.add(\"slide-in-up\");\n } else {\n prevTens.classList.add(\"slide-out-down\");\n nextTens.classList.add(\"slide-in-down\");\n }\n\n const handleTensAnimationEnd = () => {\n prevTens.classList.remove(\"slide-out-up\", \"slide-out-down\");\n nextTens.classList.remove(\"slide-in-up\", \"slide-in-down\");\n prevTens.removeEventListener(\"animationend\", handleTensAnimationEnd);\n };\n\n prevTens.addEventListener(\"animationend\", handleTensAnimationEnd);\n }\n\n if (prevOnes && nextOnes && value % 10 !== prevValue % 10) {\n setTimeout(() => {\n if (value % 10 > prevValue % 10) {\n prevOnes.classList.add(\"slide-out-up\");\n nextOnes.classList.add(\"slide-in-up\");\n } else {\n prevOnes.classList.add(\"slide-out-down\");\n nextOnes.classList.add(\"slide-in-down\");\n }\n\n const handleOnesAnimationEnd = () => {\n prevOnes.classList.remove(\"slide-out-up\", \"slide-out-down\");\n nextOnes.classList.remove(\"slide-in-up\", \"slide-in-down\");\n prevOnes.removeEventListener(\n \"animationend\",\n handleOnesAnimationEnd\n );\n };\n\n prevOnes.addEventListener(\"animationend\", handleOnesAnimationEnd);\n }, 50);\n }\n\n setPrevValue(value);\n }\n }, [value, prevValue]);\n\n const formatValue = (val: number) => val.toString().padStart(2, \"0\");\n const prevFormatted = formatValue(prevValue);\n const currentFormatted = formatValue(value);\n\n return (\n \n \n \n {prevFormatted[0]}\n \n \n {currentFormatted[0]}\n \n \n \n \n {prevFormatted[1]}\n \n \n {currentFormatted[1]}\n \n \n \n );\n}\n\nexport function PricingModern() {\n const shouldReduceMotion = useReducedMotion();\n const [isAnnual, setIsAnnual] = useState(true);\n\n return (\n
\n
\n
\n
\n

\n Choose your perfect plan\n

\n

\n Modern pricing plans designed for teams of all sizes. Scale your\n business with confidence.\n

\n
\n \n \n setIsAnnual(false)}\n type=\"button\"\n >\n Monthly\n \n setIsAnnual(true)}\n type=\"button\"\n >\n Annually\n \n
\n
\n
\n
\n
\n
\n {/* Basic Plan */}\n \n
\n {/* Title */}\n

\n Basic\n

\n {/* Price & Duration */}\n
\n \n €\n \n •\n \n Perfect for startups\n \n
\n {/* CTA Button */}\n \n Get Started\n \n {/* Description */}\n

\n Essential features for growing businesses. Get started\n with everything you need to launch your project.\n

\n {/* What's Included */}\n
\n

\n What's included:\n

\n
    \n {[\n \"1 Project\",\n \"Email Support\",\n \"Core Features\",\n \"Basic Analytics\",\n \"Standard Security\",\n \"Community Access\",\n ].map((item) => (\n \n
    \n \n \n \n
    \n {item}\n \n ))}\n
\n
\n
\n \n {/* Pro Plan (Featured) */}\n \n {/* Gradient Accent */}\n
\n\n
\n {/* Title */}\n

\n Pro{\" \"}\n
\n Most Popular\n
\n

\n {/* Price & Duration */}\n
\n \n €\n \n •\n Best for teams\n
\n {/* CTA Button */}\n \n Get Started\n \n {/* Description */}\n

\n Advanced features for professional teams. Everything you\n need to scale your business with confidence.\n

\n {/* What's Included */}\n
\n

\n What's included:\n

\n
    \n {[\n \"Unlimited Projects\",\n \"Priority Support\",\n \"Team Collaboration\",\n \"Advanced Analytics\",\n \"Custom Integrations\",\n \"API Access\",\n \"White-label Options\",\n \"Priority Updates\",\n ].map((item) => (\n \n
    \n \n \n \n
    \n {item}\n \n ))}\n
\n
\n
\n \n {/* Enterprise Plan */}\n \n
\n {/* Title */}\n

\n Enterprise\n

\n {/* Price & Duration */}\n
\n \n Custom\n \n •\n \n Tailored solutions\n \n
\n {/* CTA Button */}\n \n Contact Sales\n \n {/* Description */}\n

\n Custom solutions for large organizations. Get dedicated\n support and tailored features for your enterprise needs.\n

\n {/* What's Included */}\n
\n

\n What's included:\n

\n
    \n {[\n \"Everything in Pro\",\n \"Dedicated Manager\",\n \"Custom Integrations\",\n \"SLA & Support\",\n \"On-premise Options\",\n \"Advanced Security\",\n \"Training & Onboarding\",\n \"24/7 Phone Support\",\n ].map((item) => (\n \n
    \n \n \n \n
    \n {item}\n \n ))}\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n );\n}\n\nexport default PricingModern;\n","path":"index.tsx","target":"components/smoothui/pricing-2/index.tsx","type":"registry:block"}],"name":"pricing-2","registryDependencies":["https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/tokens.json"],"title":"Pricing 2","type":"registry:block"}