"use client"; import React, { useState, useEffect } from "react"; import { motion } from "framer-motion"; import { ArrowRight, Sparkles, ArrowUpRight, type LucideIcon } from "lucide-react"; import { Facebook, Twitter, Linkedin, Instagram } from "@/lib/finsyc-brand-icons"; import { cn } from "@/lib/utils"; interface CTAButtonProps { text: string; variant?: 'primary' | 'secondary'; } function CTAButton({ text, variant = 'primary' }: CTAButtonProps) { const isPrimary = variant === 'primary'; const [isHovered, setIsHovered] = React.useState(false); return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} whileTap={{ scale: 0.98 }} className={cn( "relative flex items-center h-[56px] rounded-full transition-all duration-500 overflow-hidden gap-3", isPrimary ? "bg-[#042718] text-white shadow-[0_8px_32px_rgba(4,39,24,0.15)]" : "bg-white/20 backdrop-blur-xl border border-white/60 text-[#042718] w-full sm:w-[232px] justify-between shadow-[0_8px_32px_rgba(255,255,255,0.1)]", isHovered ? "pl-[8px] pr-[20px] flex-row-reverse" : "pl-[20px] pr-[8px] flex-row" )} > {text} ); } export default function CtaWithFooter01Finsyc({ className }: { className?: string }) { const [isMounted, setIsMounted] = useState(false); useEffect(() => { const timer = setTimeout(() => setIsMounted(true), 0); return () => clearTimeout(timer); }, []); const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, }; const itemVariants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { duration: 0.6, ease: [0.21, 0.45, 0.32, 0.9] as const, }, }, }; return ( <> ); }