"use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Sparkles, ArrowUpRight, Check } from "lucide-react"; interface PricingPlan { name: string; description: string; monthlyPrice: number; yearlyPrice: number; features: string[]; } const plans: PricingPlan[] = [ { name: "Pilot Plan", description: "For district pilots and cooperatives", monthlyPrice: 100, yearlyPrice: 80, features: [ "Farmer onboarding workflow", "Case ID and SLA tracking", "Eligibility checklist", "Agent-assisted submissions", "Pilot reporting dashboard", ], }, { name: "Institution Plan", description: "For banks, MFIs, and agencies", monthlyPrice: 500, yearlyPrice: 400, features: [ "Everything in Pilot Plan", "Bank/MFI case queue", "Officer assignment and escalation", "Document quality scoring", "District portfolio analytics", ], }, { name: "Platform Plan", description: "For national scale and ecosystems", monthlyPrice: 2500, yearlyPrice: 2000, features: [ "Everything in Institution Plan", "Buyer and exporter portal", "Supplier procurement network", "API and regulator exports", "Dedicated rollout support", ], }, ]; function PricingCard({ plan, isVisualActive, onClick, onMouseEnter, onMouseLeave, isMonthly, }: { plan: PricingPlan; isVisualActive: boolean; onClick: () => void; onMouseEnter: () => void; onMouseLeave: () => void; isMonthly: boolean; }) { const [isBtnHovered, setIsBtnHovered] = useState(false); const price = isMonthly ? plan.monthlyPrice : plan.yearlyPrice; return ( {isVisualActive && (
)}

{plan.name}

{plan.description}

${price}

Monthly platform fee

FEATURES

    {plan.features.map((feature: string, idx: number) => (
  • {feature}
    • ))}
); } export default function Pricing01Finsyc({ className }: { className?: string }) { const [isMonthly, setIsMonthly] = useState(true); const [activePlan, setActivePlan] = useState("Institution Plan"); const [hoveredPlan, setHoveredPlan] = useState(null); const [mounted, setMounted] = useState(false); useEffect(() => { const timer = setTimeout(() => setMounted(true), 0); return () => clearTimeout(timer); }, []); return ( <>
Commercial Model Choose the model for your rollout stage AGNET is designed to start with institutional subscriptions, then scale through transaction revenue, marketplace fees, and data advisory contracts.
{plans.map((plan: PricingPlan, idx: number) => { const isVisualActive = hoveredPlan ? hoveredPlan === plan.name : activePlan === plan.name; return ( setActivePlan(plan.name)} onMouseEnter={() => setHoveredPlan(plan.name)} onMouseLeave={() => setHoveredPlan(null)} /> ); })}
); }