CTA Banner Section

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