"use client"; import { CheckIcon } from "lucide-react"; import { useState } from "react"; import { motion } from "framer-motion"; export function Pricing_Plans() { const [billing, setBilling] = useState<"monthly" | "yearly">("monthly"); const plans = [ { label: "SPRINT", labelColor: "bg-yellow-100 text-yellow-700", title: "One-Time Setup", price: "$1,999", type: "one-time", button: "Send Proposal", description: "Ideal for validating your core product idea with essential design and development—fast.", features: [ "2-3 core features implemented", "Built using Ruixen Open Source Starter Kit", "Basic UI/UX customization", "Fully responsive components", "Timeline: 2–4 weeks", ], }, { label: "PRO", labelColor: "bg-indigo-100 text-indigo-700", title: "Monthly Subscription", price: billing === "monthly" ? "$499" : "$4999", type: billing, popular: true, button: billing === "monthly" ? "Start Monthly" : "Start Yearly", description: "Best for scaling teams needing consistent design & dev with premium Ruixen UI components.", features: [ "Full access to Ruixen UI library", "Unlimited website components", "Priority support & updates", "Integration help (Next.js, Remix, etc.)", "SEO-optimized templates", "Ongoing performance improvements", ], }, { label: "ENTERPRISE", labelColor: "bg-emerald-100 text-emerald-700", title: "Custom Solutions", price: "Custom", type: "", button: "Contact Us", description: "Tailored for large teams needing full-stack design, dev, & deployment support using Ruixen stack.", features: [ "Dedicated solution architect", "Design + Dev + Hosting consultation", "Custom workflows & dashboards", "Migration from legacy UIs", "AI-powered UI integrations", "Training + Onboarding", ], }, ]; const [period, setPeriod] = useState(0); const handleChangePeriod = (index: number) => { setPeriod(index); if (index === 0) { setBilling("monthly"); } else { setBilling("yearly"); } }; return (

Pricing Plans for Every Stage

Whether you're launching or scaling, Ruixen UI supports your journey with expertly crafted UI & services.

{plans.map((plan, i) => (

{plan.label}

{plan.price} {plan.type && ( /{plan.type} )}

{plan.description}

What's included:

{feature}

))}

); }

Pricing Plans

Installation

Usage