{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "how-it-works",
  "title": "How It Works",
  "description": "A visual flow component showing a step-by-step process with connected cards.",
  "dependencies": [],
  "files": [
    {
      "path": "registry/chamaac/how-it-works/how-it-works.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { LazyMotion, domAnimation, m } from \"motion/react\";\n\ninterface CardProps {\n  number: string;\n  title: string;\n  description: string;\n  colorTheme?: \"orange\" | \"blue\" | \"purple\";\n  className?: string;\n  rotate?: string;\n  colors?: {\n    bg: string;\n    text: string;\n    border: string;\n  };\n}\n\nconst Pin = ({ className }: { className?: string }) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    className={className}\n  >\n    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n    <path d=\"M16 3a1 1 0 0 1 .117 1.993l-.117 .007v4.764l1.894 3.789a1 1 0 0 1 .1 .331l.006 .116v2a1 1 0 0 1 -.883 .993l-.117 .007h-4v4a1 1 0 0 1 -1.993 .117l-.007 -.117v-4h-4a1 1 0 0 1 -.993 -.883l-.007 -.117v-2a1 1 0 0 1 .06 -.34l.046 -.107l1.894 -3.791v-4.762a1 1 0 0 1 -.117 -1.993l.117 -.007h8z\" />\n  </svg>\n);\n\nconst Card = ({\n  number,\n  title,\n  description,\n  colorTheme = \"blue\",\n  className,\n  rotate,\n  colors: customColors,\n}: CardProps) => {\n  const defaultBgColors = {\n    orange: \"bg-orange-50 dark:bg-orange-500/10\",\n    blue: \"bg-blue-50 dark:bg-blue-500/10\",\n    purple: \"bg-purple-50 dark:bg-purple-500/10\",\n  };\n  const defaultTextColors = {\n    orange: \"text-orange-500 dark:text-orange-400\",\n    blue: \"text-blue-600 dark:text-blue-400\",\n    purple: \"text-purple-600 dark:text-purple-400\",\n  };\n  const defaultBorderColors = {\n    orange: \"border-orange-100 dark:border-orange-500/20\",\n    blue: \"border-blue-100 dark:border-blue-500/20\",\n    purple: \"border-purple-100 dark:border-purple-500/20\",\n  };\n\n  const bgColor = customColors?.bg || defaultBgColors[colorTheme];\n  const textColor = customColors?.text || defaultTextColors[colorTheme];\n  const borderColor = customColors?.border || defaultBorderColors[colorTheme];\n\n  return (\n    <div\n      className={`relative w-full md:w-[280px] transition-transform duration-300 hover:z-30 hover:scale-105 ${rotate} ${className}`}\n    >\n      <div className=\"bg-white dark:bg-neutral-900 p-2 rounded-[25px] shadow-[0px_10px_20px_0px_#D3D3D3] dark:shadow-none border border-neutral-100 dark:border-neutral-800\">\n        <Pin className={`w-8 h-8 ${textColor} z-20 mb-6 mx-auto`} />\n        <div\n          className={`${bgColor} border ${borderColor} rounded-[15px] p-[15px] h-full flex flex-col relative overflow-hidden`}\n        >\n          <span\n            className={`${textColor} text-4xl font-handwriting mb-5`}\n            style={{\n              fontFamily: '\"Comic Sans MS\", \"Chalkboard SE\", sans-serif',\n            }}\n          >\n            {number}\n          </span>\n          <h3 className=\"text-2xl font-semibold text-neutral-800 dark:text-neutral-100 leading-none mb-[10px]\">\n            {title}\n          </h3>\n          <p className=\"text-neutral-500 dark:text-neutral-400 text-sm/5 tracking-tight\">\n            {description}\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface Step {\n  title: string;\n  description: string;\n  colorTheme?: \"orange\" | \"blue\" | \"purple\";\n  colors?: {\n    bg: string;\n    text: string;\n    border: string;\n  };\n}\n\nexport interface StepPosition {\n  className?: string;\n  rotate?: string;\n}\n\nexport interface HowItWorksProps {\n  features?: Step[];\n  className?: string;\n  stepPositions?: StepPosition[];\n}\n\nconst DEFAULT_CARD_POSITIONS: StepPosition[] = [\n  { className: \"md:absolute md:top-0 md:left-[15%]\", rotate: \"rotate-8\" },\n  {\n    className: \"md:absolute md:top-[120px] md:right-[15%]\",\n    rotate: \"-rotate-8\",\n  },\n  { className: \"md:absolute md:top-[450px] md:left-[15%]\", rotate: \"rotate-8\" },\n  {\n    className: \"md:absolute md:top-[570px] md:right-[10%]\",\n    rotate: \"-rotate-8\",\n  },\n  { className: \"md:absolute md:top-[850px] md:left-[15%]\", rotate: \"rotate-8\" },\n];\n\nexport default function HowItWorks({\n  features,\n  className,\n  stepPositions,\n}: HowItWorksProps) {\n  const defaultFeatures: Step[] = [\n    {\n      title: \"Create Account\",\n      description:\n        \"Sign up in minutes. Enter your details and verify your email to get started.\",\n      colorTheme: \"orange\",\n    },\n    {\n      title: \"Verify Identity\",\n      description:\n        \"Complete your profile verification to ensure secure transactions and compliance.\",\n      colorTheme: \"blue\",\n    },\n    {\n      title: \"Select Plan\",\n      description:\n        \"Choose from a variety of investment plans tailored to your financial goals.\",\n      colorTheme: \"purple\",\n    },\n    {\n      title: \"Analyze & Invest\",\n      description:\n        \"Review returns and make your first investment with confidence.\",\n      colorTheme: \"orange\",\n    },\n    {\n      title: \"Track Growth\",\n      description:\n        \"Monitor your portfolio in real-time and watch your wealth grow over time.\",\n      colorTheme: \"blue\",\n    },\n  ];\n\n  const data = features && features.length > 0 ? features : defaultFeatures;\n  const positions = stepPositions || DEFAULT_CARD_POSITIONS;\n\n  let height = 1130;\n  if (data.length === 1) height = 400;\n  else if (data.length === 2) height = 450;\n  else if (data.length === 3) height = 800;\n  else if (data.length === 4) height = 900;\n  else height = 1130;\n\n  return (\n    <LazyMotion features={domAnimation}>\n      <div\n        className={`bg-white dark:bg-black max-md:pt-10 max-md:pb-25 md:py-20 px-8 relative ${className}`}\n      >\n        <div\n          className=\"absolute inset-0 pointer-events-none opacity-[0.08] dark:opacity-[0.15]\"\n          style={{\n            backgroundImage: \"linear-gradient(#000 1px, transparent 1px)\",\n            backgroundSize: \"100% 32px\",\n            marginTop: \"4px\",\n          }}\n        ></div>\n        <div\n          className=\"absolute inset-0 pointer-events-none opacity-0 dark:opacity-[0.1]\"\n          style={{\n            backgroundImage: \"linear-gradient(#fff 1px, transparent 1px)\",\n            backgroundSize: \"100% 32px\",\n            marginTop: \"4px\",\n          }}\n        ></div>\n        <div className=\"from-background pointer-events-none absolute inset-y-0 left-0 w-1/2 bg-gradient-to-r\"></div>\n        <div className=\"from-background pointer-events-none absolute inset-y-0 right-0 w-1/2 bg-gradient-to-l\"></div>\n\n        <div className=\"max-w-6xl mx-auto relative z-10\">\n          <div\n            className=\"relative w-full max-w-[1000px] mx-auto flex flex-col space-y-8 md:space-y-0 md:block h-auto md:h-[var(--md-height)]\"\n            style={{ \"--md-height\": `${height}px` } as React.CSSProperties}\n          >\n            {data.length > 1 && (\n              <svg\n                className=\"absolute top-0 left-0 w-full h-full pointer-events-none hidden md:block z-0\"\n                viewBox={`0 0 1000 ${height}`}\n                preserveAspectRatio=\"none\"\n              >\n                {(() => {\n                  const pathD = data.reduce((acc, _, index) => {\n                    if (index >= data.length - 1) return acc;\n                    if (index === 0)\n                      return \"M 290 150 C 500 150, 550 270, 710 270\"; // 1 -> 2\n                    if (index === 1)\n                      return acc + \" C 850 270, 500 350, 290 450\"; // 2 -> 3\n                    if (index === 2)\n                      return acc + \" C 290 600, 550 720, 750 720\"; // 3 -> 4\n                    if (index === 3)\n                      return acc + \" C 950 720, 500 800, 290 850\"; // 4 -> 5\n                    return acc;\n                  }, \"\");\n                  return (\n                    <m.path\n                      d={pathD}\n                      stroke=\"currentColor\"\n                      className=\"text-neutral-300 dark:text-neutral-700\"\n                      strokeWidth=\"2\"\n                      strokeDasharray=\"8 6\"\n                      fill=\"none\"\n                      strokeLinecap=\"round\"\n                      vectorEffect=\"non-scaling-stroke\"\n                      initial={{ strokeDashoffset: 0 }}\n                      animate={{\n                        strokeDashoffset: -140, // Multiple of 14 (8+6) for seamless loop\n                      }}\n                      transition={{\n                        duration: 3,\n                        repeat: Infinity,\n                        ease: \"linear\",\n                      }}\n                    />\n                  );\n                })()}\n              </svg>\n            )}\n\n            {data.map((step, index) => {\n              const position = positions[index % positions.length];\n\n              return (\n                <Card\n                  key={step.title}\n                  number={`0${index + 1}`}\n                  title={step.title}\n                  description={step.description}\n                  colorTheme={step.colorTheme || \"blue\"}\n                  colors={step.colors}\n                  rotate={position.rotate}\n                  className={position.className}\n                />\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    </LazyMotion>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}