{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "circuit-board",
  "type": "registry:ui",
  "description": "Animated SVG circuit illustration with glowing traces and a central chip, for hero or product sections",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "registry/default/ui/circuit-board.tsx",
      "content": "\"use client\"\n\nimport { useId } from \"react\"\nimport { ArrowUpRight } from \"lucide-react\"\nimport { motion, type Variants } from \"motion/react\"\n\nconst spring = { type: \"spring\" as const, stiffness: 300, damping: 24 }\n\nconst cardStagger: Variants = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: {\n      staggerChildren: 0.1,\n      delayChildren: 0.15,\n    },\n  },\n}\n\nconst cardFadeUp: Variants = {\n  hidden: { opacity: 0, y: 20, filter: \"blur(8px)\" },\n  visible: {\n    opacity: 1,\n    y: 0,\n    filter: \"blur(0px)\",\n    transition: spring,\n  },\n}\n\nexport function CircuitBoard() {\n  const id = useId()\n\n  return (\n    <div className=\"flex flex-col items-center justify-center\">\n      <style>{`\n        @keyframes pulse-glow {\n          0%, 65%, 100% { opacity: 0; }\n          12%, 28% { opacity: 1; }\n        }\n      `}</style>\n      <div className=\"relative w-full max-w-[891px]\">\n        <svg\n          aria-label=\"Circuit lines connecting to a CPU chip labeled Powered By\"\n          className=\"h-auto w-full overflow-visible\"\n          fill=\"none\"\n          height=\"264\"\n          role=\"img\"\n          viewBox=\"0 0 891 264\"\n          width=\"891\"\n        >\n          <defs>\n            {/* Orange Pulse Gradients */}\n            <linearGradient\n              id={`${id}-orange-pulse-1`}\n              x1=\"0%\"\n              x2=\"100%\"\n              y1=\"0%\"\n              y2=\"0%\"\n            >\n              <stop offset=\"0%\" stopColor=\"rgba(255, 135, 0, 0)\" />\n              <stop offset=\"50%\" stopColor=\"rgba(255, 135, 0, 1)\" />\n              <stop offset=\"100%\" stopColor=\"rgba(255, 135, 0, 0)\" />\n              <animateTransform\n                attributeName=\"gradientTransform\"\n                dur=\"2s\"\n                from=\"-1 0\"\n                repeatCount=\"indefinite\"\n                to=\"1 0\"\n                type=\"translate\"\n              />\n            </linearGradient>\n\n            <linearGradient\n              id={`${id}-orange-pulse-2`}\n              x1=\"0%\"\n              x2=\"100%\"\n              y1=\"0%\"\n              y2=\"0%\"\n            >\n              <stop offset=\"0%\" stopColor=\"rgba(255, 135, 0, 0)\" />\n              <stop offset=\"50%\" stopColor=\"rgba(255, 135, 0, 1)\" />\n              <stop offset=\"100%\" stopColor=\"rgba(255, 135, 0, 0)\" />\n              <animateTransform\n                attributeName=\"gradientTransform\"\n                dur=\"2.5s\"\n                from=\"-1 0\"\n                repeatCount=\"indefinite\"\n                to=\"1 0\"\n                type=\"translate\"\n              />\n            </linearGradient>\n\n            {/* Blue Pulse Gradients */}\n            <linearGradient\n              id={`${id}-blue-pulse-1`}\n              x1=\"0%\"\n              x2=\"100%\"\n              y1=\"0%\"\n              y2=\"0%\"\n            >\n              <stop offset=\"0%\" stopColor=\"rgba(0, 180, 216, 0)\" />\n              <stop offset=\"50%\" stopColor=\"rgba(0, 180, 216, 1)\" />\n              <stop offset=\"100%\" stopColor=\"rgba(0, 180, 216, 0)\" />\n              <animateTransform\n                attributeName=\"gradientTransform\"\n                dur=\"2s\"\n                from=\"-1 0\"\n                repeatCount=\"indefinite\"\n                to=\"1 0\"\n                type=\"translate\"\n              />\n            </linearGradient>\n\n            <linearGradient\n              id={`${id}-blue-pulse-2`}\n              x1=\"0%\"\n              x2=\"100%\"\n              y1=\"0%\"\n              y2=\"0%\"\n            >\n              <stop offset=\"0%\" stopColor=\"rgba(0, 180, 216, 0)\" />\n              <stop offset=\"50%\" stopColor=\"rgba(0, 180, 216, 1)\" />\n              <stop offset=\"100%\" stopColor=\"rgba(0, 180, 216, 0)\" />\n              <animateTransform\n                attributeName=\"gradientTransform\"\n                dur=\"1.8s\"\n                from=\"-1 0\"\n                repeatCount=\"indefinite\"\n                to=\"1 0\"\n                type=\"translate\"\n              />\n            </linearGradient>\n\n            {/* Pink Pulse Gradient */}\n            <linearGradient\n              id={`${id}-pink-pulse`}\n              x1=\"0%\"\n              x2=\"0%\"\n              y1=\"0%\"\n              y2=\"100%\"\n            >\n              <stop offset=\"0%\" stopColor=\"rgba(255, 0, 128, 0)\" />\n              <stop offset=\"50%\" stopColor=\"rgba(255, 0, 128, 1)\" />\n              <stop offset=\"100%\" stopColor=\"rgba(255, 0, 128, 0)\" />\n              <animateTransform\n                attributeName=\"gradientTransform\"\n                dur=\"2s\"\n                from=\"0 -1\"\n                repeatCount=\"indefinite\"\n                to=\"0 1\"\n                type=\"translate\"\n              />\n            </linearGradient>\n\n            {/* Connector pulse gradients (vertical direction) */}\n            <linearGradient\n              id={`${id}-blue-conn`}\n              x1=\"0%\"\n              x2=\"0%\"\n              y1=\"0%\"\n              y2=\"100%\"\n            >\n              <stop offset=\"0%\" stopColor=\"rgba(0, 180, 216, 0)\" />\n              <stop offset=\"50%\" stopColor=\"rgba(0, 180, 216, 0.8)\" />\n              <stop offset=\"100%\" stopColor=\"rgba(0, 180, 216, 0)\" />\n              <animateTransform\n                attributeName=\"gradientTransform\"\n                dur=\"2s\"\n                from=\"0 -1\"\n                repeatCount=\"indefinite\"\n                to=\"0 1\"\n                type=\"translate\"\n              />\n            </linearGradient>\n            <linearGradient\n              id={`${id}-orange-conn`}\n              x1=\"0%\"\n              x2=\"0%\"\n              y1=\"0%\"\n              y2=\"100%\"\n            >\n              <stop offset=\"0%\" stopColor=\"rgba(255, 135, 0, 0)\" />\n              <stop offset=\"50%\" stopColor=\"rgba(255, 135, 0, 0.8)\" />\n              <stop offset=\"100%\" stopColor=\"rgba(255, 135, 0, 0)\" />\n              <animateTransform\n                attributeName=\"gradientTransform\"\n                dur=\"2s\"\n                from=\"0 -1\"\n                repeatCount=\"indefinite\"\n                to=\"0 1\"\n                type=\"translate\"\n              />\n            </linearGradient>\n            <linearGradient\n              id={`${id}-mixed-conn`}\n              x1=\"0%\"\n              x2=\"0%\"\n              y1=\"0%\"\n              y2=\"100%\"\n            >\n              <stop offset=\"0%\" stopColor=\"rgba(180, 120, 255, 0)\" />\n              <stop offset=\"50%\" stopColor=\"rgba(180, 120, 255, 0.6)\" />\n              <stop offset=\"100%\" stopColor=\"rgba(180, 120, 255, 0)\" />\n              <animateTransform\n                attributeName=\"gradientTransform\"\n                dur=\"2.2s\"\n                from=\"0 -1\"\n                repeatCount=\"indefinite\"\n                to=\"0 1\"\n                type=\"translate\"\n              />\n            </linearGradient>\n\n            {/* Chip ambient halo */}\n            <radialGradient id={`${id}-halo`}>\n              <stop offset=\"0%\" stopColor=\"rgba(255, 135, 0, 0.05)\" />\n              <stop offset=\"40%\" stopColor=\"rgba(0, 180, 216, 0.025)\" />\n              <stop offset=\"100%\" stopColor=\"transparent\" />\n            </radialGradient>\n          </defs>\n\n          {/* Static background lines */}\n          <g\n            className=\"stroke-black/[0.1] dark:stroke-white/[0.1]\"\n            strokeLinecap=\"round\"\n          >\n            <path d=\"M388 96L388 68C388 65.7909 386.209 64 384 64L310 64\" />\n            <path d=\"M349 150L73 150C70.7909 150 69 151.791 69 154L69 174\" />\n            <path d=\"M574 96L574 4C574 1.79086 575.791 0 578 0L751 0\" />\n            <path d=\"M506 96L506 62C506 59.7909 507.791 58 510 58L579 58\" />\n            <path d=\"M388 96L388 44C388 41.7909 389.791 40 392 40L509 40C511.209 40 513 38.2091 513 36L513 0\" />\n            <path d=\"M547 110L822 110C824.209 110 826 108.209 826 106L826 0\" />\n            <path d=\"M349 110L67 110C64.7909 110 63 108.209 63 106L63 0\" />\n            <path d=\"M547 150L697 150C699.209 150 701 148.209 701 146L701 0\" />\n            <path d=\"M349 150L199 150C196.791 150 195 148.209 195 146L195 0\" />\n          </g>\n\n          {/* Endpoint dots on visible static path terminals */}\n          <g className=\"fill-black/[0.12] dark:fill-white/[0.15]\">\n            <circle cx=\"310\" cy=\"64\" r=\"2.5\" />\n            <circle cx=\"69\" cy=\"174\" r=\"2.5\" />\n            <circle cx=\"579\" cy=\"58\" r=\"2.5\" />\n          </g>\n\n          {/* Orange animated line - right side */}\n          <g>\n            <path\n              className=\"stroke-black/[0.1] dark:stroke-white/[0.1]\"\n              d=\"M547 130L822 130C824.209 130 826 131.791 826 134L826 264\"\n              strokeLinecap=\"round\"\n            />\n            <path\n              d=\"M547 130L822 130C824.209 130 826 131.791 826 134L826 264\"\n              opacity=\"0.3\"\n              stroke={`url(#${id}-orange-pulse-1)`}\n              strokeWidth=\"6\"\n            />\n            <path\n              d=\"M547 130L822 130C824.209 130 826 131.791 826 134L826 264\"\n              stroke={`url(#${id}-orange-pulse-1)`}\n              strokeWidth=\"2\"\n            />\n            <circle fill=\"#ff8700\" r=\"2.5\">\n              <animateMotion\n                dur=\"3s\"\n                path=\"M547 130L822 130C824.209 130 826 131.791 826 134L826 264\"\n                repeatCount=\"indefinite\"\n              />\n              <animate\n                attributeName=\"opacity\"\n                dur=\"3s\"\n                keyTimes=\"0;0.1;0.9;1\"\n                repeatCount=\"indefinite\"\n                values=\"0;0.9;0.9;0\"\n              />\n            </circle>\n          </g>\n\n          {/* Blue animated line - left side */}\n          <g>\n            <path\n              className=\"stroke-black/[0.1] dark:stroke-white/[0.1]\"\n              d=\"M349 130L5.00002 130C2.79088 130 1.00001 131.791 1.00001 134L1.00001 264\"\n              strokeLinecap=\"round\"\n            />\n            <path\n              d=\"M349 130L5.00002 130C2.79088 130 1.00001 131.791 1.00001 134L1.00001 264\"\n              opacity=\"0.3\"\n              stroke={`url(#${id}-blue-pulse-1)`}\n              strokeLinecap=\"round\"\n              strokeWidth=\"6\"\n            />\n            <path\n              d=\"M349 130L5.00002 130C2.79088 130 1.00001 131.791 1.00001 134L1.00001 264\"\n              stroke={`url(#${id}-blue-pulse-1)`}\n              strokeLinecap=\"round\"\n              strokeWidth=\"2\"\n            />\n            <circle fill=\"#00b4d8\" r=\"2.5\">\n              <animateMotion\n                dur=\"3.5s\"\n                path=\"M349 130L5.00002 130C2.79088 130 1.00001 131.791 1.00001 134L1.00001 264\"\n                repeatCount=\"indefinite\"\n              />\n              <animate\n                attributeName=\"opacity\"\n                dur=\"3.5s\"\n                keyTimes=\"0;0.1;0.9;1\"\n                repeatCount=\"indefinite\"\n                values=\"0;0.9;0.9;0\"\n              />\n            </circle>\n          </g>\n\n          {/* Orange animated line - center right */}\n          <g>\n            <path\n              className=\"stroke-black/[0.1] dark:stroke-white/[0.1]\"\n              d=\"M547 150L633 150C635.209 150 637 151.791 637 154L637 236C637 238.209 635.209 240 633 240L488 240C485.791 240 484 241.791 484 244L484 264\"\n              strokeLinecap=\"round\"\n            />\n            <path\n              d=\"M547 150L633 150C635.209 150 637 151.791 637 154L637 236C637 238.209 635.209 240 633 240L488 240C485.791 240 484 241.791 484 244L484 264\"\n              opacity=\"0.3\"\n              stroke={`url(#${id}-orange-pulse-2)`}\n              strokeWidth=\"6\"\n            />\n            <path\n              d=\"M547 150L633 150C635.209 150 637 151.791 637 154L637 236C637 238.209 635.209 240 633 240L488 240C485.791 240 484 241.791 484 244L484 264\"\n              stroke={`url(#${id}-orange-pulse-2)`}\n              strokeWidth=\"2\"\n            />\n          </g>\n\n          {/* Blue animated line - center left */}\n          <g>\n            <path\n              className=\"stroke-black/[0.1] dark:stroke-white/[0.1]\"\n              d=\"M349 150L261 150C258.791 150 257 151.791 257 154L257 236C257 238.209 258.791 240 261 240L406 240C408.209 240 410 241.791 410 244L410 264\"\n              strokeLinecap=\"round\"\n            />\n            <path\n              d=\"M349 150L261 150C258.791 150 257 151.791 257 154L257 236C257 238.209 258.791 240 261 240L406 240C408.209 240 410 241.791 410 244L410 264\"\n              opacity=\"0.3\"\n              stroke={`url(#${id}-blue-pulse-2)`}\n              strokeLinecap=\"round\"\n              strokeWidth=\"6\"\n            />\n            <path\n              d=\"M349 150L261 150C258.791 150 257 151.791 257 154L257 236C257 238.209 258.791 240 261 240L406 240C408.209 240 410 241.791 410 244L410 264\"\n              stroke={`url(#${id}-blue-pulse-2)`}\n              strokeLinecap=\"round\"\n              strokeWidth=\"2\"\n            />\n          </g>\n\n          {/* Pink animated line - top */}\n          <g>\n            <path\n              className=\"stroke-black/[0.1] dark:stroke-white/[0.1]\"\n              d=\"M506 96L506 0\"\n              strokeLinecap=\"round\"\n            />\n            <path\n              d=\"M506 96L506 0\"\n              opacity=\"0.3\"\n              stroke={`url(#${id}-pink-pulse)`}\n              strokeLinecap=\"round\"\n              strokeWidth=\"6\"\n            />\n            <path\n              d=\"M506 96L506 0\"\n              stroke={`url(#${id}-pink-pulse)`}\n              strokeLinecap=\"round\"\n              strokeWidth=\"2\"\n            />\n            <circle fill=\"#ff0080\" r=\"2\">\n              <animateMotion\n                dur=\"2.5s\"\n                path=\"M506 96L506 0\"\n                repeatCount=\"indefinite\"\n              />\n              <animate\n                attributeName=\"opacity\"\n                dur=\"2.5s\"\n                keyTimes=\"0;0.1;0.9;1\"\n                repeatCount=\"indefinite\"\n                values=\"0;0.9;0.9;0\"\n              />\n            </circle>\n          </g>\n\n          {/* Chip ambient halo */}\n          <ellipse\n            cx=\"448\"\n            cy=\"136\"\n            fill={`url(#${id}-halo)`}\n            rx=\"180\"\n            ry=\"90\"\n          />\n\n          {/* Junction nodes at chip connection points */}\n          <g>\n            <circle className=\"fill-orange-500/60\" cx=\"547\" cy=\"130\" r=\"2.5\">\n              <animate\n                attributeName=\"opacity\"\n                dur=\"2s\"\n                repeatCount=\"indefinite\"\n                values=\"0.4;1;0.4\"\n              />\n            </circle>\n            <circle className=\"fill-sky-500/60\" cx=\"349\" cy=\"130\" r=\"2.5\">\n              <animate\n                attributeName=\"opacity\"\n                dur=\"2.2s\"\n                repeatCount=\"indefinite\"\n                values=\"0.4;1;0.4\"\n              />\n            </circle>\n            <circle className=\"fill-orange-500/40\" cx=\"547\" cy=\"150\" r=\"2\">\n              <animate\n                attributeName=\"opacity\"\n                dur=\"2.5s\"\n                repeatCount=\"indefinite\"\n                values=\"0.3;0.8;0.3\"\n              />\n            </circle>\n            <circle className=\"fill-sky-500/40\" cx=\"349\" cy=\"150\" r=\"2\">\n              <animate\n                attributeName=\"opacity\"\n                dur=\"2.3s\"\n                repeatCount=\"indefinite\"\n                values=\"0.3;0.8;0.3\"\n              />\n            </circle>\n            <circle className=\"fill-pink-500/60\" cx=\"506\" cy=\"96\" r=\"2.5\">\n              <animate\n                attributeName=\"opacity\"\n                dur=\"2s\"\n                repeatCount=\"indefinite\"\n                values=\"0.4;1;0.4\"\n              />\n            </circle>\n          </g>\n\n          {/* Connector paths: traces -> card columns */}\n          {/* Blue left -> Card 1 (React) */}\n          <g>\n            <path\n              className=\"stroke-black/[0.1] dark:stroke-white/[0.1]\"\n              d=\"M1 264 C1 290 60 320 148 320\"\n              strokeLinecap=\"round\"\n            />\n            <path\n              d=\"M1 264 C1 290 60 320 148 320\"\n              opacity=\"0.2\"\n              stroke={`url(#${id}-blue-conn)`}\n              strokeLinecap=\"round\"\n              strokeWidth=\"5\"\n            />\n            <path\n              d=\"M1 264 C1 290 60 320 148 320\"\n              stroke={`url(#${id}-blue-conn)`}\n              strokeLinecap=\"round\"\n              strokeWidth=\"1.5\"\n            />\n            <circle\n              className=\"fill-black/[0.12] dark:fill-white/[0.15]\"\n              cx=\"148\"\n              cy=\"320\"\n              r=\"2.5\"\n            />\n          </g>\n\n          {/* Blue center-left -> Card 2 (Turbopack) */}\n          <g>\n            <path\n              className=\"stroke-black/[0.1] dark:stroke-white/[0.1]\"\n              d=\"M410 264 C410 290 430 320 445 320\"\n              strokeLinecap=\"round\"\n            />\n            <path\n              d=\"M410 264 C410 290 430 320 445 320\"\n              opacity=\"0.2\"\n              stroke={`url(#${id}-mixed-conn)`}\n              strokeLinecap=\"round\"\n              strokeWidth=\"5\"\n            />\n            <path\n              d=\"M410 264 C410 290 430 320 445 320\"\n              stroke={`url(#${id}-mixed-conn)`}\n              strokeLinecap=\"round\"\n              strokeWidth=\"1.5\"\n            />\n          </g>\n\n          {/* Orange center-right -> Card 2 (Turbopack) */}\n          <g>\n            <path\n              className=\"stroke-black/[0.1] dark:stroke-white/[0.1]\"\n              d=\"M484 264 C484 290 462 320 445 320\"\n              strokeLinecap=\"round\"\n            />\n            <path\n              d=\"M484 264 C484 290 462 320 445 320\"\n              opacity=\"0.2\"\n              stroke={`url(#${id}-mixed-conn)`}\n              strokeLinecap=\"round\"\n              strokeWidth=\"5\"\n            />\n            <path\n              d=\"M484 264 C484 290 462 320 445 320\"\n              stroke={`url(#${id}-mixed-conn)`}\n              strokeLinecap=\"round\"\n              strokeWidth=\"1.5\"\n            />\n            <circle\n              className=\"fill-black/[0.12] dark:fill-white/[0.15]\"\n              cx=\"445\"\n              cy=\"320\"\n              r=\"2.5\"\n            />\n          </g>\n\n          {/* Orange right -> Card 3 (SWC) */}\n          <g>\n            <path\n              className=\"stroke-black/[0.1] dark:stroke-white/[0.1]\"\n              d=\"M826 264 C826 290 800 320 748 320\"\n              strokeLinecap=\"round\"\n            />\n            <path\n              d=\"M826 264 C826 290 800 320 748 320\"\n              opacity=\"0.2\"\n              stroke={`url(#${id}-orange-conn)`}\n              strokeLinecap=\"round\"\n              strokeWidth=\"5\"\n            />\n            <path\n              d=\"M826 264 C826 290 800 320 748 320\"\n              stroke={`url(#${id}-orange-conn)`}\n              strokeLinecap=\"round\"\n              strokeWidth=\"1.5\"\n            />\n            <circle\n              className=\"fill-black/[0.12] dark:fill-white/[0.15]\"\n              cx=\"748\"\n              cy=\"320\"\n              r=\"2.5\"\n            />\n          </g>\n        </svg>\n\n        {/* HTML CPU Chip overlay */}\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute flex select-none items-center justify-center\"\n          style={{\n            left: \"50.3%\",\n            top: \"51.3%\",\n            transform: \"translate(-50%, -50%)\",\n          }}\n        >\n          <div className=\"flex flex-col items-center\">\n            {/* Top connectors */}\n            <div className=\"flex gap-[5px]\">\n              {Array.from({ length: 6 }).map((_, i) => (\n                <span\n                  className=\"block h-[6px] w-[7px] rounded-[1px] bg-black/5 shadow-[inset_0_0_0_0.5px_rgba(0,0,0,0.08)] dark:bg-white/10 dark:shadow-[inset_0_0_0_0.5px_rgba(255,255,255,0.1)]\"\n                  key={`t-${i}`}\n                />\n              ))}\n            </div>\n\n            <div className=\"flex items-center\">\n              {/* Left connectors */}\n              <div className=\"flex flex-col gap-[5px]\">\n                {Array.from({ length: 2 }).map((_, i) => (\n                  <span\n                    className=\"block h-[7px] w-[6px] rounded-[1px] bg-black/5 shadow-[inset_0_0_0_0.5px_rgba(0,0,0,0.08)] dark:bg-white/10 dark:shadow-[inset_0_0_0_0.5px_rgba(255,255,255,0.1)]\"\n                    key={`l-${i}`}\n                  />\n                ))}\n              </div>\n\n              {/* Chip body */}\n              <div\n                className=\"relative rounded-lg px-5 py-4 sm:px-6 sm:py-5\"\n                style={{\n                  background: \"linear-gradient(180deg, #444 0%, #333 100%)\",\n                  boxShadow:\n                    \"0 2px 4px rgba(0,0,0,0.1), 0 6px 4px -2px rgba(0,0,0,0.15), inset 0 -3px 1px -1px rgba(0,0,0,0.25)\",\n                }}\n              >\n                <div\n                  className=\"pointer-events-none absolute inset-0 rounded-lg\"\n                  style={{\n                    background:\n                      \"linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.05) 40%, transparent 60%)\",\n                  }}\n                />\n                <span className=\"relative whitespace-nowrap font-semibold text-base text-white leading-none tracking-tighter sm:text-xl md:text-2xl\">\n                  Powered By\n                </span>\n              </div>\n\n              {/* Right connectors */}\n              <div className=\"flex flex-col gap-[5px]\">\n                {Array.from({ length: 2 }).map((_, i) => (\n                  <span\n                    className=\"block h-[7px] w-[6px] rounded-[1px] bg-black/5 shadow-[inset_0_0_0_0.5px_rgba(0,0,0,0.08)] dark:bg-white/10 dark:shadow-[inset_0_0_0_0.5px_rgba(255,255,255,0.1)]\"\n                    key={`r-${i}`}\n                  />\n                ))}\n              </div>\n            </div>\n\n            {/* Bottom connectors */}\n            <div className=\"flex gap-[5px]\">\n              {Array.from({ length: 6 }).map((_, i) => (\n                <span\n                  className=\"block h-[6px] w-[7px] rounded-[1px] bg-black/5 shadow-[inset_0_0_0_0.5px_rgba(0,0,0,0.08)] dark:bg-white/10 dark:shadow-[inset_0_0_0_0.5px_rgba(255,255,255,0.1)]\"\n                  key={`b-${i}`}\n                />\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Technology Cards */}\n      <motion.div\n        animate=\"visible\"\n        className=\"-mt-4 relative z-10 grid w-full grid-cols-1 gap-4 md:grid-cols-3\"\n        initial=\"hidden\"\n        variants={cardStagger}\n      >\n        <TechCard\n          description=\"The library for web and native user interfaces. Next.js is built on the latest React features, including Server Components and Actions.\"\n          glowColor=\"rgba(0, 180, 216, 0.15)\"\n          glowDelay={0}\n          href=\"https://react.dev\"\n          icon={<ReactIcon />}\n          name=\"React\"\n        />\n        <TechCard\n          description={\n            <>\n              An incremental bundler optimized for JavaScript and TypeScript,\n              written in Rust <RustIcon />, and built into Next.js.\n            </>\n          }\n          glowColor=\"rgba(180, 120, 255, 0.15)\"\n          glowDelay={0.8}\n          href=\"https://turbo.build/pack\"\n          icon={<TurbopackIcon />}\n          name=\"Turbopack\"\n        />\n        <TechCard\n          description={\n            <>\n              An extensible Rust <RustIcon /> based platform for the next\n              generation of fast developer tools, and can be used for both\n              compilation and minification.\n            </>\n          }\n          glowColor=\"rgba(255, 135, 0, 0.15)\"\n          glowDelay={1.6}\n          href=\"https://swc.rs\"\n          icon={<SwcIcon />}\n          name=\"Speedy Web Compiler\"\n        />\n      </motion.div>\n    </div>\n  )\n}\n\nfunction TechCard({\n  name,\n  href,\n  icon,\n  description,\n  glowColor,\n  glowDelay,\n}: {\n  name: string\n  href: string\n  icon: React.ReactNode\n  description: React.ReactNode\n  glowColor: string\n  glowDelay: number\n}) {\n  return (\n    <motion.a\n      className=\"group relative flex flex-col overflow-hidden rounded-xl bg-card p-6 shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_2px_-1px_rgba(0,0,0,0.06),0px_2px_4px_0px_rgba(0,0,0,0.04)] transition-all duration-200 hover:bg-secondary/50 hover:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.08),0px_1px_2px_-1px_rgba(0,0,0,0.08),0px_2px_4px_0px_rgba(0,0,0,0.06)] dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.06),0px_1px_2px_-1px_rgba(255,255,255,0.03),0px_2px_4px_0px_rgba(0,0,0,0.2)] dark:hover:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1),0px_1px_2px_-1px_rgba(255,255,255,0.05),0px_2px_4px_0px_rgba(0,0,0,0.25)]\"\n      href={href}\n      rel=\"noopener noreferrer\"\n      target=\"_blank\"\n      variants={cardFadeUp}\n    >\n      {/* Glow overlay */}\n      <div\n        className=\"pointer-events-none absolute inset-0 rounded-xl\"\n        style={{\n          boxShadow: `0 0 24px 4px ${glowColor}, inset 0 0 16px 1px ${glowColor}`,\n          animation: `pulse-glow 4s ease-in-out ${glowDelay}s infinite`,\n        }}\n      />\n      {/* Top accent line */}\n      <div\n        className=\"pointer-events-none absolute inset-x-4 top-0 h-px\"\n        style={{\n          background: `linear-gradient(90deg, transparent, ${glowColor}, transparent)`,\n          animation: `pulse-glow 4s ease-in-out ${glowDelay}s infinite`,\n        }}\n      />\n      <div className=\"mb-6 flex h-12 w-12 items-center justify-center\">\n        {icon}\n      </div>\n      <h3 className=\"mb-2 flex items-center gap-1 font-medium text-card-foreground text-lg transition-colors group-hover:text-card-foreground/80\">\n        {name}\n        <ArrowUpRight className=\"group-hover:-translate-y-0.5 h-4 w-4 opacity-60 transition-all group-hover:translate-x-0.5 group-hover:opacity-100\" />\n      </h3>\n      <p className=\"text-muted-foreground text-sm leading-relaxed\">\n        {description}\n      </p>\n    </motion.a>\n  )\n}\n\nfunction ReactIcon() {\n  return (\n    <svg className=\"h-12 w-12\" fill=\"none\" viewBox=\"0 0 48 48\">\n      <g className=\"opacity-80 dark:opacity-80\">\n        <circle cx=\"24\" cy=\"24\" fill=\"#61DAFB\" r=\"4\" />\n        <ellipse\n          cx=\"24\"\n          cy=\"24\"\n          fill=\"none\"\n          rx=\"18\"\n          ry=\"7\"\n          stroke=\"#61DAFB\"\n          strokeWidth=\"1.5\"\n        />\n        <ellipse\n          cx=\"24\"\n          cy=\"24\"\n          fill=\"none\"\n          rx=\"18\"\n          ry=\"7\"\n          stroke=\"#61DAFB\"\n          strokeWidth=\"1.5\"\n          transform=\"rotate(60 24 24)\"\n        />\n        <ellipse\n          cx=\"24\"\n          cy=\"24\"\n          fill=\"none\"\n          rx=\"18\"\n          ry=\"7\"\n          stroke=\"#61DAFB\"\n          strokeWidth=\"1.5\"\n          transform=\"rotate(120 24 24)\"\n        />\n      </g>\n    </svg>\n  )\n}\n\nfunction TurbopackIcon() {\n  return (\n    <svg className=\"h-12 w-12\" fill=\"none\" viewBox=\"0 0 48 48\">\n      <g className=\"fill-foreground stroke-foreground\">\n        <rect\n          className=\"opacity-60\"\n          fill=\"none\"\n          height=\"32\"\n          rx=\"4\"\n          strokeWidth=\"1.5\"\n          width=\"32\"\n          x=\"8\"\n          y=\"8\"\n        />\n        <rect\n          className=\"opacity-80\"\n          height=\"8\"\n          stroke=\"none\"\n          width=\"8\"\n          x=\"14\"\n          y=\"14\"\n        />\n        <rect\n          className=\"opacity-60\"\n          height=\"8\"\n          stroke=\"none\"\n          width=\"8\"\n          x=\"26\"\n          y=\"14\"\n        />\n        <rect\n          className=\"opacity-40\"\n          height=\"8\"\n          stroke=\"none\"\n          width=\"8\"\n          x=\"14\"\n          y=\"26\"\n        />\n        <rect\n          className=\"opacity-20\"\n          height=\"8\"\n          stroke=\"none\"\n          width=\"8\"\n          x=\"26\"\n          y=\"26\"\n        />\n      </g>\n    </svg>\n  )\n}\n\nfunction SwcIcon() {\n  return (\n    <svg className=\"h-12 w-12\" fill=\"none\" viewBox=\"0 0 48 48\">\n      <path\n        d=\"M8 28C8 28 12 20 16 20C20 20 20 28 24 28C28 28 28 20 32 20C36 20 40 28 40 28\"\n        fill=\"none\"\n        stroke=\"url(#swc-gradient)\"\n        strokeLinecap=\"round\"\n        strokeWidth=\"4\"\n      />\n      <defs>\n        <linearGradient\n          gradientUnits=\"userSpaceOnUse\"\n          id=\"swc-gradient\"\n          x1=\"8\"\n          x2=\"40\"\n          y1=\"24\"\n          y2=\"24\"\n        >\n          <stop stopColor=\"#F9A825\" />\n          <stop offset=\"0.5\" stopColor=\"#FF6F00\" />\n          <stop offset=\"1\" stopColor=\"#E65100\" />\n        </linearGradient>\n      </defs>\n    </svg>\n  )\n}\n\nfunction RustIcon() {\n  return (\n    <svg\n      className=\"mx-0.5 inline-block h-4 w-4 align-text-bottom\"\n      fill=\"none\"\n      viewBox=\"0 0 16 16\"\n    >\n      <circle\n        cx=\"8\"\n        cy=\"8\"\n        fill=\"none\"\n        r=\"6.5\"\n        stroke=\"#FF4F00\"\n        strokeWidth=\"1\"\n      />\n      <circle cx=\"8\" cy=\"8\" fill=\"#FF4F00\" r=\"1.5\" />\n      <path d=\"M8 3V5\" stroke=\"#FF4F00\" strokeLinecap=\"round\" strokeWidth=\"1\" />\n      <path\n        d=\"M8 11V13\"\n        stroke=\"#FF4F00\"\n        strokeLinecap=\"round\"\n        strokeWidth=\"1\"\n      />\n      <path d=\"M3 8H5\" stroke=\"#FF4F00\" strokeLinecap=\"round\" strokeWidth=\"1\" />\n      <path\n        d=\"M11 8H13\"\n        stroke=\"#FF4F00\"\n        strokeLinecap=\"round\"\n        strokeWidth=\"1\"\n      />\n    </svg>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}