"use client"; import React, { useMemo, useState } from "react"; import { Check, Sparkles, ShieldCheck, Zap, ArrowRight } from "lucide-react"; const plans = [ { name: "Starter", description: "For students, indie builders, and quick launches.", monthly: 0, yearly: 0, badge: "Free", cta: "Start Free", popular: false, features: [ "Access to free components", "Basic templates preview", "Copy-paste code snippets", "Community support", "Personal projects only", ], }, { name: "Pro", description: "For serious builders who need premium UI fast.", monthly: 29, yearly: 249, badge: "Most Popular", cta: "Upgrade to Pro", popular: true, features: [ "Premium React components", "Full source code access", "Commercial project license", "New components every month", "Priority component requests", "Lifetime updates while subscribed", ], }, { name: "Agency", description: "For freelancers and teams building client projects.", monthly: 79, yearly: 699, badge: "Best for Teams", cta: "Get Agency", popular: false, features: [ "Everything in Pro", "Use in unlimited client projects", "Team-friendly license", "Premium templates library", "Priority support", "Early access to new launches", ], }, ]; const faqs = [ { question: "Can I use these components in client projects?", answer: "Yes. Pro supports commercial usage, while Agency is best if you build multiple client projects or work with a team.", }, { question: "Do I get future updates?", answer: "Yes. Active subscribers get updates, improvements, and newly released components during their subscription period.", }, { question: "Can I cancel anytime?", answer: "Yes. You can cancel your subscription anytime and keep access until the end of your billing cycle.", }, ]; function formatPrice(price) { if (price === 0) return "$0"; return `$${price}`; } export default function PricingPage() { const [billing, setBilling] = useState("monthly"); const yearlySelected = billing === "yearly"; const savingsText = useMemo(() => { const proMonthlyYear = 29 * 12; const proSaving = proMonthlyYear - 249; return `Save $${proSaving} on Pro yearly`; }, []); return (

Premium UI components for faster launches

Simple pricing for modern builders

Choose the plan that fits your workflow. Get beautifully crafted React + Tailwind components, templates, and production-ready UI sections.

{savingsText}

{plans.map((plan) => { const price = yearlySelected ? plan.yearly : plan.monthly; const period = yearlySelected ? "/year" : "/month"; return (

{plan.popular && (

{plan.badge}

)} {!plan.popular && (

{plan.badge}

)}

{plan.name}

{plan.description}

{plan.popular ? (

) : (

)}

{formatPrice(price)} {price === 0 ? "forever" : period}

{yearlySelected && price > 0 && (

Equivalent to ${Math.round(price / 12)}/month, billed yearly.

)}

{feature}

); })}

Frequently asked questions

{faqs.map((faq) => (

{faq.question}

{faq.answer}

))}

Launch your next project faster.

Stop rebuilding the same sections again and again. Use ready-made, clean, responsive UI blocks and focus on shipping your product.

); }