"use client"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { CheckCircle2, XCircle, Info, ArrowRight, Download } from "lucide-react"; import { cn } from "@/lib/utils"; type Feature = { text: string; included: boolean; }; type Plan = { name: string; description: string; priceMonthly: number; priceYearly: number; billedYearlyText: string; discount?: string; isPopular?: boolean; buttonText: string; buttonColorClass: string; features: Feature[]; additionalFeatures: Feature[]; }; const plans: Plan[] = [ { name: "Free", description: "Try us out for a quick project or two", priceMonthly: 0, priceYearly: 0, billedYearlyText: "Upgrade any time", buttonText: "Get started", buttonColorClass: "bg-black hover:bg-gray-800 text-white", features: [ { text: "1 active project", included: true }, { text: "3 MB upload limit", included: true }, { text: "5,000 visitors /mo", included: true } ], additionalFeatures: [ { text: "Remove Tiny Host banner", included: false }, { text: "QR codes", included: false }, { text: "Built-in Analytics", included: false } ] }, { name: "Tiny", description: "Perfect for a single, professional link", priceMonthly: 5, priceYearly: 60, billedYearlyText: "Billed at $60 /yr", discount: "44% off", buttonText: "Get started", buttonColorClass: "bg-[#007bff] hover:bg-[#0069d9] text-white", features: [ { text: "1 active project", included: true }, { text: "25 MB upload limit", included: true }, { text: "10,000 visitors /mo", included: true } ], additionalFeatures: [ { text: "Remove Tiny Host banner", included: true }, { text: "QR codes", included: true }, { text: "Built-in Analytics", included: true } ] }, { name: "Solo", description: "Great for small projects", priceMonthly: 13, priceYearly: 156, billedYearlyText: "Billed at $156 /yr", discount: "27% off", isPopular: true, buttonText: "Get started", buttonColorClass: "bg-[#8a2be2] hover:bg-[#7a24cc] text-white", features: [ { text: "5 active projects", included: true }, { text: "75 MB upload limit", included: true }, { text: "100,000 visitors /mo", included: true } ], additionalFeatures: [ { text: "Everything in Tiny Plan", included: true }, { text: "Custom domains", included: true }, { text: "Edit mode", included: true }, { text: "Password protection", included: true } ] }, { name: "Pro", description: "For freelancers, agencies & companies", priceMonthly: 31, priceYearly: 372, billedYearlyText: "Billed at $372 /yr", discount: "18% off", buttonText: "Get started", buttonColorClass: "bg-[#ffc107] hover:bg-[#e0a800] text-black", features: [ { text: "Unlimited active projects", included: true }, { text: "10 GB upload limit", included: true }, { text: "500,000 visitors /mo", included: true } ], additionalFeatures: [ { text: "Everything in Solo Plan", included: true }, { text: "Capture emails", included: true }, { text: "Add more team members", included: true } ] } ]; export default function PricingTable() { const [isYearly, setIsYearly] = useState(true); return (

Pricing

Upgrade to link your custom domain, track your visits, edit your content & much more.

{plans.map((plan) => (

{plan.isPopular && (

{plan.name}

{plan.description}

{plan.discount && (

{plan.discount}

)}

${plan.name === "Free" ? 0 : isYearly ? plan.priceYearly : plan.priceMonthly} {plan.name === "Free" ? "/mo" : isYearly ? "/yr" : "/mo"}

{plan.name === "Free" ? plan.billedYearlyText : isYearly ? plan.billedYearlyText : "Billed monthly"}

7-day money-back guarantee

{feature.included ? ( ) : ( )} {feature.text}

{plan.additionalFeatures.length > 0 && ( <>

Additional Features:

{feature.included ? ( ) : ( )} {feature.text}

)}

))}

); }