{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-02",
  "description": "CTA with heading, button, and orbiting app icons.",
  "dependencies": [
    "motion/react",
    "next-themes"
  ],
  "registryDependencies": [
    "button",
    "grid",
    "utils"
  ],
  "files": [
    {
      "path": "registry/blocks/cta-02/page.tsx",
      "content": "import CtaPage from \"@/registry/blocks/cta-02/components/cta-02\"\n\nexport default function Cta02Page() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center px-4\">\n      <CtaPage />\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/cta/page.tsx"
    },
    {
      "path": "registry/blocks/cta-02/components/cta-02.tsx",
      "content": "import Link from \"next/link\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Grid } from \"@/registry/eldoraui/grid\"\n\nimport { Icons } from \"./icons\"\nimport { OrbitingCircles } from \"./orbiting-circle\"\n\nconst OribitingCirclesAnimation = ({ className }: { className?: string }) => {\n  return (\n    <div\n      className={cn(\n        \"bg-background absolute inset-0 z-0 flex flex-col overflow-visible\",\n        className\n      )}\n      aria-hidden\n    >\n      <div className=\"relative flex h-[50%] min-h-[240px] w-full shrink-0 items-center justify-center overflow-visible\">\n        <div className=\"from-background pointer-events-none absolute bottom-0 left-0 z-20 h-20 w-full bg-gradient-to-t to-transparent\" />\n        <div className=\"from-background pointer-events-none absolute top-0 left-0 z-20 h-10 w-full bg-gradient-to-b to-transparent\" />\n        <div className=\"relative -mt-60 flex h-full w-full items-center justify-center\">\n          <OrbitingCircles\n            index={0}\n            iconSize={150}\n            radius={150}\n            reverse\n            speed={1}\n          >\n            <Icons.boat />\n            <Icons.supabase />\n            <Icons.figma />\n          </OrbitingCircles>\n          <OrbitingCircles index={1} iconSize={150} radius={300} speed={0.5}>\n            <Icons.workos />\n            <Icons.runwayml />\n            <Icons.gemini />\n          </OrbitingCircles>\n          <OrbitingCircles\n            index={2}\n            iconSize={150}\n            radius={440}\n            reverse\n            speed={0.5}\n          >\n            <Icons.vercel />\n            <Icons.replit />\n            <Icons.posthog />\n          </OrbitingCircles>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default function CtaPage() {\n  return (\n    <Grid\n      columns={1}\n      rows={1}\n      height=\"min-h-[36rem]\"\n      width=\"w-full\"\n      showPlusIcons={false}\n    >\n      <section className=\"relative min-h-[36rem] w-full overflow-hidden\">\n        <OribitingCirclesAnimation />\n        <div\n          className=\"via-background/40 to-background/70 pointer-events-none absolute inset-0 z-10 bg-gradient-to-b from-transparent from-35% via-55% to-100% backdrop-blur-[0.8px]\"\n          aria-hidden\n        />\n        <div className=\"relative z-20 flex min-h-[36rem] flex-col items-center justify-center gap-6 px-4 py-12\">\n          <h2 className=\"text-foreground max-w-2xl text-center text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">\n            Connect your Current Stack and Start Automating\n          </h2>\n          <Button\n            asChild\n            size=\"lg\"\n            className=\"bg-foreground text-background hover:bg-foreground/90 rounded-xl border-0 px-8 py-6 text-base font-medium shadow-[0_4px_14px_rgba(0,0,0,0.25)] transition-colors dark:shadow-[0_4px_14px_rgba(255,255,255,0.2)]\"\n          >\n            <Link href=\"#\">Start Building for Free</Link>\n          </Button>\n        </div>\n      </section>\n    </Grid>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/cta-02/components/orbiting-circle.tsx",
      "content": "\"use client\"\n\nimport React, { useEffect, useRef, useState } from \"react\"\nimport { cubicBezier, HTMLMotionProps, motion, useInView } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface OrbitingCirclesProps extends HTMLMotionProps<\"div\"> {\n  className?: string\n  children?: React.ReactNode\n  reverse?: boolean\n  duration?: number\n  delay?: number\n  radius?: number\n  path?: boolean\n  iconSize?: number\n  speed?: number\n  index?: number\n  startAnimationDelay?: number\n  once?: boolean\n}\n\nexport function OrbitingCircles({\n  className,\n  children,\n  reverse,\n  duration = 20,\n  radius = 160,\n  path = true,\n  iconSize = 30,\n  speed = 1,\n  index = 0,\n  startAnimationDelay = 0,\n  once = false,\n  ...props\n}: OrbitingCirclesProps) {\n  const calculatedDuration = duration / speed\n\n  const ref = useRef(null)\n  const isInView = useInView(ref, { once: true })\n  const [shouldAnimate, setShouldAnimate] = useState(false)\n\n  useEffect(() => {\n    if (isInView) {\n      setShouldAnimate(true)\n    }\n  }, [isInView])\n  return (\n    <>\n      {path && (\n        <motion.div ref={ref}>\n          {shouldAnimate && (\n            <motion.div\n              initial={{ scale: 0, opacity: 0 }}\n              animate={{ scale: 1, opacity: 1 }}\n              transition={{\n                duration: 0.8,\n                ease: [0.23, 1, 0.32, 1],\n                delay: index * 0.2 + startAnimationDelay,\n                type: \"spring\",\n                stiffness: 120,\n                damping: 18,\n                mass: 1,\n              }}\n              className=\"pointer-events-none absolute inset-0\"\n              style={{\n                width: radius * 2,\n                height: radius * 2,\n                left: `calc(50% - ${radius}px)`,\n                top: `calc(50% - ${radius}px)`,\n              }}\n            >\n              <div\n                className={cn(\n                  \"size-full rounded-full\",\n                  \"border border-black/[0.08] dark:border-white/[0.08]\",\n                  \"bg-gradient-to-b from-black/[0.06] from-0% via-black/[0.02] via-50% to-transparent\",\n                  \"dark:from-white/[0.06] dark:via-white/[0.02] dark:to-transparent\",\n                  className\n                )}\n              />\n            </motion.div>\n          )}\n        </motion.div>\n      )}\n      {shouldAnimate &&\n        React.Children.map(children, (child, index) => {\n          const angle = (360 / React.Children.count(children)) * index\n          return (\n            <div\n              style={\n                {\n                  \"--duration\": calculatedDuration,\n                  \"--radius\": radius * 0.98,\n                  \"--angle\": angle,\n                  \"--icon-size\": `${iconSize}px`,\n                } as React.CSSProperties\n              }\n              className={cn(\n                \"animate-orbit absolute z-20 flex size-[var(--icon-size)] transform-gpu items-center justify-center rounded-full p-1\",\n                { \"[animation-direction:reverse]\": reverse }\n              )}\n            >\n              <motion.div\n                key={`orbit-child-${index}`}\n                initial={{ scale: 0, opacity: 0 }}\n                animate={{ scale: 1, opacity: 1 }}\n                transition={{\n                  duration: 0.5,\n                  delay: 0.6 + index * 0.2 + startAnimationDelay,\n                  ease: cubicBezier(0, 0, 0.58, 1),\n                  type: \"spring\",\n                  stiffness: 120,\n                  damping: 18,\n                  mass: 1,\n                }}\n                {...props}\n              >\n                {child}\n              </motion.div>\n            </div>\n          )\n        })}\n    </>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "cta"
  ],
  "type": "registry:block"
}