Pricing Section One

1'use client'
2 
3import type { ComponentPropsWithoutRef } from 'react'
4import { useState } from 'react'
5import { Check } from 'lucide-react'
6 
7import { AnimatedNumber } from '@/components/ui/components/animated-numbers'
8import { Badge } from '@/components/ui/badge'
9import { Button } from '@/components/ui/button'
10import {
11  Card,
12  CardContent,
13  CardDescription,
14  CardFooter,
15  CardHeader,
16  CardTitle,
17} from '@/components/ui/card'
18import { cn } from '@/lib/utils'
19 
20export type PricingInterval = 'monthly' | 'yearly'
21 
22export type PricingValue = number | string
23 
24// Defines the content and configuration for each pricing plan.
25export type PricingPlan = {
26  id: string
27  name: string
28  description: string
29  monthlyPrice: PricingValue
30  yearlyPrice: PricingValue
31  features: readonly string[]
32  ctaLabel: string
33  ctaHref: string
34  prefix?: string
35  priceSuffix?: string
36  featured?: boolean
37  badge?: string
38}
39 
40// Controls the section heading content.
41export type PricingSectionCopy = {
42  eyebrow?: string
43  heading: string
44  description: string
45}
46 
47// Controls the billing toggle labels.
48export type PricingBillingCopy = {
49  ariaLabel: string
50  monthlyLabel: string
51  yearlyLabel: string
52  yearlyNote: string
53}
54 
55export type PricingSectionOneProps = ComponentPropsWithoutRef<'section'> & {
56  plans?: readonly PricingPlan[]
57  defaultInterval?: PricingInterval
58  copy?: Partial<PricingSectionCopy>
59  billing?: Partial<PricingBillingCopy>
60}
61 
62// Default section content.
63const defaultCopy: PricingSectionCopy = {
64  heading: 'Simple pricing for every stage',
65  description:
66    'Start for free, upgrade when you need more, or contact us for a plan tailored to your organization.',
67}
68 
69// Default billing toggle content.
70const defaultBilling: PricingBillingCopy = {
71  ariaLabel: 'Choose billing interval',
72  monthlyLabel: 'Monthly',
73  yearlyLabel: 'Yearly',
74  yearlyNote: 'Save 20%',
75}
76 
77// Default pricing plans used when no custom plans are provided.
78const defaultPlans: readonly PricingPlan[] = [
79  {
80    id: 'free',
81    name: 'Free',
82    description: 'For individuals getting started with the essential tools.',
83    prefix: '$',
84    monthlyPrice: 0,
85    yearlyPrice: 0,
86    priceSuffix: '/ month',
87    features: ['1 workspace', 'Up to 3 projects', 'Basic analytics', 'Community support'],
88    ctaLabel: 'Start free',
89    ctaHref: '#get-started',
90  },
91  {
92    id: 'pro',
93    name: 'Pro',
94    description: 'For professionals and growing teams that need more power and flexibility.',
95    prefix: '$',
96// … truncated