{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-1",
  "title": "Pricing Exemple 1",
  "description": "Frequently asked questions section with collapsible items.",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/blocks/Pricing/pricing1.tsx",
      "content": "\"use client\";\r\n\r\nimport { useState } from \"react\";\r\nimport { motion, AnimatePresence , Variants } from \"framer-motion\";\r\nimport { Check } from \"lucide-react\";\r\n\r\nconst plans = [\r\n  {\r\n    id: \"starter\",\r\n    icon: \"⌘\",\r\n    name: \"Starter\",\r\n    monthlyPrice: 0,\r\n    annualPrice: 0,\r\n    description:\r\n      \"Ideal for new investors or those with smaller portfolios. Offers essential features and tools to get started.\",\r\n    features: [\r\n      \"Market data and news\",\r\n      \"Basic portfolio tracking\",\r\n      \"Access to educational resources\",\r\n      \"Limited customer support\",\r\n    ],\r\n    cta: \"Register For Free!\",\r\n    highlight: false,\r\n    dark: false,\r\n  },\r\n  {\r\n    id: \"professional\",\r\n    icon: \"◇\",\r\n    name: \"Professional\",\r\n    monthlyPrice: 59,\r\n    annualPrice: 49,\r\n    description:\r\n      \"A comprehensive plan for investors seeking more advanced features and Olixer AI Assistant.\",\r\n    features: [\r\n      \"All features from the Starter plan\",\r\n      \"Advanced portfolio analysis\",\r\n      \"Personalized investment recommendations\",\r\n      \"Priority customer support\",\r\n      \"Access to a community of investors\",\r\n      \"Olixer AI Assistant\",\r\n    ],\r\n    cta: \"Get Started\",\r\n    highlight: true,\r\n    dark: true,\r\n  },\r\n  {\r\n    id: \"genius\",\r\n    icon: \"⊕\",\r\n    name: \"Genius\",\r\n    monthlyPrice: 299,\r\n    annualPrice: 249,\r\n    description:\r\n      \"Tailored for experienced investors and companies with complex portfolios and high-level needs.\",\r\n    features: [\r\n      \"All features from the Professional plan\",\r\n      \"Exclusive access to investment research & analysis\",\r\n      \"Private personal letter news\",\r\n      \"Personalized wealth management services\",\r\n      \"Dedicated account manager\",\r\n      \"Access to exclusive investment opportunities\",\r\n      \"Exclusive company Investing Account\",\r\n    ],\r\n    cta: \"Get Started\",\r\n    highlight: false,\r\n    dark: false,\r\n  },\r\n];\r\n\r\nconst containerVariants: Variants = {\r\n  hidden: {},\r\n  visible: {\r\n    transition: { staggerChildren: 0.1, delayChildren: 0.15 },\r\n  },\r\n};\r\n\r\nconst cardVariants: Variants = {\r\n  hidden: { opacity: 0, y: 32 },\r\n  visible: {\r\n    opacity: 1,\r\n    y: 0,\r\n    transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },\r\n  },\r\n};\r\n\r\nexport default function PricingSection() {\r\n  const [annual, setAnnual] = useState(false);\r\n\r\n  return (\r\n    <section\r\n      className=\"min-h-screen w-full flex flex-col items-center justify-center px-4 py-24\"\r\n      style={{ fontFamily: \"var(--font-geist-sans, 'Inter', sans-serif)\" }}\r\n    >\r\n      {/* Heading */}\r\n      <motion.div\r\n        initial={{ opacity: 0, y: -20 }}\r\n        animate={{ opacity: 1, y: 0 }}\r\n        transition={{ duration: 0.55, ease: [0.22, 1, 0.36, 1] }}\r\n        className=\"text-center mb-10 max-w-2xl\"\r\n      >\r\n        <h1 className=\"text-4xl md:text-5xl text-black leading-tight tracking-tight\">\r\n          Choose <span className=\"font-bold\">The Plan</span> That&apos;s Right\r\n          For Your Investment Goals!\r\n        </h1>\r\n      </motion.div>\r\n\r\n      {/* Toggle */}\r\n      <motion.div\r\n        initial={{ opacity: 0, scale: 0.92 }}\r\n        animate={{ opacity: 1, scale: 1 }}\r\n        transition={{ delay: 0.2, duration: 0.35 }}\r\n        className=\"flex items-center gap-3 mb-14 px-4 py-1.5 rounded-full border border-black/10 bg-white shadow-sm\"\r\n      >\r\n        <span\r\n          onClick={() => setAnnual(false)}\r\n          className=\"text-sm cursor-pointer select-none transition-colors\"\r\n          style={{\r\n            color: !annual ? \"#000\" : \"#999\",\r\n            fontWeight: !annual ? 600 : 400,\r\n          }}\r\n        >\r\n          Monthly\r\n        </span>\r\n\r\n        <button\r\n          onClick={() => setAnnual((v) => !v)}\r\n          className=\"relative w-10 h-5 rounded-full focus:outline-none transition-colors duration-300 cursor-pointer\"\r\n          style={{ background: annual ? \"#000\" : \"#D1D1D1\" }}\r\n          aria-label=\"Toggle billing\"\r\n        >\r\n          <motion.span\r\n            layout\r\n            transition={{ type: \"spring\", stiffness: 700, damping: 38 }}\r\n            className=\"absolute top-0.5 w-4 h-4 rounded-full bg-white\"\r\n            style={{ left: annual ? \"calc(100% - 18px)\" : \"2px\" }}\r\n          />\r\n        </button>\r\n\r\n        <span\r\n          onClick={() => setAnnual(true)}\r\n          className=\"text-sm cursor-pointer select-none transition-colors\"\r\n          style={{\r\n            color: annual ? \"#000\" : \"#999\",\r\n            fontWeight: annual ? 600 : 400,\r\n          }}\r\n        >\r\n          Annually\r\n        </span>\r\n\r\n        <AnimatePresence>\r\n          {annual && (\r\n            <motion.span\r\n              initial={{ opacity: 0, scale: 0.75 }}\r\n              animate={{ opacity: 1, scale: 1 }}\r\n              exit={{ opacity: 0, scale: 0.75 }}\r\n              className=\"text-xs font-semibold px-2 py-0.5 rounded-full bg-green-200 border border-green-300 text-green-600 ml-0.5\"\r\n            >\r\n              −17%\r\n            </motion.span>\r\n          )}\r\n        </AnimatePresence>\r\n      </motion.div>\r\n\r\n      {/* Cards */}\r\n      <motion.div\r\n        variants={containerVariants}\r\n        initial=\"hidden\"\r\n        animate=\"visible\"\r\n        className=\"w-full max-w-5xl grid grid-cols-1 md:grid-cols-3 gap-4 items-end\"\r\n      >\r\n        {plans.map((plan) => (\r\n          <motion.div\r\n            key={plan.id}\r\n            variants={cardVariants}\r\n            whileHover={{\r\n              y: plan.highlight ? -14 : -6,\r\n              boxShadow: plan.dark\r\n                ? \"0 20px 50px rgba(0,0,0,0.30)\"\r\n                : \"0 12px 36px rgba(0,0,0,0.10)\",\r\n            }}\r\n            className=\"rounded-2xl p-7 flex flex-col relative\"\r\n            style={{\r\n              background: plan.dark ? \"#000\" : \"#fff\",\r\n              border: plan.dark ? \"1.5px solid #000\" : \"1.5px solid #E5E5E5\",\r\n              transform: plan.highlight ? \"translateY(-14px)\" : \"translateY(0)\",\r\n              boxShadow: plan.dark\r\n                ? \"0 12px 40px rgba(0,0,0,0.20)\"\r\n                : \"0 2px 16px rgba(0,0,0,0.05)\",\r\n              transition: \"box-shadow 0.25s\",\r\n            }}\r\n          >\r\n            {/* Badge */}\r\n            {plan.highlight && (\r\n              <motion.div\r\n                initial={{ opacity: 0, y: -8 }}\r\n                animate={{ opacity: 1, y: 0 }}\r\n                transition={{ delay: 0.45 }}\r\n                className=\"absolute -top-3.5 left-1/2 -translate-x-1/2 text-[10px] font-bold px-3 py-0.5 rounded-full bg-green-100 border border-green-300 text-green-600 tracking-widest uppercase\"\r\n              >\r\n                Most Popular\r\n              </motion.div>\r\n            )}\r\n\r\n            {/* Icon + Name */}\r\n            <div className=\"flex items-center gap-2 mb-5\">\r\n              <span\r\n                className=\"w-7 h-7 rounded-lg flex items-center justify-center text-sm font-semibold\"\r\n                style={{\r\n                  background: plan.dark ? \"#1A1A1A\" : \"#F4F4F4\",\r\n                  color: plan.dark ? \"#fff\" : \"#000\",\r\n                }}\r\n              >\r\n                {plan.icon}\r\n              </span>\r\n              <span\r\n                className=\"text-sm font-semibold\"\r\n                style={{ color: plan.dark ? \"#fff\" : \"#000\" }}\r\n              >\r\n                {plan.name}\r\n              </span>\r\n            </div>\r\n\r\n            {/* Price */}\r\n            <div className=\"flex items-end gap-1 mb-2\">\r\n              <AnimatePresence mode=\"wait\">\r\n                <motion.span\r\n                  key={annual ? \"ann\" : \"mo\"}\r\n                  initial={{ opacity: 0, y: 8 }}\r\n                  animate={{ opacity: 1, y: 0 }}\r\n                  exit={{ opacity: 0, y: -8 }}\r\n                  transition={{ duration: 0.2 }}\r\n                  className=\"text-5xl font-bold leading-none tracking-tight\"\r\n                  style={{ color: plan.dark ? \"#fff\" : \"#000\" }}\r\n                >\r\n                  ${annual ? plan.annualPrice : plan.monthlyPrice}\r\n                </motion.span>\r\n              </AnimatePresence>\r\n              <span\r\n                className=\"text-xs mb-1.5\"\r\n                style={{ color: plan.dark ? \"#888\" : \"#888\" }}\r\n              >\r\n                / Month\r\n              </span>\r\n            </div>\r\n\r\n            {/* Description */}\r\n            <p\r\n              className=\"text-xs leading-relaxed mb-6\"\r\n              style={{ color: plan.dark ? \"#888\" : \"#666\" }}\r\n            >\r\n              {plan.description}\r\n            </p>\r\n\r\n            {/* Divider */}\r\n            <div\r\n              className=\"w-full h-px mb-6\"\r\n              style={{ background: plan.dark ? \"#222\" : \"#F0F0F0\" }}\r\n            />\r\n\r\n            {/* Features */}\r\n            <ul className=\"flex flex-col gap-3 mb-8 flex-1\">\r\n              {plan.features.map((f, i) => (\r\n                <motion.li\r\n                  key={f}\r\n                  initial={{ opacity: 0, x: -8 }}\r\n                  animate={{ opacity: 1, x: 0 }}\r\n                  transition={{ delay: 0.3 + i * 0.06, duration: 0.3 }}\r\n                  className=\"flex items-start gap-2.5 text-xs\"\r\n                  style={{ color: plan.dark ? \"#ccc\" : \"#333\" }}\r\n                >\r\n                  <span\r\n                    className=\"mt-0.5 w-4 h-4 rounded-full flex-shrink-0 flex items-center justify-center\"\r\n                    style={{\r\n                      background: plan.dark ? \"#1A1A1A\" : \"#F4F4F4\",\r\n                    }}\r\n                  >\r\n                    <Check\r\n                      size={9}\r\n                      strokeWidth={2.5}\r\n                      style={{ color: plan.dark ? \"#fff\" : \"#000\" }}\r\n                    />\r\n                  </span>\r\n                  {f}\r\n                </motion.li>\r\n              ))}\r\n            </ul>\r\n\r\n            {/* CTA */}\r\n            <motion.button\r\n              whileHover={{ scale: 1.02 }}\r\n              whileTap={{ scale: 0.97 }}\r\n              className=\"w-full py-3 rounded-xl text-sm font-semibold flex items-center justify-center gap-1.5 transition-colors cursor-pointer\"\r\n              style={\r\n                plan.id === \"starter\"\r\n                  ? { background: \"#000\", color: \"#fff\" }\r\n                  : plan.dark\r\n                    ? { background: \"#fff\", color: \"#000\" }\r\n                    : {\r\n                        background: \"#F4F4F4\",\r\n                        color: \"#000\",\r\n                        border: \"1px solid #E5E5E5\",\r\n                      }\r\n              }\r\n            >\r\n              {plan.cta}\r\n              {plan.id !== \"starter\" && (\r\n                <span className=\"text-base leading-none\">›</span>\r\n              )}\r\n            </motion.button>\r\n          </motion.div>\r\n        ))}\r\n      </motion.div>\r\n    </section>\r\n  );\r\n}\r\n",
      "type": "registry:block",
      "target": "components/blocks/pricing-ex-1.tsx"
    }
  ],
  "type": "registry:block"
}