'use client'; import React, { useEffect, useRef, useState } from 'react'; import { RiArrowRightUpLongLine, RiPriceTag3Fill } from '@remixicon/react'; import * as AvatarGroupCompact from './components/ui/avatar-group-compact'; import * as Avatar from './components/ui/avatar'; import * as Badge from './components/ui/badge'; import * as Button from './components/ui/button'; export default function Pricing04() { type PlanKey = 'monthly' | 'yearly'; const [activePlan, setActivePlan] = useState('monthly'); const containerRef = useRef(null); const buttonRefs = useRef>({ monthly: null, yearly: null, }); const [thumbLeft, setThumbLeft] = useState(4); const [thumbWidth, setThumbWidth] = useState(0); const repositionThumb = () => { const container = containerRef.current; const activeEl = buttonRefs.current[activePlan]; if (!container || !activeEl) return; const containerRect = container.getBoundingClientRect(); const activeRect = activeEl.getBoundingClientRect(); const left = activeRect.left - containerRect.left; setThumbLeft(left); setThumbWidth(activeRect.width); }; useEffect(() => { repositionThumb(); const handle = () => repositionThumb(); window.addEventListener('resize', handle); const id = window.setInterval(repositionThumb, 250); return () => { window.removeEventListener('resize', handle); window.clearInterval(id); }; }, [activePlan]); const ListDotIcon = () => { return ( ); }; const ArrowIcon = () => { return ( ); }; return (

Designed for growing finance teams

Scale with clarity, not complexity

Choose a plan that grows with your team — simple, transparent,{' '} and optimized for finance impact.

Starter