{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-01",
  "description": "CTA with heading, grid background, and animated side lines.",
  "dependencies": [
    "motion/react",
    "next-themes"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/blocks/cta-01/page.tsx",
      "content": "import CtaSection from \"@/registry/blocks/cta-01/components/cta\"\n\nexport default function CtaPage() {\n  return (\n    <div className=\"w-full max-w-full\">\n      <CtaSection />\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/cta/page.tsx"
    },
    {
      "path": "registry/blocks/cta-01/components/cta.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport Link from \"next/link\"\nimport { motion } from \"motion/react\"\nimport { useTheme } from \"next-themes\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype CtaVariant = \"dark\" | \"light\"\n\ninterface CtaSectionProps {\n  /** Override app theme when set; otherwise follows the theme toggler */\n  variant?: CtaVariant\n}\n\nconst CtaSection = ({ variant }: CtaSectionProps) => {\n  const { resolvedTheme } = useTheme()\n  const [mounted, setMounted] = React.useState(false)\n\n  React.useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  // Use resolvedTheme only after mount to avoid hydration mismatch (server has no theme)\n  const theme = (variant ??\n    (mounted ? resolvedTheme : undefined) ??\n    \"dark\") as CtaVariant\n  const isLight = theme === \"light\"\n\n  return (\n    <>\n      {/* Outer wrapper: full-width extended background (top and bottom) */}\n      <div\n        className={cn(\n          \"relative min-h-[70vh] w-full pb-24 md:pb-32\",\n          isLight ? \"bg-neutral-50\" : \"bg-neutral-950\"\n        )}\n        data-theme={theme}\n      >\n        {/* Full-width subtle grid that extends across the section */}\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 bg-[size:3rem_3rem]\",\n            isLight\n              ? \"bg-[linear-gradient(rgba(0,0,0,.04)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,.04)_1px,transparent_1px)]\"\n              : \"bg-[linear-gradient(rgba(255,255,255,.015)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,.015)_1px,transparent_1px)]\"\n          )}\n          aria-hidden\n        />\n        {/* Inner CTA container: content band with focused grid */}\n        <div className=\"relative mx-auto flex min-h-[70vh] max-w-7xl flex-col items-center justify-center px-4 pt-24 pb-24 md:pt-32 md:pb-32\">\n          {/* Subtle grid background (radial mask for content area) */}\n          <div\n            className={cn(\n              \"pointer-events-none absolute inset-0 [mask-image:radial-gradient(ellipse_80%_60%_at_50%_50%,black,transparent)] bg-[size:3rem_3rem]\",\n              isLight\n                ? \"bg-[linear-gradient(rgba(0,0,0,.06)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,.06)_1px,transparent_1px)]\"\n                : \"bg-[linear-gradient(rgba(255,255,255,.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,.02)_1px,transparent_1px)]\"\n            )}\n            aria-hidden\n          />\n          <motion.div\n            initial={{\n              opacity: 0,\n            }}\n            whileInView={{\n              opacity: 1,\n            }}\n            transition={{\n              duration: 0.4,\n              delay: 0,\n              ease: \"easeInOut\",\n            }}\n            viewport={{ once: true }}\n            className=\"absolute left-0 hidden h-full w-24 md:block\"\n          >\n            <svg\n              className=\"h-full w-full\"\n              width=\"100%\"\n              height=\"100%\"\n              viewBox=\"0 0 30 120\"\n              fill=\"none\"\n            >\n              <g stroke={`url(#left-fadeStroke-${theme})`} strokeWidth=\"0.4\">\n                <path d=\"M 1 12 v 65 l 28 24 v 70 \" />\n              </g>\n              <g mask={`url(#left-mask-${theme})`}>\n                <circle\n                  className=\"leftrightline left-line\"\n                  cx=\"0\"\n                  cy=\"0\"\n                  r=\"12\"\n                  fill={`url(#left-blue-grad-${theme})`}\n                />\n              </g>\n              <defs>\n                <mask id={`left-mask-${theme}`}>\n                  <path\n                    d=\"M 1 12 v 65 l 28 24 v 70\"\n                    strokeWidth=\"0.4\"\n                    stroke=\"white\"\n                  />\n                </mask>\n                <linearGradient\n                  id={`left-fadeStroke-${theme}`}\n                  gradientUnits=\"userSpaceOnUse\"\n                  x1=\"0\"\n                  y1=\"12\"\n                  x2=\"0\"\n                  y2=\"170\"\n                >\n                  <stop\n                    offset=\"0%\"\n                    stopColor={isLight ? \"#737373\" : \"#404040\"}\n                    stopOpacity=\"0\"\n                  />\n                  <stop\n                    offset=\"10%\"\n                    stopColor={isLight ? \"#737373\" : \"#404040\"}\n                    stopOpacity=\"1\"\n                  />\n                  <stop\n                    offset=\"90%\"\n                    stopColor={isLight ? \"#737373\" : \"#404040\"}\n                    stopOpacity=\"1\"\n                  />\n                  <stop\n                    offset=\"100%\"\n                    stopColor={isLight ? \"#737373\" : \"#404040\"}\n                    stopOpacity=\"0\"\n                  />\n                </linearGradient>\n                <radialGradient id={`left-blue-grad-${theme}`} fx=\"1\">\n                  <stop offset=\"0%\" stopColor=\"#3b82f6\" />\n                  <stop offset=\"100%\" stopColor=\"transparent\" />\n                </radialGradient>\n              </defs>\n            </svg>\n          </motion.div>\n          <motion.div\n            initial={{\n              opacity: 0,\n            }}\n            whileInView={{\n              opacity: 1,\n            }}\n            transition={{\n              duration: 0.4,\n              delay: 0,\n              ease: \"easeInOut\",\n            }}\n            viewport={{ once: true }}\n            className=\"absolute right-0 hidden h-full w-24 md:block\"\n          >\n            <svg\n              className=\"h-full w-full\"\n              width=\"100%\"\n              height=\"100%\"\n              viewBox=\"0 0 30 120\"\n              fill=\"none\"\n            >\n              <g stroke={`url(#right-fadeStroke-${theme})`} strokeWidth=\"0.4\">\n                <path d=\"M 29 12 v 65 l -28 24 v 65\" />\n              </g>\n              <g mask={`url(#right-mask-${theme})`}>\n                <circle\n                  className=\"leftrightline right-line\"\n                  cx=\"0\"\n                  cy=\"0\"\n                  r=\"12\"\n                  fill={`url(#right-blue-grad-${theme})`}\n                />\n              </g>\n              <defs>\n                <mask id={`right-mask-${theme}`}>\n                  <path\n                    d=\"M 29 12 v 65 l -28 24 v 65\"\n                    strokeWidth=\"0.4\"\n                    stroke=\"white\"\n                  />\n                </mask>\n                <linearGradient\n                  id={`right-fadeStroke-${theme}`}\n                  gradientUnits=\"userSpaceOnUse\"\n                  x1=\"0\"\n                  y1=\"12\"\n                  x2=\"0\"\n                  y2=\"170\"\n                >\n                  <stop\n                    offset=\"0%\"\n                    stopColor={isLight ? \"#737373\" : \"#404040\"}\n                    stopOpacity=\"0\"\n                  />\n                  <stop\n                    offset=\"10%\"\n                    stopColor={isLight ? \"#737373\" : \"#404040\"}\n                    stopOpacity=\"1\"\n                  />\n                  <stop\n                    offset=\"90%\"\n                    stopColor={isLight ? \"#737373\" : \"#404040\"}\n                    stopOpacity=\"1\"\n                  />\n                  <stop\n                    offset=\"100%\"\n                    stopColor={isLight ? \"#737373\" : \"#404040\"}\n                    stopOpacity=\"0\"\n                  />\n                </linearGradient>\n                <radialGradient id={`right-blue-grad-${theme}`} fx=\"1\">\n                  <stop offset=\"0%\" stopColor=\"#3b82f6\" />\n                  <stop offset=\"100%\" stopColor=\"transparent\" />\n                </radialGradient>\n              </defs>\n            </svg>\n          </motion.div>\n          <motion.h1\n            initial={{\n              y: 10,\n              filter: \"blur(10px)\",\n              opacity: 0,\n            }}\n            whileInView={{\n              y: 0,\n              filter: \"blur(0px)\",\n              opacity: 1,\n            }}\n            transition={{\n              duration: 0.5,\n              delay: 0.1,\n              ease: \"easeInOut\",\n            }}\n            viewport={{ once: true }}\n            className={cn(\n              \"relative z-10 mx-auto mt-48 max-w-3xl bg-clip-text pb-2 text-center text-5xl leading-[1.15] font-medium tracking-tighter text-balance text-transparent md:text-[4.2rem]\",\n              isLight\n                ? \"bg-gradient-to-br from-neutral-900 via-neutral-800 to-neutral-700\"\n                : \"bg-gradient-to-br from-neutral-100 via-neutral-100 via-50% to-neutral-100/40\"\n            )}\n          >\n            Lightweight Analytics Built For Simplicity\n          </motion.h1>\n          <motion.p\n            initial={{\n              y: 10,\n              filter: \"blur(10px)\",\n              opacity: 0,\n            }}\n            whileInView={{\n              y: 0,\n              filter: \"blur(0px)\",\n              opacity: 1,\n            }}\n            transition={{\n              duration: 0.4,\n              delay: 0.3,\n              ease: \"easeInOut\",\n            }}\n            viewport={{ once: true }}\n            className={cn(\n              \"relative z-10 mx-auto mb-12 max-w-sm bg-clip-text text-center text-[0.8rem] leading-relaxed text-balance text-transparent sm:max-w-[32rem] sm:text-[0.87rem] lg:text-[1rem]\",\n              isLight\n                ? \"bg-gradient-to-br from-neutral-600 via-neutral-500 to-neutral-600/90\"\n                : \"bg-gradient-to-br from-neutral-400 via-neutral-300 to-neutral-400/90\"\n            )}\n          >\n            Track page views and visitors in real-time with a lightweight,\n            privacy-first tool made for developers.\n          </motion.p>\n          <motion.div\n            initial={{\n              y: 5,\n              filter: \"blur(5px)\",\n              opacity: 0,\n            }}\n            whileInView={{\n              y: 0,\n              filter: \"blur(0px)\",\n              opacity: 1,\n            }}\n            transition={{\n              duration: 0.3,\n              delay: 0.5,\n              ease: \"easeInOut\",\n            }}\n            viewport={{ once: true }}\n            className=\"relative z-10\"\n          >\n            <Link\n              href={\"/dashboard/sites\"}\n              className={cn(\n                \"group flex items-center justify-center gap-2 rounded-full px-8 py-3.5 text-sm font-semibold transition-all duration-300 md:text-[1rem]\",\n                isLight\n                  ? \"border border-neutral-300 bg-white text-neutral-900 shadow-sm hover:border-neutral-400 hover:bg-neutral-50\"\n                  : \"border border-white/15 bg-neutral-950/90 text-white shadow-[0_0_0_1px_rgba(255,255,255,0.08),inset_0_1px_0_rgba(255,255,255,0.05)] hover:border-white/25 hover:bg-neutral-900/90\"\n              )}\n            >\n              {/* Get Started */}\n              <TextGlitch text=\"Get Started\" />\n            </Link>\n          </motion.div>\n        </div>\n      </div>\n      <style>\n        {`    \n.leftrightline {\n  offset-anchor: 10px 0px;\n  animation: leftrightline-animation-path;\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  animation-duration: 3s;\n}\n\n.left-line {\n  offset-path: path(\n    \"M 1 12 v 65 l 28 24 v 80\"\n  );\n}\n.right-line {\n  offset-path: path(\n    \"M 29 12 v 65 l -28 24 v 80\"\n  );\n}\n\n@keyframes leftrightline-animation-path {\n  0% {\n    offset-distance: 0%;\n  }\n  60% {\n    offset-distance: 100%;\n  }\n  100% {\n    offset-distance: 100%;\n  }\n}`}\n      </style>\n    </>\n  )\n}\n\nexport default CtaSection\n\nfunction TextGlitch({ text }: { text: string }) {\n  return (\n    <div className=\"relative overflow-hidden\">\n      <span className=\"invisible\">{text}</span>\n      <span className=\"absolute top-0 left-0 font-semibold transition-transform duration-500 ease-in-out group-hover:-translate-y-full hover:duration-300\">\n        {text}\n      </span>\n      <span className=\"absolute top-0 left-0 translate-y-full font-semibold transition-transform duration-500 ease-in-out group-hover:translate-y-0 hover:duration-300\">\n        {text}\n      </span>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "cta"
  ],
  "type": "registry:block"
}