"use client";
import { useEffect, useRef, useState } from "react";
// "Sequential count-up" animation identity — scoped with a unique
// `al-pricing11-*` prefix so this never collides with another Resource's
// own animation layer when copied standalone. This is the same canonical
// source shown in the Code tab's Tailwind CSS view.
import "./Pricing11.tailwind.css";
const PLANS = [
    { id: "indie", name: "Indie", price: 15, pitch: "For side projects and solo work.", cta: "Choose Indie" },
    { id: "crew", name: "Crew", price: 45, pitch: "For small teams shipping together.", cta: "Choose Crew" },
    { id: "org", name: "Org", price: 120, pitch: "For organizations at real scale.", cta: "Choose Org" },
];
const COUNT_UP_MS = 900;
const SEQUENCE_GAP_MS = 250;
function usePrices() {
    const [values, setValues] = useState(PLANS.map(() => 0));
    const rowRef = useRef(null);
    const hasRunRef = useRef(false);
    useEffect(() => {
        const node = rowRef.current;
        if (!node)
            return;
        if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
            const frame = requestAnimationFrame(() => setValues(PLANS.map((plan) => plan.price)));
            return () => cancelAnimationFrame(frame);
        }
        const observer = new IntersectionObserver((entries) => {
            const entry = entries[0];
            if (!entry?.isIntersecting || hasRunRef.current)
                return;
            hasRunRef.current = true;
            observer.disconnect();
            PLANS.forEach((plan, index) => {
                setTimeout(() => {
                    const start = performance.now();
                    function tick(now) {
                        const progress = Math.min((now - start) / COUNT_UP_MS, 1);
                        const eased = 1 - Math.pow(1 - progress, 3);
                        setValues((prev) => {
                            const next = [...prev];
                            next[index] = Math.round(eased * plan.price);
                            return next;
                        });
                        if (progress < 1)
                            requestAnimationFrame(tick);
                    }
                    requestAnimationFrame(tick);
                }, index * SEQUENCE_GAP_MS);
            });
        }, { threshold: 0.3 });
        observer.observe(node);
        return () => observer.disconnect();
    }, []);
    return { rowRef, values };
}
/**
 * Pricing 11 — an extra-sparse row of oversized prices with no cards, no
 * dividers, and no feature lists. Once the row scrolls into view, the
 * three numbers count up one after another rather than all at once.
 */
function Pricing11() {
    const { rowRef, values } = usePrices();
    return (<section aria-label="Pricing" className="bg-white px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-28">
      <div className="mx-auto max-w-3xl text-center">
        <h2 className="text-3xl font-bold tracking-tight text-neutral-900 sm:text-4xl">Three numbers. No fine print.</h2>
      </div>

      <div ref={rowRef} className="mx-auto mt-14 flex max-w-4xl flex-col items-center gap-14 lg:mt-16 lg:flex-row lg:justify-center lg:gap-20">
        {PLANS.map((plan, index) => (<div key={plan.id} className="al-pricing11-fade flex flex-col items-center text-center">
            <p className="text-xs font-semibold tracking-[0.2em] text-neutral-500 uppercase">{plan.name}</p>
            <div className="mt-3 flex items-baseline gap-1">
              <span className="text-2xl text-neutral-400">$</span>
              <span className="text-7xl font-bold tracking-tight text-neutral-900 tabular-nums">{values[index]}</span>
            </div>
            <p className="mt-3 max-w-56 text-sm leading-relaxed text-neutral-500">{plan.pitch}</p>
            <a href="#" className="mt-5 text-sm font-semibold text-neutral-900 underline decoration-neutral-300 underline-offset-4 transition-colors hover:decoration-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-700">
              {plan.cta}
            </a>
          </div>))}
      </div>
    </section>);
}
export { Pricing11 };
Pricing 11

Requirements

Dependencies

Usage
