CTA

<section className="py-12 md:py-24">
  <div className="bg-primary text-primary-foreground rounded-2xl mx-4 md:mx-auto max-w-5xl p-8 md:p-16 text-center shadow-xl relative overflow-hidden">
    <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-white/20 via-transparent to-transparent opacity-50"></div>
    <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl relative z-10">Ready to boost your productivity?</h2>
    <p className="mt-4 text-primary-foreground/80 md:text-xl max-w-2xl mx-auto relative z-10">Join thousands of developers building better web experiences faster.</p>
    <div className="mt-8 flex flex-col sm:flex-row justify-center gap-4 relative z-10">
      <button className="inline-flex h-10 items-center justify-center rounded-md bg-background px-8 py-2 text-sm font-medium text-foreground shadow transition-colors hover:bg-background/90">Start for free</button>
    </div>
  </div>
</section>

"use client";

import React, { useState } from "react";

interface CtaProps {
  className?: string;
  children?: React.ReactNode;
}

export default function Cta({
  className = "",
  children,
}: CtaProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <section className="py-12 md:py-24">
  <div className="bg-primary text-primary-foreground rounded-2xl mx-4 md:mx-auto max-w-5xl p-8 md:p-16 text-center shadow-xl relative overflow-hidden">
    <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-white/20 via-transparent to-transparent opacity-50"></div>
    <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl relative z-10">Ready to boost your productivity?</h2>
    <p className="mt-4 text-primary-foreground/80 md:text-xl max-w-2xl mx-auto relative z-10">Join thousands of developers building better web experiences faster.</p>
    <div className="mt-8 flex flex-col sm:flex-row justify-center gap-4 relative z-10">
      <button className="inline-flex h-10 items-center justify-center rounded-md bg-background px-8 py-2 text-sm font-medium text-foreground shadow transition-colors hover:bg-background/90">Start for free</button>
    </div>
  </div>
</section>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedCta() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <section className="py-12 md:py-24">
  <div className="bg-primary text-primary-foreground rounded-2xl mx-4 md:mx-auto max-w-5xl p-8 md:p-16 text-center shadow-xl relative overflow-hidden">
    <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-white/20 via-transparent to-transparent opacity-50"></div>
    <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl relative z-10">Ready to boost your productivity?</h2>
    <p className="mt-4 text-primary-foreground/80 md:text-xl max-w-2xl mx-auto relative z-10">Join thousands of developers building better web experiences faster.</p>
    <div className="mt-8 flex flex-col sm:flex-row justify-center gap-4 relative z-10">
      <button className="inline-flex h-10 items-center justify-center rounded-md bg-background px-8 py-2 text-sm font-medium text-foreground shadow transition-colors hover:bg-background/90">Start for free</button>
    </div>
  </div>
</section>
    </motion.div>
  );
}