"use client"; import { CheckIcon } from "lucide-react"; import { motion } from "motion/react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { SectionShell, ContentRail } from "@/components/layout-contract"; const plans = [ { name: "Starter", price: "$0", period: "forever", description: "For individuals exploring the platform.", features: ["Up to 3 projects", "Basic analytics", "Email support"], highlighted: false, }, { name: "Pro", price: "$29", period: "per seat / mo", description: "For growing teams shipping every week.", features: [ "Unlimited projects", "Advanced analytics", "Priority support", "SSO & audit logs", ], highlighted: true, }, { name: "Enterprise", price: "Custom", period: "contact us", description: "For organizations with advanced needs.", features: [ "Everything in Pro", "Dedicated manager", "Custom SLAs", "On-premise option", ], highlighted: false, }, ]; export function PricingSection() { return (

Simple, transparent pricing

Start free, upgrade when your team grows. No hidden fees.

{plans.map((plan, index) => ( {plan.highlighted ? ( Most popular ) : null}

{plan.name}

{plan.price} {plan.period}

{plan.description}

{feature}

))}

); }