"use client"; import { motion } from "framer-motion"; import { Check, X, Zap, Star, Shield } from "lucide-react"; export default function MostPopularHighlight() { const plans = [ { name: "Basic", description: "Essential features for individuals and freelancers.", price: "15", icon: Shield, popular: false, features: [ { name: "1 Workspace", included: true }, { name: "Basic Analytics", included: true }, { name: "Community Support", included: true }, { name: "Custom Domains", included: false }, { name: "Team Collaboration", included: false }, ], }, { name: "Professional", description: "Advanced tools for growing agencies and teams.", price: "49", icon: Star, popular: true, badge: "Recommended", features: [ { name: "Unlimited Workspaces", included: true }, { name: "Advanced Analytics", included: true }, { name: "Priority 24/7 Support", included: true }, { name: "Custom Domains", included: true }, { name: "Team Collaboration", included: true }, ], }, { name: "Enterprise", description: "Custom solutions for large scale organizations.", price: "99", icon: Zap, popular: false, features: [ { name: "Everything in Pro", included: true }, { name: "Dedicated Server", included: true }, { name: "SLA Guarantee", included: true }, { name: "SSO Authentication", included: true }, { name: "White-labeling", included: true }, ], } ]; return (

{plans.map((plan, index) => { const isPopular = plan.popular; const Icon = plan.icon; return ( {isPopular && (

{plan.badge}

)}

{plan.name}

{plan.description}

$ {plan.price} /mo

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

); })}

); }