"use client" import { useId, useState, useSyncExternalStore } from "react" // next import Link from "next/link" // shadcn import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" // third-party import { cn } from "cn" import { AnimatePresence, motion, useReducedMotion } from "framer-motion" // assets import { CheckCircle2 } from "lucide-react" interface Plan { name: string tagline: string monthly: number | null yearly: number | null cta: string featuresHeading: string features: string[] featured?: boolean } interface PricingCardProps { plan: Plan yearly: boolean reduce?: boolean | null cardsSelfReveal?: boolean } const EASE_ENTRANCE = [0.21, 0.47, 0.32, 0.98] as const const REVEAL_VIEWPORT = { once: true, margin: "0px 0px -12% 0px" } as const const surfaceFeatured = cn( "bg-[#101828]", "dark:bg-[linear-gradient(160deg,color-mix(in_oklab,var(--primary)_28%,var(--card))_0%,color-mix(in_oklab,var(--primary)_14%,var(--card))_100%)]" ) const plans: Plan[] = [ { name: "Starter", tagline: "Build your foundation", monthly: 0, yearly: 0, cta: "Get Started", featuresHeading: "Core Features", features: [ "Access to selected free courses", "Basic quizzes", "Community support", ], }, { name: "Pro", tagline: "Expand your skills", monthly: 18, yearly: 14, cta: "Upgrade to Pro", featuresHeading: "Everything in Starter, plus:", features: [ "Unlimited course access", "Interactive projects", "Course certificates", "Priority support", ], featured: true, }, { name: "Premium", tagline: "Master your craft", monthly: 49, yearly: 39, cta: "Go Premium", featuresHeading: "Everything in Pro, plus:", features: [ "Exclusive masterclasses", "1-on-1 mentorship", "Job placement assistance", ], }, ] function subscribeCompact(onStoreChange: () => void) { const list = window.matchMedia("(max-width: 767px)") list.addEventListener("change", onStoreChange) return () => list.removeEventListener("change", onStoreChange) } function useIsCompact() { return useSyncExternalStore( subscribeCompact, () => window.matchMedia("(max-width: 767px)").matches, () => false ) } function PricingCard({ plan, yearly, reduce, cardsSelfReveal, }: PricingCardProps) { const price = yearly ? plan.yearly : plan.monthly const isFree = price === 0 return ( {plan.featured && ( Most Popular )}

{plan.name}

{plan.tagline}

${price} {!isFree && ( /mo )} {isFree && ( forever )} {!isFree && yearly && ( ${plan.monthly} )}

{plan.featuresHeading}

) } // ------------------------------ | PRICING 18 | ------------------------------ // export default function Pricing18() { const headingId = useId() const [yearly, setYearly] = useState(true) const reduce = useReducedMotion() const cardsSelfReveal = useIsCompact() return (

Flexible plans for every learner

Choose the perfect plan to accelerate your learning journey. Upgrade, downgrade, or cancel anytime.

{(["monthly", "yearly"] as const).map((option) => { const isActive = (option === "yearly") === yearly return ( ) })}

{plans.map((plan) => ( ))}

) }