"use client"; import { motion, useReducedMotion } from "framer-motion"; import { cn } from "@/lib/utils"; import { BjorkButton } from "@/components/bjork-ui/primitives/button"; interface BonusesIncentivesCardProps { // Content bonusText?: string; incentivesText?: string; bonusesValue?: number; incentivesValue?: number; // Styling borderColor?: string; backgroundColor?: string; blurColorBlue?: string; blurColorGreen?: string; // Dots configuration outerDotsCount?: number; innerDotsCount?: number; // Animation controls enableAnimations?: boolean; // Callbacks onMoreDetails?: () => void; } const defaultProps: Partial = { bonusText: "Bonus and Incentives", incentivesText: "Incentives", bonusesValue: 1250, incentivesValue: 875, borderColor: "border-[#d8d3c7] dark:border-[#161616]", backgroundColor: "bg-[#f4f1e9] dark:bg-[#121212]", blurColorBlue: "bg-[#ec5c13]/10", blurColorGreen: "bg-[#8a7a60]/10", outerDotsCount: 48, innerDotsCount: 36, enableAnimations: true, }; export function BonusesIncentivesCard(props: BonusesIncentivesCardProps) { const { bonusesValue, incentivesValue, borderColor, backgroundColor, outerDotsCount, innerDotsCount, enableAnimations, onMoreDetails, } = { ...defaultProps, ...props }; const shouldReduceMotion = useReducedMotion(); const shouldAnimate = enableAnimations && !shouldReduceMotion; // Generate circular dots positions const generateDots = (count: number, radius: number, centerX: number, centerY: number) => { const dots = []; for (let i = 0; i < count; i++) { const angle = (i / count) * 2 * Math.PI; const x = Math.round((centerX + radius * Math.cos(angle)) * 1000) / 1000; const y = Math.round((centerY + radius * Math.sin(angle)) * 1000) / 1000; dots.push({ x, y, angle, delay: i * 0.02 }); } return dots; }; const outerDots = generateDots(outerDotsCount!, 185, 203, 200); const innerDots = generateDots(innerDotsCount!, 155, 203, 200); // Animation variants const containerVariants = { hidden: { opacity: 0, y: 20, scale: 0.95 }, visible: { opacity: 1, y: 0, scale: 1, transition: { type: "spring", stiffness: 300, damping: 30, staggerChildren: 0.08, delayChildren: 0.1, } } }; const dotVariants = { hidden: { opacity: 0, scale: 0, }, visible: { opacity: 0.6, scale: 1, transition: { duration: 0.5, ease: "easeOut", } } }; return ( {/* Middle Section - Dots */}

{/* Blur backgrounds */}

{/* Dots Container */}

{/* Center Text Overlay */}

TOTAL ${(bonusesValue! + incentivesValue!).toLocaleString()}

{/* Gradient fade overlay for bottom half - covers entire card */}

{/* Bottom Section */}

{/* Bonuses Section */}

Bonuses

${bonusesValue!.toLocaleString()} +15.2%

{/* Incentives Section */}

Incentives

${incentivesValue!.toLocaleString()} +8.7%

More Details

); }