{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-2",
  "title": "Pricing Exemple 2",
  "description": "Frequently asked questions section with collapsible items.",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/blocks/Pricing/pricing2.tsx",
      "content": "\"use client\";\r\n\r\nimport { motion, Variants } from \"framer-motion\";\r\nimport { Check, Mail, Send } from \"lucide-react\";\r\n\r\n// ─── Types ──────────────────────────────────────────────────────────────────\r\n\r\ninterface PricingPlan {\r\n  title: string;\r\n  description: string;\r\n  price: string;\r\n  priceLabel: string;\r\n  features: string[];\r\n  cta: string;\r\n  highlighted: boolean;\r\n}\r\n\r\n// ─── Data ────────────────────────────────────────────────────────────────────\r\n\r\nconst plans: PricingPlan[] = [\r\n  {\r\n    title: \"Landing Page\",\r\n    description:\r\n        \"Ideal for designing or redesigning website to double your conversion rates\",\r\n    price: \"$1200\",\r\n    priceLabel: \"Fixed Price\",\r\n    features: [\r\n      \"7-14 Days turnaround time\",\r\n      \"1-4 Unique pages\",\r\n      \"Conversion-focused layout\",\r\n      \"Responsive Design Desktop, Tablet, Mobile\",\r\n      \"5/7 Communication via Slack, Telegram & Loom\",\r\n      \"No-code development (Framer)\",\r\n      \"50/25/25 Secure payment\",\r\n    ],\r\n    cta: \"Get Started\",\r\n    highlighted: false,\r\n  },\r\n  {\r\n    title: \"MVP Launch Kit\",\r\n    description:\r\n        \"Full App MVP (20-40 screens) Including Website (design + no-code development) with 10+ unique pages.\",\r\n    price: \"$4000\",\r\n    priceLabel: \"Fixed Price\",\r\n    features: [\r\n      \"Product Design\",\r\n      \"Predefined scope of work (SOW)\",\r\n      \"Updates every 48 hours\",\r\n      \"No-code development (Framer)\",\r\n      \"50/25/25 Secure payment\",\r\n    ],\r\n    cta: \"Get Started\",\r\n    highlighted: false,\r\n  },\r\n  {\r\n    title: \"Custom\",\r\n    description:\r\n        \"Seeking a different scope of work? We're offering a variety of other design services.\",\r\n    price: \"Starting at $500 min\",\r\n    priceLabel: \"\",\r\n    features: [\r\n      \"Landing Page\",\r\n      \"Mobile app\",\r\n      \"Web app\",\r\n      \"No-code development (Framer)\",\r\n      \"50/25/25 Secure payment\",\r\n    ],\r\n    cta: \"Request Quote\",\r\n    highlighted: true,\r\n  },\r\n];\r\n\r\n// ─── Animation variants ───────────────────────────────────────────────────────\r\n\r\nconst containerVariants: Variants = {\r\n  hidden: {},\r\n  visible: {\r\n    transition: {\r\n      staggerChildren: 0.12,\r\n    },\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\nconst featureVariants: Variants = {\r\n  hidden: { opacity: 0, x: -8 },\r\n  visible: (i: number) => ({\r\n    opacity: 1,\r\n    x: 0,\r\n    transition: { delay: i * 0.05, duration: 0.3, ease: \"easeOut\" },\r\n  }),\r\n};\r\n\r\n// ─── Sub-components ──────────────────────────────────────────────────────────\r\n\r\nfunction PricingCard({ plan, index }: { plan: PricingPlan; index: number }) {\r\n  return (\r\n      <motion.div\r\n          variants={cardVariants}\r\n          whileHover={{ y: -4, transition: { duration: 0.2 } }}\r\n          className={`\r\n        relative flex flex-col rounded-2xl p-2 h-full\r\n        ${\r\n              plan.highlighted\r\n                  ? \"bg-zinc-950 border border-zinc-700 text-white\"\r\n                  : \"bg-white border border-zinc-200 text-zinc-900\"\r\n          }\r\n      `}\r\n      >\r\n        {/* Header */}\r\n        <div\r\n            className={`mb-5 p-3 rounded-md ${\r\n                plan.highlighted\r\n                    ? \"bg-zinc-900/50 border border-zinc-800\"\r\n                    : \"bg-gray-100\"\r\n            }`}\r\n        >\r\n          <h3\r\n              className={`text-xl font-semibold tracking-tight mb-2 ${\r\n                  plan.highlighted ? \"text-white\" : \"text-zinc-900\"\r\n              }`}\r\n          >\r\n            {plan.title}\r\n          </h3>\r\n\r\n          <p\r\n              className={`text-sm leading-relaxed ${\r\n                  plan.highlighted ? \"text-zinc-400\" : \"text-zinc-500\"\r\n              }`}\r\n          >\r\n            {plan.description}\r\n          </p>\r\n\r\n          {/* Price */}\r\n          <div className=\"mt-6\">\r\n            <p\r\n                className={`text-2xl font-bold tracking-tight ${\r\n                    plan.highlighted ? \"text-white\" : \"text-zinc-900\"\r\n                }`}\r\n            >\r\n              {plan.price}\r\n              {plan.priceLabel && (\r\n                  <span\r\n                      className={`text-sm font-normal ml-2 ${\r\n                          plan.highlighted ? \"text-zinc-400\" : \"text-zinc-500\"\r\n                      }`}\r\n                  >\r\n                / {plan.priceLabel}\r\n              </span>\r\n              )}\r\n            </p>\r\n          </div>\r\n        </div>\r\n\r\n        {/* Divider */}\r\n        <div\r\n            className={`h-px mb-5 ${\r\n                plan.highlighted ? \"bg-zinc-800\" : \"bg-zinc-100\"\r\n            }`}\r\n        />\r\n\r\n        {/* Features */}\r\n        <ul className=\"flex flex-col gap-3 flex-1 mb-8\">\r\n          {plan.features.map((feat, i) => (\r\n              <motion.li\r\n                  key={feat}\r\n                  custom={i}\r\n                  variants={featureVariants}\r\n                  className=\"flex items-start gap-2.5\"\r\n              >\r\n                <Check\r\n                    size={15}\r\n                    className={`mt-0.5 shrink-0 ${\r\n                        plan.highlighted ? \"text-zinc-300\" : \"text-zinc-700\"\r\n                    }`}\r\n                />\r\n                <span\r\n                    className={`text-sm ${\r\n                        plan.highlighted ? \"text-zinc-300\" : \"text-zinc-600\"\r\n                    }`}\r\n                >\r\n              {feat}\r\n            </span>\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.98 }}\r\n            className={`\r\n          w-full rounded-xl py-3 text-sm font-semibold tracking-wide transition-colors duration-200 cursor-pointer\r\n          ${\r\n                plan.highlighted\r\n                    ? \"bg-white text-zinc-950 hover:bg-zinc-100\"\r\n                    : \"bg-zinc-950 text-white hover:bg-zinc-800\"\r\n            }\r\n        `}\r\n        >\r\n          {plan.cta}\r\n        </motion.button>\r\n      </motion.div>\r\n  );\r\n}\r\n\r\n// ─── Main Component ──────────────────────────────────────────────────────────\r\n\r\nexport default function PricingSection() {\r\n  return (\r\n      <section className=\"w-full bg-zinc-50 py-20 px-4 font-sans\">\r\n        <div className=\"max-w-5xl mx-auto\">\r\n          {/* Header */}\r\n          <motion.div\r\n              initial={{ opacity: 0, y: 20 }}\r\n              whileInView={{ opacity: 1, y: 0 }}\r\n              viewport={{ once: true }}\r\n              transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}\r\n              className=\"text-center mb-12\"\r\n          >\r\n            <p className=\"text-xs font-medium uppercase tracking-widest text-zinc-400 mb-3\">\r\n              Pricing &amp; Plan\r\n            </p>\r\n            <h2 className=\"text-4xl md:text-5xl font-bold tracking-tight text-zinc-950\">\r\n              No Contract, No Surprises\r\n            </h2>\r\n          </motion.div>\r\n\r\n          {/* Cards grid + bottom bar layout */}\r\n          <div className=\"grid grid-cols-1 md:grid-cols-3 gap-5\">\r\n            {/* Colonne gauche : 2 premières cartes + bottom bar */}\r\n            <div className=\"md:col-span-2 flex flex-col gap-5\">\r\n              <motion.div\r\n                  variants={containerVariants}\r\n                  initial=\"hidden\"\r\n                  whileInView=\"visible\"\r\n                  viewport={{ once: true, margin: \"-60px\" }}\r\n                  className=\"grid grid-cols-1 md:grid-cols-2 gap-5\"\r\n              >\r\n                {plans.slice(0, 2).map((plan, i) => (\r\n                    <PricingCard key={plan.title} plan={plan} index={i} />\r\n                ))}\r\n              </motion.div>\r\n\r\n              {/* Bottom bar */}\r\n              <motion.div\r\n                  initial={{ opacity: 0, y: 16 }}\r\n                  whileInView={{ opacity: 1, y: 0 }}\r\n                  viewport={{ once: true }}\r\n                  transition={{ duration: 0.45, delay: 0.3, ease: \"easeOut\" }}\r\n                  className=\"flex flex-col sm:flex-row items-center justify-between gap-4 bg-white border border-zinc-200 rounded-2xl px-7 py-5\"\r\n              >\r\n                <p className=\"text-sm font-semibold text-zinc-900\">\r\n                  Didn't find the answer?\r\n                </p>\r\n                <div className=\"flex items-center gap-6\">\r\n                  <motion.a\r\n                      href=\"mailto:anelka.bag@gmail.com\"\r\n                      whileHover={{ scale: 1.04 }}\r\n                      className=\"flex items-center gap-2 text-sm text-zinc-600 hover:text-zinc-900 transition-colors\"\r\n                  >\r\n                    <Mail size={15} />\r\n                    Email us\r\n                  </motion.a>\r\n                  <motion.a\r\n                      href=\"https://t.me/@anelkabag\"\r\n                      whileHover={{ scale: 1.04 }}\r\n                      className=\"flex items-center gap-2 text-sm text-zinc-600 hover:text-zinc-900 transition-colors\"\r\n                  >\r\n                    <Send size={15} />\r\n                    Chat on Telegram\r\n                  </motion.a>\r\n                </div>\r\n              </motion.div>\r\n            </div>\r\n\r\n            {/* Colonne droite : carte Custom (pleine hauteur) */}\r\n            <motion.div\r\n                variants={containerVariants}\r\n                initial=\"hidden\"\r\n                whileInView=\"visible\"\r\n                viewport={{ once: true, margin: \"-60px\" }}\r\n                className=\"h-full\"\r\n            >\r\n              <PricingCard key={plans[2].title} plan={plans[2]} index={2} />\r\n            </motion.div>\r\n          </div>\r\n        </div>\r\n      </section>\r\n  );\r\n}",
      "type": "registry:block",
      "target": "components/blocks/pricing-ex-2.tsx"
    }
  ],
  "type": "registry:block"
}