{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-01",
  "title": "Pricing · 01",
  "description": "Pricing · 01 section.",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/talizen/pricing/pricing-01/pricing-01.tsx",
      "content": "import React from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Zap, Rocket, Building2 } from \"lucide-react\";\n\nfunction CheckIcon({ color }: { color: string }) {\n    return (\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n            <circle cx=\"10\" cy=\"10\" r=\"9\" stroke={color} strokeWidth=\"1.5\" />\n            <path d=\"M6 10 L9 13 L14 7\" stroke={color} strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n    );\n}\n\nexport default function Pricing01Velara({ className }: { className?: string }) {\n    return (\n        <>\n            <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n            <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossOrigin=\"anonymous\" />\n            <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\" crossOrigin=\"anonymous\" />\n\n            <section className={\"bg-black pt-[96px] pb-[160px] px-6 md:px-[60px] relative overflow-hidden \" + (className || \"\")} style={{ fontFamily: \"'Inter', sans-serif\" }}>\n                {/* Ambient Glow */}\n                <div className=\"absolute top-0 left-0 w-full h-full pointer-events-none\">\n                    <div className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-[#A855F7]/5 blur-[120px] rounded-full\" />\n                </div>\n\n                {/* Cosmic Horizon Effect */}\n                <div className=\"absolute bottom-0 left-0 w-full h-[600px] pointer-events-none overflow-hidden isolate\">\n                    <div className=\"absolute bottom-[-250px] left-1/2 -translate-x-1/2 w-[220%] aspect-[4/1] bg-black rounded-[100%] border-t border-[#A855F7]/50 shadow-[0_-30px_70px_rgba(168,85,247,0.3)]\" />\n                    <div className=\"absolute bottom-[-40px] left-1/2 -translate-x-1/2 w-[140%] h-[250px] bg-gradient-to-t from-[#A855F7]/60 via-[#A855F7]/10 to-transparent blur-[60px] opacity-80\" />\n                    <div className=\"absolute bottom-[-20px] left-1/2 -translate-x-1/2 w-[500px] h-[150px] bg-[#A855F7]/40 blur-[80px] rounded-full\" />\n                    <div className=\"absolute bottom-[-10px] left-1/2 -translate-x-1/2 w-[250px] h-[80px] bg-[#A855F7]/50 blur-[50px] rounded-full\" />\n                    <div className=\"absolute bottom-[0px] left-1/2 -translate-x-1/2 w-[120px] h-[40px] bg-white/40 blur-[15px] rounded-full\" />\n                    {Array.from({ length: 40 }).map((_: unknown, i: number) => (\n                        <div\n                            key={i}\n                            className=\"absolute bg-white rounded-full opacity-40 animate-pulse\"\n                            style={{\n                                width: ((i % 3) + 1.5) + \"px\",\n                                height: ((i % 3) + 1.5) + \"px\",\n                                left: ((i * 12.7) % 100) + \"%\",\n                                bottom: ((i * 17.3) % 550) + \"px\",\n                                animationDelay: (i * 0.1) + \"s\",\n                                animationDuration: ((i % 4) + 2) + \"s\"\n                            }}\n                        />\n                    ))}\n                </div>\n\n                <div className=\"max-w-[1450px] mx-auto relative z-10\">\n\n                    {/* HEADER */}\n                    <header className=\"mb-[60px]\">\n                        <div className=\"flex items-center gap-[10px] mb-3\">\n                            <span className=\"text-[14px] text-[#555555] font-medium\">05.</span>\n                            <span className=\"text-[#333333]\">&#8212;</span>\n                            <span className=\"text-[13px] text-[#555555] font-medium tracking-[2px] uppercase\">Pricing Plans</span>\n                        </div>\n                        <h2 className=\"text-[36px] md:text-[52px] font-medium text-white leading-[1.1] max-w-[820px] mb-4 tracking-tight\">\n                            Select the Ideal Strategy for Your Monetary Requirements\n                        </h2>\n                        <p className=\"text-[16px] text-white/40 font-medium\">\n                            Choose a plan that scales with your financial goals and team size.\n                        </p>\n                    </header>\n\n                    {/* PRICING CARDS ROW */}\n                    <div className=\"flex flex-col lg:flex-row gap-[24px] items-stretch\">\n\n                        {/* CARD 1 — Basic Plan */}\n                        <motion.div\n                            initial={{ opacity: 0, y: 20 }}\n                            whileInView={{ opacity: 1, y: 0 }}\n                            viewport={{ once: true }}\n                            transition={{ duration: 0.5 }}\n                            className=\"flex-1 bg-white/[0.03] backdrop-blur-xl border border-white/10 rounded-[32px] p-[32px] flex flex-col group hover:border-[#A855F7]/50 hover:bg-white/[0.05] hover:shadow-[0_20px_50px_rgba(168,85,247,0.1)] transition-all duration-500 hover:-translate-y-2\"\n                        >\n                            <div className=\"flex items-center justify-between mb-[24px]\">\n                                <div className=\"flex items-center gap-[12px]\">\n                                    <div className=\"w-[40px] h-[40px] bg-white/10 rounded-[12px] flex items-center justify-center ring-1 ring-white/20\">\n                                        <Zap size={20} className=\"text-white\" />\n                                    </div>\n                                    <span className=\"font-semibold text-[16px] text-white/90\">Basic Plan</span>\n                                </div>\n                            </div>\n\n                            <div className=\"mb-[14px]\">\n                                <span className=\"text-[48px] md:text-[56px] font-medium text-white tracking-tight\">$10</span>\n                                <span className=\"text-[14px] text-white/40 font-medium ml-[8px]\">per month</span>\n                            </div>\n\n                            <p className=\"text-[14px] text-white/50 mb-[32px] font-medium leading-[1.6]\">\n                                Small-sized Teams of up to 20 employees\n                            </p>\n\n                            <button className=\"bg-white text-black rounded-full py-[14px] px-[20px] w-full text-[15px] font-semibold border-none cursor-pointer mb-[12px] hover:bg-white/90 transition-all hover:scale-[1.02] active:scale-[0.98]\">\n                                Get Started\n                            </button>\n                            <button className=\"bg-transparent text-white/80 border border-white/10 rounded-full py-[13px] px-[20px] w-full text-[15px] font-medium cursor-pointer hover:bg-white/5 hover:border-white/20 transition-all\">\n                                Chat to sales\n                            </button>\n\n                            <div className=\"h-[1px] bg-white/5 my-[32px]\" />\n\n                            <div className=\"flex flex-col gap-[16px]\">\n                                <p className=\"text-[11px] font-bold text-white/30 tracking-[2px] mb-[4px] uppercase\">FEATURES</p>\n                                {[\n                                    \"Personalized Mindfulness\",\n                                    \"Simple dashboard for financial reports\",\n                                    \"Basic project management tools\",\n                                    \"Up to 10 users\",\n                                    \"Basic team collaboration tools\"\n                                ].map((item: string, idx: number) => (\n                                    <div key={idx} className=\"flex items-center gap-[14px]\">\n                                        <CheckIcon color=\"#FFFFFF\" />\n                                        <span className=\"text-[14px] text-white/70 font-medium\">{item}</span>\n                                    </div>\n                                ))}\n                            </div>\n                        </motion.div>\n\n                        {/* CARD 2 — Pro Plan */}\n                        <motion.div\n                            initial={{ opacity: 0, y: 20 }}\n                            whileInView={{ opacity: 1, y: 0 }}\n                            viewport={{ once: true }}\n                            transition={{ duration: 0.5, delay: 0.1 }}\n                            className=\"flex-1 bg-white/[0.05] backdrop-blur-xl border border-[#A855F7]/40 rounded-[32px] p-[32px] flex flex-col group transition-all duration-500 relative shadow-[0_0_40px_rgba(168,85,247,0.15)] hover:-translate-y-2 hover:shadow-[0_25px_60px_rgba(168,85,247,0.25)] hover:border-[#A855F7]\"\n                        >\n                            <div className=\"flex items-center justify-between mb-[24px]\">\n                                <div className=\"flex items-center gap-[12px]\">\n                                    <div className=\"w-[40px] h-[40px] bg-[#A855F7]/20 rounded-[12px] flex items-center justify-center ring-1 ring-[#A855F7]/40\">\n                                        <Rocket size={20} className=\"text-[#A855F7]\" />\n                                    </div>\n                                    <span className=\"font-semibold text-[16px] text-white/90\">Pro Plan</span>\n                                </div>\n                                <div className=\"bg-[#A855F7] text-white rounded-full py-[5px] px-[14px] text-[10px] font-bold uppercase tracking-widest shadow-[0_0_15px_rgba(168,85,247,0.5)]\">\n                                    Popular\n                                </div>\n                            </div>\n\n                            <div className=\"mb-[14px]\">\n                                <span className=\"text-[48px] md:text-[56px] font-medium text-white tracking-tight\">$20</span>\n                                <span className=\"text-[14px] text-white/40 font-medium ml-[8px]\">per month</span>\n                            </div>\n\n                            <p className=\"text-[14px] text-white/50 mb-[32px] font-medium leading-[1.6]\">\n                                Medium-sized businesses 100 employees\n                            </p>\n\n                            <button className=\"bg-[#A855F7] text-white rounded-full py-[14px] px-[20px] w-full text-[15px] font-semibold border-none cursor-pointer mb-[12px] hover:bg-[#9333EA] transition-all hover:scale-[1.02] active:scale-[0.98]\">\n                                Get Started\n                            </button>\n                            <button className=\"bg-transparent text-white/80 border border-white/10 rounded-full py-[13px] px-[20px] w-full text-[15px] font-medium cursor-pointer hover:bg-white/5 hover:border-white/20 transition-all\">\n                                Chat to sales\n                            </button>\n\n                            <div className=\"h-[1px] bg-white/5 my-[32px]\" />\n\n                            <div className=\"flex flex-col gap-[16px]\">\n                                <p className=\"text-[11px] font-bold text-white/30 tracking-[2px] mb-[4px] uppercase\">FEATURES</p>\n                                {[\n                                    \"Access to advanced features\",\n                                    \"Project and time tracking\",\n                                    \"Guided Mindfulness Activities\",\n                                    \"Up to 50 users\",\n                                    \"Integration with third-party apps\"\n                                ].map((item: string, idx: number) => (\n                                    <div key={idx} className=\"flex items-center gap-[14px]\">\n                                        <CheckIcon color=\"#A855F7\" />\n                                        <span className=\"text-[14px] text-white/70 font-medium\">{item}</span>\n                                    </div>\n                                ))}\n                            </div>\n                        </motion.div>\n\n                        {/* CARD 3 — Enterprise Plan */}\n                        <motion.div\n                            initial={{ opacity: 0, y: 20 }}\n                            whileInView={{ opacity: 1, y: 0 }}\n                            viewport={{ once: true }}\n                            transition={{ duration: 0.5, delay: 0.2 }}\n                            className=\"flex-1 bg-white/[0.03] backdrop-blur-xl border border-white/10 rounded-[32px] p-[32px] flex flex-col group hover:border-[#A855F7]/50 hover:bg-white/[0.05] hover:shadow-[0_20px_50px_rgba(168,85,247,0.1)] transition-all duration-500 hover:-translate-y-2\"\n                        >\n                            <div className=\"flex items-center justify-between mb-[24px]\">\n                                <div className=\"flex items-center gap-[12px]\">\n                                    <div className=\"w-[40px] h-[40px] bg-white/10 rounded-[12px] flex items-center justify-center ring-1 ring-white/20\">\n                                        <Building2 size={20} className=\"text-white\" />\n                                    </div>\n                                    <span className=\"font-semibold text-[16px] text-white/90\">Enterprise Plan</span>\n                                </div>\n                            </div>\n\n                            <div className=\"mb-[14px]\">\n                                <span className=\"text-[48px] md:text-[56px] font-medium text-white tracking-tight\">Custom</span>\n                            </div>\n\n                            <p className=\"text-[14px] text-white/50 mb-[32px] font-medium leading-[1.6]\">\n                                Large corporations (200+ employees)\n                            </p>\n\n                            <button className=\"bg-white text-black rounded-full py-[14px] px-[20px] w-full text-[15px] font-semibold border-none cursor-pointer mb-[12px] hover:bg-white/90 transition-all hover:scale-[1.02] active:scale-[0.98]\">\n                                Get Started\n                            </button>\n                            <button className=\"bg-transparent text-white/80 border border-white/10 rounded-full py-[13px] px-[20px] w-full text-[15px] font-medium cursor-pointer hover:bg-white/5 hover:border-white/20 transition-all\">\n                                Chat to sales\n                            </button>\n\n                            <div className=\"h-[1px] bg-white/5 my-[32px]\" />\n\n                            <div className=\"flex flex-col gap-[16px]\">\n                                <p className=\"text-[11px] font-bold text-white/30 tracking-[2px] mb-[4px] uppercase\">FEATURES</p>\n                                {[\n                                    \"Personalized Mindfulness\",\n                                    \"Basic Mood Tracking\",\n                                    \"Guided Mindfulness Activities\",\n                                    \"Personal Growth Tracker\",\n                                    \"Zen Zone (Basic Features)\"\n                                ].map((item: string, idx: number) => (\n                                    <div key={idx} className=\"flex items-center gap-[14px]\">\n                                        <CheckIcon color=\"#FFFFFF\" />\n                                        <span className=\"text-[14px] text-white/70 font-medium\">{item}</span>\n                                    </div>\n                                ))}\n                            </div>\n                        </motion.div>\n\n                    </div>\n                </div>\n            </section>\n        </>\n    );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "pricing"
  ],
  "type": "registry:block"
}