{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "how-it-works",
  "type": "registry:block",
  "title": "How it works",
  "description": "How it works",
  "files": [
    {
      "path": "components/usages/howitworksusage.tsx",
      "content": "\"use client\";\n\nimport HowItWorks from \"@/registry/open-source/how-it-works\";\n\nexport default function HowItWorksDemo() {\n    const features = [\n        {\n            title: \"Create Account\",\n            description:\n                \"Sign up in minutes. Enter your details and verify your email to get started.\",\n            colors: {\n                bg: \"bg-orange-50 dark:bg-orange-500/10\",\n                text: \"text-orange-500 dark:text-orange-400\",\n                border: \"border-orange-100 dark:border-orange-500/20\",\n            },\n        },\n        {\n            title: \"Verify Identity\",\n            description:\n                \"Complete your profile verification to ensure secure transactions and compliance.\",\n            colors: {\n                bg: \"bg-blue-50 dark:bg-blue-500/10\",\n                text: \"text-blue-600 dark:text-blue-400\",\n                border: \"border-blue-100 dark:border-blue-500/20\",\n            },\n        },\n        {\n            title: \"Select Plan\",\n            description:\n                \"Choose from a variety of investment plans tailored to your financial goals.\",\n            colors: {\n                bg: \"bg-purple-50 dark:bg-purple-500/10\",\n                text: \"text-purple-600 dark:text-purple-400\",\n                border: \"border-purple-100 dark:border-purple-500/20\",\n            },\n        },\n        {\n            title: \"Analyze & Invest\",\n            description:\n                \"Review returns and make your first investment with confidence.\",\n            colors: {\n                bg: \"bg-orange-50 dark:bg-orange-500/10\",\n                text: \"text-orange-500 dark:text-orange-400\",\n                border: \"border-orange-100 dark:border-orange-500/20\",\n            },\n        },\n        {\n            title: \"Track Growth\",\n            description:\n                \"Monitor your portfolio in real-time and watch your wealth grow over time.\",\n            colors: {\n                bg: \"bg-blue-50 dark:bg-blue-500/10\",\n                text: \"text-blue-600 dark:text-blue-400\",\n                border: \"border-blue-100 dark:border-blue-500/20\",\n            },\n        },\n    ];\n\n    const stepPositions = [\n        { className: \"md:absolute md:top-0 md:left-[15%]\", rotate: \"rotate-6\" },\n        {\n            className: \"md:absolute md:top-[120px] md:right-[15%]\",\n            rotate: \"-rotate-6\",\n        },\n        {\n            className: \"md:absolute md:top-[450px] md:left-[15%]\",\n            rotate: \"rotate-6\",\n        },\n        {\n            className: \"md:absolute md:top-[570px] md:right-[10%]\",\n            rotate: \"-rotate-6\",\n        },\n        {\n            className: \"md:absolute md:top-[850px] md:left-[15%]\",\n            rotate: \"rotate-6\",\n        },\n    ];\n\n    return (\n        <div className=\"w-full\">\n            <HowItWorks features={features} stepPositions={stepPositions} />\n        </div>\n    );\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/howitworksusage.tsx",
      "content": "\"use client\";\n\nimport HowItWorks from \"@/registry/open-source/how-it-works\";\n\nexport default function HowItWorksDemo() {\n    const features = [\n        {\n            title: \"Create Account\",\n            description:\n                \"Sign up in minutes. Enter your details and verify your email to get started.\",\n            colors: {\n                bg: \"bg-orange-50 dark:bg-orange-500/10\",\n                text: \"text-orange-500 dark:text-orange-400\",\n                border: \"border-orange-100 dark:border-orange-500/20\",\n            },\n        },\n        {\n            title: \"Verify Identity\",\n            description:\n                \"Complete your profile verification to ensure secure transactions and compliance.\",\n            colors: {\n                bg: \"bg-blue-50 dark:bg-blue-500/10\",\n                text: \"text-blue-600 dark:text-blue-400\",\n                border: \"border-blue-100 dark:border-blue-500/20\",\n            },\n        },\n        {\n            title: \"Select Plan\",\n            description:\n                \"Choose from a variety of investment plans tailored to your financial goals.\",\n            colors: {\n                bg: \"bg-purple-50 dark:bg-purple-500/10\",\n                text: \"text-purple-600 dark:text-purple-400\",\n                border: \"border-purple-100 dark:border-purple-500/20\",\n            },\n        },\n        {\n            title: \"Analyze & Invest\",\n            description:\n                \"Review returns and make your first investment with confidence.\",\n            colors: {\n                bg: \"bg-orange-50 dark:bg-orange-500/10\",\n                text: \"text-orange-500 dark:text-orange-400\",\n                border: \"border-orange-100 dark:border-orange-500/20\",\n            },\n        },\n        {\n            title: \"Track Growth\",\n            description:\n                \"Monitor your portfolio in real-time and watch your wealth grow over time.\",\n            colors: {\n                bg: \"bg-blue-50 dark:bg-blue-500/10\",\n                text: \"text-blue-600 dark:text-blue-400\",\n                border: \"border-blue-100 dark:border-blue-500/20\",\n            },\n        },\n    ];\n\n    const stepPositions = [\n        { className: \"md:absolute md:top-0 md:left-[15%]\", rotate: \"rotate-6\" },\n        {\n            className: \"md:absolute md:top-[120px] md:right-[15%]\",\n            rotate: \"-rotate-6\",\n        },\n        {\n            className: \"md:absolute md:top-[450px] md:left-[15%]\",\n            rotate: \"rotate-6\",\n        },\n        {\n            className: \"md:absolute md:top-[570px] md:right-[10%]\",\n            rotate: \"-rotate-6\",\n        },\n        {\n            className: \"md:absolute md:top-[850px] md:left-[15%]\",\n            rotate: \"rotate-6\",\n        },\n    ];\n\n    return (\n        <div className=\"w-full\">\n            <HowItWorks features={features} stepPositions={stepPositions} />\n        </div>\n    );\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/how-it-works.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { LazyMotion, domAnimation, m } from \"motion/react\";\n\n// Credit:\n// https://www.chamaac.com/components/sections/how-it-works\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-linear-to-r\"></div>\n                <div className=\"from-background pointer-events-none absolute inset-y-0 right-0 w-1/2 bg-linear-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-(--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:ui"
    }
  ]
}