Pulsating Neon Button

Please implement this code in the current project and add it to (Your Desired Section, e.g. homepage hero, pricing page, dashboard). Change the primary accent color to (YOUR HEX CODE COLOR, e.g. #6366F1).

Requirements:
- Use React + Tailwind CSS (match the project's existing setup)
- Install dependencies if needed: npm install framer-motion
- Keep the layout responsive on mobile and desktop
- Replace placeholder copy with content that fits the project

The UI code:

"use client";

import { motion } from "framer-motion";

export function PulsatingNeonButton({ label = "Start building" }: { label?: string }) {
  return (
    <motion.button
      whileHover={{ scale: 1.04, y: -3, boxShadow: "0 0 48px rgba(34,211,238,0.5)" }}
      whileTap={{ scale: 0.96 }}
      transition={{ type: "spring", stiffness: 380, damping: 20 }}
      className="group relative rounded-xl px-7 py-2.5 text-sm font-bold uppercase tracking-wider text-cyan-300"
    >
      <span className="absolute inset-0 rounded-xl bg-cyan-400/20 opacity-0 blur-xl transition-opacity group-hover:opacity-100" />
      <motion.span
        className="absolute inset-0 rounded-xl border border-cyan-400/50"
        animate={{ opacity: [0.5, 1, 0.5] }}
        transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
      />
      <motion.span
        className="absolute -inset-1 rounded-xl opacity-40"
        style={{
          background: "conic-gradient(from 90deg, transparent, #22d3ee, transparent 30%)",
        }}
        animate={{ rotate: 360 }}
        transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
      />
      <span className="relative z-10 flex items-center gap-2">
        <span className="relative flex h-2 w-2">
          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-cyan-400 opacity-60" />
          <span className="relative inline-flex h-2 w-2 rounded-full bg-cyan-400" />
        </span>
        {label}
      </span>
    </motion.button>
  );
}