import React from "react"; const CheckIcon = () => ( ); const ArrowIcon = () => ( ); // Customizable content for the pricing plans const content = { heading: "Choose the Perfect Plan for Your Team", popularTag: "Most Popular", buttonText: "Choose Plan", plans: [ { name: "Starter", price: 29, features: [ "AI-Powered Insights", "Performance Analytics", "Basic Collaboration Tools", "5 Team Members", "10GB Storage", ], popular: false, }, { name: "Pro", price: 79, features: [ "All Starter Features", "Advanced Security", "Custom Workflows", "Unlimited Team Members", "100GB Storage", ], popular: true, }, { name: "Enterprise", price: 199, features: [ "All Pro Features", "Dedicated Support", "Custom Integrations", "On-Premise Deployment", "Unlimited Storage", ], popular: false, }, ], }; // Types for pricing plan features type PlanFeatures = { name: string; price: number; features: string[]; popular: boolean; }; // PlanCard component taking PlanFeatures as props const PlanCard: React.FC = ({ name, price, features, popular, }) => (

{popular && (

{content.popularTag}

)}

{name}

${price} /mo

{feature}

); // Main NeuroPricingPlans component const NeuroPricingPlans = () => { return ( <>

{/* Updated Background Shapes with animations */}

{content.heading}

{content.plans.map((plan, index) => ( ))}

); }; export default NeuroPricingPlans;

Saas Components

Clean Minimalist Pricing

Neumorphic Pricing