"use client"; import { useEffect, useState } from 'react'; function useMediaQuery(query: string) { const [value, setValue] = useState(false); useEffect(() => { function onChange(event: MediaQueryListEvent) { setValue(event.matches); } const result = matchMedia(query); result.addEventListener('change', onChange); setValue(result.matches); return () => result.removeEventListener('change', onChange); }, [query]); return value; } import { buttonVariants } from '@/components/ui/button'; import { Label } from '@/components/ui/label'; import { Switch } from '@/components/ui/switch'; import { cn } from '@/lib/utils'; import { motion } from 'framer-motion'; import { Check, Star } from 'lucide-react'; import Link from 'next/link'; import { useState, useRef } from 'react'; import confetti from 'canvas-confetti'; import NumberFlow from '@number-flow/react'; // Define your plans const plans = [ { name: 'STARTER', price: '50', yearlyPrice: '40', period: 'per month', features: [ 'Up to 10 projects', 'Basic analytics', '48-hour support response time', 'Limited API access', 'Community support', ], description: 'Perfect for individuals and small projects', buttonText: 'Start Free Trial', href: '/sign-up', isPopular: false, }, { name: 'PROFESSIONAL', price: '99', yearlyPrice: '79', period: 'per month', features: [ 'Unlimited projects', 'Advanced analytics', '24-hour support response time', 'Full API access', 'Priority support', 'Team collaboration', 'Custom integrations', ], description: 'Ideal for growing teams and businesses', buttonText: 'Get Started', href: '/sign-up', isPopular: true, }, { name: 'ENTERPRISE', price: '299', yearlyPrice: '239', period: 'per month', features: [ 'Everything in Professional', 'Custom solutions', 'Dedicated account manager', '1-hour support response time', 'SSO Authentication', 'Advanced security', 'Custom contracts', 'SLA agreement', ], description: 'For large organizations with specific needs', buttonText: 'Contact Sales', href: '/contact', isPopular: false, }, ]; interface PricingPlan { name: string; price: string; yearlyPrice: string; period: string; features: string[]; description: string; buttonText: string; href: string; isPopular: boolean; } interface PricingProps { plans: PricingPlan[]; title?: string; description?: string; } export default function CongestedPricing() { const [isMonthly, setIsMonthly] = useState(true); const isDesktop = useMediaQuery('(min-width: 768px)'); const switchRef = useRef(null); const handleToggle = (checked: boolean) => { setIsMonthly(!checked); if (checked && switchRef.current) { const rect = switchRef.current.getBoundingClientRect(); const x = rect.left + rect.width / 2; const y = rect.top + rect.height / 2; confetti({ particleCount: 50, spread: 60, origin: { x: x / window.innerWidth, y: y / window.innerHeight, }, colors: [ 'hsl(var(--primary))', 'hsl(var(--accent))', 'hsl(var(--secondary))', 'hsl(var(--muted))', ], ticks: 200, gravity: 1.2, decay: 0.94, startVelocity: 30, shapes: ['circle'], }); } }; return (

Simple, transparent pricing for all.

Choose the plan that works for you\nAll plans include access to our platform, lead generation tools, and dedicated support.

Annual billing (Save 20%)

{plans.map((plan, index) => ( {plan.isPopular && (

Popular

)}

{plan.name}

{plan.period !== 'Next 3 months' && ( / {plan.period} )}

{isMonthly ? 'billed monthly' : 'billed annually'}

{feature}

{plan.buttonText}

{plan.description}

))}

); }