CTA Exemple 2

1import {motion, Variants} from 'framer-motion';
2
3export default function CTASection() {
4    const containerVariants: Variants = {
5        hidden: { opacity: 0 },
6        visible: {
7            opacity: 1,
8            transition: {
9                staggerChildren: 0.15,
10                delayChildren: 0.2,
11            },
12        },
13    };
14
15    const itemVariants: Variants =  {
16        hidden: { opacity: 0, y: 20 },
17        visible: {
18            opacity: 1,
19            y: 0,
20            transition: { duration: 0.6, ease: 'easeOut' },
21        },
22    };
23
24    return (
25        <section className="w-full px-4 py-20 sm:px-6 lg:px-8">
26            <motion.div
27                initial="hidden"
28                whileInView="visible"
29                viewport={{ once: true, amount: 0.3 }}
30                variants={containerVariants}
31                className="relative w-full max-w-6xl mx-auto overflow-hidden rounded-3xl bg-black"
32            >
33                {/* Gradient accent - left side */}
34                <div className="absolute inset-0">
35                    <div className="absolute top-0 left-0 w-1/2 h-full bg-gradient-to-r from-emerald-600/30 via-emerald-500/20 to-transparent rounded-full blur-3xl"></div>
36                    <div className="absolute bottom-0 left-0 w-96 h-96 bg-gradient-to-t from-emerald-600/20 to-transparent rounded-full blur-3xl"></div>
37                </div>
38
39                {/* Content */}
40                <div className="relative z-10 px-6 py-24 sm:px-12 sm:py-28 lg:px-20 flex flex-col items-center text-center">
41                    {/* Heading */}
42                    <motion.h2
43                        variants={itemVariants}
44                        className="text-4xl sm:text-5xl lg:text-6xl text-white tracking-tight mb-6"
45                    >
46                        Ready for more demand?
47                    </motion.h2>
48
49                    {/* Subheading */}
50                    <motion.p
51                        variants={itemVariants}
52                        className="text-xl sm:text-xl text-gray-300 mb-10 max-w-2xl leading-relaxed"
53                    >
54                        Stop losing leads to 'Get in touch' buttons and boring contact forms.
55                    </motion.p>
56
57                    {/* Buttons */}
58                    <motion.div
59                        variants={itemVariants}
60// … truncated