CTA Banner Section

1"use client";
2 
3import { Badge } from "@/components/ui/badge";
4import { Button } from "@/components/ui/button";
5import {
6  AnimatePresence,
7  motion,
8  MotionConfig,
9  useInView,
10  useReducedMotion,
11  type Variants,
12} from "framer-motion";
13import { ArrowRight, ChevronRight, Sparkles, Zap } from "lucide-react";
14import { useId, useMemo, useRef, useState } from "react";
15import { cn } from "@/lib/utils";
16 
17const motionPresets = {
18  smooth: { type: "spring" as const, bounce: 0.3, duration: 0.4 },
19  bounce: { type: "spring" as const, bounce: 0.5, duration: 0.35 },
20  fade: { type: "tween" as const, ease: [0.26, 0.08, 0.25, 1] as const, duration: 0.2 },
21};
22 
23 
24const highlights = [
25  { id: "highlight-free", label: "Free Forever", icon: Zap },
26  { id: "highlight-credit", label: "No Credit Card", icon: Sparkles },
27  { id: "highlight-oss", label: "Open Source", icon: ChevronRight },
28];
29 
30interface CTABannerSectionProps {
31  motionPreset?: keyof typeof motionPresets;
32  className?: string;
33}
34 
35export function CTABannerSection({
36  motionPreset = "smooth",
37  className,
38}: CTABannerSectionProps) {
39  const ref = useRef<HTMLDivElement | null>(null);
40  const isInView = useInView(ref, { once: true, margin: "-10% 0px" });
41  const shouldReduceMotion = useReducedMotion();
42  const [hoveredButton, setHoveredButton] = useState<"primary" | "secondary" | null>(null);
43 
44  const titleId = useId();
45  const descriptionId = useMemo(() => `${titleId}-description`, [titleId]);
46 
47  const reducedMotionVariants: Variants = {
48    hidden: { opacity: 0 },
49    visible: { opacity: 1 },
50  };
51 
52  const containerVariants: Variants = useMemo(
53    () =>
54      shouldReduceMotion
55        ? reducedMotionVariants
56        : {
57            hidden: { opacity: 0 },
58            visible: {
59              opacity: 1,
60              transition: {
61                staggerChildren: 0.1,
62                delayChildren: 0.2,
63              },
64            },
65          },
66    [shouldReduceMotion]
67  );
68 
69  const itemVariants: Variants = useMemo(
70    () =>
71      shouldReduceMotion
72        ? reducedMotionVariants
73        : {
74            hidden: { opacity: 0, y: 20 },
75            visible: {
76              opacity: 1,
77              y: 0,
78              transition: { duration: 0.4 },
79            },
80          },
81    [shouldReduceMotion]
82  );
83 
84  // Button micro-interaction variants
85  const buttonVariants: Variants = {
86    idle: { y: 0 },
87    hover: { y: -4 },
88    tap: { y: 0, scale: 0.98 },
89  };
90 
91  return (
92    <MotionConfig
93// … truncated