"use client" import { Fragment, useId, type ReactNode } from "react" // third-party import { cn } from "cn" import { motion, useReducedMotion } from "framer-motion" // assets import { Check, Minus } from "lucide-react" type Cell = boolean | string interface ComparisonGroup { title: string rows: { label: string; values: [Cell, Cell, Cell] }[] } interface FadeInProps { children: ReactNode delay?: number className?: string } const tiers = ["Starter", "Pro", "Premium"] as const const FEATURED = 1 const EASE_ENTRANCE = [0.21, 0.47, 0.32, 0.98] as const const REVEAL_MARGIN = "0px 0px -12% 0px" as const const groups: ComparisonGroup[] = [ { title: "Courses & content", rows: [ { label: "Course library", values: ["Free selection", "Unlimited", "Unlimited"], }, { label: "New releases", values: ["After 30 days", "Day one", "Day one"], }, { label: "Interactive projects", values: [false, true, true] }, { label: "Downloadable resources", values: [false, true, true] }, { label: "Exclusive masterclasses", values: [false, false, true] }, ], }, { title: "Practice & assessment", rows: [ { label: "Quizzes", values: ["Basic set", "Full bank", "Full bank"] }, { label: "Graded assignments", values: [false, true, true] }, { label: "Course certificates", values: [false, true, true] }, { label: "Portfolio review", values: [false, false, true] }, ], }, { title: "Support & guidance", rows: [ { label: "Community forum", values: [true, true, true] }, { label: "Support response", values: ["3–5 days", "Within 24 hours", "Within 4 hours"], }, { label: "1-on-1 mentorship", values: [false, false, "2 sessions / month"], }, { label: "Job placement help", values: [false, false, true] }, ], }, { title: "Seats & billing", rows: [ { label: "Seats included", values: ["1", "1", "Up to 3"] }, { label: "Invoice billing", values: [false, false, true] }, { label: "Cancel anytime", values: [true, true, true] }, ], }, ] function FadeIn({ children, delay = 0, className }: FadeInProps) { const reduce = useReducedMotion() return ( {children} ) } function CellValue({ value }: { value: Cell }) { if (typeof value === "string") { return {value} } return ( <> {value ? "Included" : "Not included"} {value ? ( ) : ( )} ) } function MobilePlanCard({ tierIndex }: { tierIndex: number }) { const featured = tierIndex === FEATURED return (

{tiers[tierIndex]} {featured && ( Most popular )}

{groups.map((group) => (

{group.title}

{group.rows.map((row) => (

{row.label}

))}

) } // ------------------------------ | PRICING 19 | ------------------------------ // export default function Pricing19() { const headingId = useId() return (

Compare every feature

The full breakdown, so you can see exactly what changes as you move up a tier.

{tiers.map((tier, index) => ( ))}

{tiers.map((tier, index) => ( ))} {groups.map((group) => ( {group.rows.map((row) => ( {row.values.map((value, index) => ( ))} ))} ))}

Feature comparison across the Starter, Pro and Premium plans
Features	{tier} {index === FEATURED && ( Most popular )}
{group.title}
{row.label}

) }