Pricing 02

1"use client";
2 
3import {
4  type CSSProperties,
5  useEffect,
6  useLayoutEffect,
7  useRef,
8  useState,
9} from "react";
10import { ArrowRight, Check } from "lucide-react";
11 
12const plans = [
13  {
14    name: "Starter",
15    monthlyPrice: 0,
16    yearlyPrice: 0,
17    description: "For personal projects and ideas taking their first shape.",
18    features: [
19      "3 active projects",
20      "Unlimited collaborators",
21      "Core analytics",
22      "Community support",
23      "7-day version history",
24      "Standard integrations",
25    ],
26    includesLabel: "Starter includes",
27    cta: "Start for free",
28  },
29  {
30    name: "Studio",
31    monthlyPrice: 32,
32    yearlyPrice: 307,
33    description: "For small teams building and shipping every week.",
34    features: [
35      "Unlimited projects",
36      "Custom domains",
37      "Advanced analytics",
38      "Priority support",
39      "Unlimited version history",
40      "Team permissions",
41    ],
42    includesLabel: "Everything in Starter, plus",
43    cta: "Choose Studio",
44    featured: true,
45  },
46  {
47    name: "Scale",
48    monthlyPrice: 96,
49    yearlyPrice: 922,
50    description: "For growing organizations that need control and support.",
51    features: [
52      "Everything in Studio",
53      "Single sign-on",
54      "Audit logs",
55      "Dedicated onboarding",
56      "Custom data retention",
57      "Enterprise integrations",
58    ],
59    includesLabel: "Everything in Studio, plus",
60    cta: "Choose Scale",
61  },
62];
63 
64type BillingCycle = "monthly" | "yearly";
65 
66function positionPill(
67  pill: HTMLSpanElement,
68  tab: HTMLButtonElement,
69  animate: boolean,
70) {
71  if (!animate) {
72    const previousTransition = pill.style.transition;
73    pill.style.transition = "none";
74    pill.style.transform = `translateX(${tab.offsetLeft}px)`;
75    pill.style.width = `${tab.offsetWidth}px`;
76    void pill.offsetWidth;
77    pill.style.transition = previousTransition;
78    return;
79  }
80 
81  pill.style.transform = `translateX(${tab.offsetLeft}px)`;
82  pill.style.width = `${tab.offsetWidth}px`;
83}
84 
85export function Pricing02() {
86  const [billingCycle, setBillingCycle] = useState<BillingCycle>("monthly");
87  const pillRef = useRef<HTMLSpanElement>(null);
88  const monthlyTabRef = useRef<HTMLButtonElement>(null);
89  const yearlyTabRef = useRef<HTMLButtonElement>(null);
90  const priceRefs = useRef<Array<HTMLSpanElement | null>>([]);
91  const hasMounted = useRef(false);
92 
93  useLayoutEffect(() => {
94    const pill = pillRef.current;
95    const activeTab = monthlyTabRef.current;
96// … truncated